Bootstrap макеты: 4766+ Шаблонов для Bootstrap | BootstrapТема

13.07.2023 alexxlab

Содержание

Шаблон ❖ Twitter Bootstrap

Bootstrap построен на динамической 12-колонной сетке. Мы так же включили функционал фиксированной и плавающей ширины колонок в шаблоне.

Основные стили
Сетка
Плавающая сетка
Пользовательские настройки
Макеты
Динамический дизайн

Необходим HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства для которых необходимо использовать HTML5 doctype. Убедитесь в использовании HTML5 doctype на каждой за’Bootstrap’енной странице Вашего проекта.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Оформление и ссылки

В файле scaffolding.less, мы установили основные стили, оформление (стили и размеры шрифтов), и стили ссылок. Конкретнее:

Удалили отступ (margin) элемента body
Установили background-color: white; для body
Используем @baseFontFamily, @baseFontSize, и @baseLineHeight атрибуты, как основные для оформления

Выставили основной цвет ссылки через @linkColor и применили подчеркивание только для селектора :hover

Сбрасывание браузерных дефолтов через Normalize

В Bootstrap 2 мы применили ставший обыденным сброс браузерных дефолтов с помощью Normalize. css, проект от Nicolas Gallagher (Николаса Галлагера) так же мы включили все плюсы от HTML5 Boilerplate.

Сброс дефолтных стилей находится в reset.less, мы многое изменили для большей совместимости.

Основная сетка макета представлена как часть Bootstrap’а в 940px-ширины в 12-колонок.

Так же представленны 4 динамических варианта для различных девайсов и разрешений экрана: телефон, наладонник портретная, наладонник горизонтальная, он же маленький монитор, и большой широкоэкранный монитор.

<div>
  <div>...</div>
  <div>...</div>
</div>

Из примера видно, что основная сетка макета может быть создана с помощью двух «columns», в итоге число «spanning» или span(x)’ов равняется 12 основным колонкам, которые определенны как часть основной сетки.

Отключение колонок

с помощью offset(x) класса

4 offset 4

3 offset 3

8 offset 4

<div>
  <div>.  ..</div>
  <div>...</div>
</div>

Вложенные колонки

Со статическими колонками (не плавающими) в Bootstrap легко можно создать вложенные колонки. Для вложения одной группы колон в другую колонку просто добавьте новую .row (строку) и включите в неё .span(x) колонки.

Пример

Вложенные колонки не могут превышать размер родительской колонны т.е. в .span5 можно вложить пять .span1 или два .span2 и один .span1. Смотрите пример ниже.

Уровень 1 (.span6)

Уровень 2 (.span3)

<div>
  <div>
    Уровень 1
    <div>
      <div>Уровень 2</div>
      <div>Уровень 2</div>
    </div>
  </div>
</div>

Плавающие колонки

Проценты, не пиксели

Плавающая колонка использует проценты в качестве ширины, в отличии от фиксированного количества пикселей. Плавающие колонки имеют ту же динамичность, что и фиксированные колонки, обеспечивая одинаковую пропорцию на различных устройствах и дисплеях.

Плавающие строки

(.row)

Сделать плавающую строку можно просто изменив .row на .row-fluid. Колонки останутся прежними. Это позволяет с невероятной легкостью переключаться между фиксированным и плавающим шаблоном дизайна.

Пример разметки

<div>
  <div>...</div>
  <div>...</div>
</div>

Вложение в плавающую сетку

Вложение в плавающую сетку немного отличается: номер и сумма span(x)’ов может не совпадать с размером родительской колонки, так как вложенные колонны на каждом уровне вложения занимают 100% родительской колонки.

Fluid 12

Fluid 6

<div>
  <div>
    Level 1 of column
    <div>
      <div>Level 2</div>
      <div>Level 2</div>
    </div>
  </div>
</div>

Переменная	Значение по умолчанию	Описание
`@gridColumns`	12	Количество колонок
`@gridColumnWidth`	60px	Ширина каждой колонки
`@gridGutterWidth`	20px	Расстояние (отступ) между колонками

Переменные в LESS

Несколько переменных, описанных выше и встроенных в Bootstrap, позволят Вам с легкостью изменить настройки сетки, по умолчанию (940px). Все переменные связанные с сеткой шаблона находятся в variables.less.

Как изменить?

Изменение сетки шаблона связанны с изменением дерева переменных @grid* и должны быть перекомпилированны в Bootstrap. Изменяйте переменные сетки шаблона в variables.less и используйте четыре способа перекомпилировать less. Если Вы добавляете колонки в сетку шаблона, убедитесь что добавили CSS для новых колонок в grid.less.

Изменение параметров динамики

Изменение сетки макета работает только на дефолтном уровне, когда ширина составляет 940px. Для изменений в динамической сетке Bootstrap’а Вам так же необходимо изменить сетку шаблона в responsive.less.

Фиксированный

Основной и простой макет с шириной в 940px, отцентрованное расположение элементов для простого сайта с основным родительским <div>.

<body>
  <div>
    ...
  </div>
</body>

Плавающий

<div> предоставляет плавающую структуру страницы, min- и max-widths, с левым сайдбаром для меню. Этот макет отлично подходит для текстов и приложений.

<div>
  <div>
    <div>
      <!--Sidebar content-->
    </div>
    <div>
      <!--Body content-->
    </div>
  </div>
</div>

Как использовать?

Медиа-запросы позволяют изменять CSS «на лету», в зависимости от размера экрана, соотношения ширины и высоты экрана, типа устройства, и т.д., но обычно используется для изменения min-width и max-width элементов.

Изменяется ширина колонок в сетке шаблона
Заменяются плавающие элементы на фиксированные при необходимости
Изменяется размер заголовков и основного шрифта на разных устройствах

Используйте динамические возможности Медиа-запросов только для создания мобильной версии сайта. Для крупных проектов мы рекомендуем создавать отдельную версию дизайна и сайта.

Поддерживаемые устройства

Bootstrap поддерживает несколько медиа-запросов в одном файле, что позволяет работать Вашему проекту на различных устройствах и с разными разрешениями экранов. Что включено:

Категория	Ширина шаблона	Ширина колонок	Отступ колонок
Смартфоны	480px и меньше	Плавающие колонки без фиксированной ширины
Планшеты	767px и меньше	Плавающие колонки без фиксированной ширины
Портретные планшеты	768px и больше	42px	20px
По умолчанию	980px и больше	60px	20px
Большие дисплеи	1200px и больше	70px	30px

Обязательный meta — тег

Для корректного отображения и работы динамических медиа-запросов, необходимо включить viewport meta — тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Использование медиа-запросов

Bootstrap не включает в себя данные медиа-запросы по умолчанию, но понимание и их добавление — очень простой процесс.

У Вас есть несколько путей для добавления динамических возможностей Bootstrap’a:

Использовать скомпилированную версию, bootstrap-responsive.css
Добавить @import «responsive.less» и перекомпилировать Bootstrap
Изменить и перекомпилировать responsive.less как отдельный файл

Почему бы не включить этот функционал в Bootstrap по умолчанию? Дело в том, что не все элементы должны быть динамическими. Мы решили, что логичнее будет дать возможность разработчикам включать данный функционал при необходимости, а не удалять его.

  // Ландшафтный экран телефоны
  @media (max-width: 480px) { ... }
  // От ландшафтного экрана телефона до потретного планшета
  @media (max-width: 767px) { ... }
  // От портретного планшета до ландшафтного экрана и настольных дисплеев
  @media (min-width: 768px) and (max-width: 979px) { ... }
  // Большой дисплей
  @media (min-width: 1200px) { ... }

Возможность динамических классов

Кто они такие?

Для быстрой разработки под мобильные платформы, используйте эти классы для показа или скрытия контента в зависимости от устройства.

Когда использовать?

Использование данного функционала позволяет не создавать разные версии одного и того же сайта под разные устройства. Вместо этого можно управлять показом и скрытием контента в зависимости от устройства.

Для примера, Вы можете показать <select> элемент для навигации в мобильном устройстве, но скрыть на десктопах и планшетах.

Поддерживаемые классы

Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы находятся в responsive.less.

Класс	Телефоны 480px и меньше	Планшеты 767px и меньше	Ноутбуки и десктопы 768px и больше
`.visible-phone`	Виден	Скрыто	Скрыто
`.visible-tablet`	Скрыто	Виден	Скрыто
`. visible-desktop`	Скрыто	Скрыто	Виден
`.hidden-phone`	Скрыто	Виден	Виден
`.hidden-tablet`	Виден	Скрыто	Виден
`.hidden-desktop`	Виден	Виден	Скрыто

Тестирование

Измените размер окна или откройте данную страницу на мобильном устройстве для тестирование вышеуказанных классов в действии.

Виден на…

Зеленая отметка означает что блок виден в текущем окне шаблона.

Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор

Скрыт на…

Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.

Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор

Макет в ASP.NET Core | Microsoft Learn

Статья
01/28/2023

Авторы: Стив Смит (Steve Smith) и Дейв Брок (Dave Brock)

На страницах и в представлениях часто есть общие визуальные и программные элементы. В этой статье демонстрируются следующие возможности.

Использование общих макетов.
Совместное использование директив.
Запуск общего кода до отрисовки страниц или представлений.

В этом документе рассматриваются макеты двух различных подходов к ASP.NET Core MVC: Razor Pages и контроллеров с представлениями. С этой точки зрения различия минимальны:

Razor Страницы находятся в папке Pages .
Контроллеры с представлениями используют папку Views для представлений.

Что такое макет

Большинство веб-приложений имеют общий макет, который обеспечивает согласованный пользовательский интерфейс при переходе между страницами. Макет, как правило, включает в себя общие элементы пользовательского интерфейса, такие как верхний и нижний колонтитулы, а также элементы навигации или меню.

Структуры HTML, такие как скрипты и таблицы стилей, также часто используются совместно несколькими страницами в приложении. Все эти общие элементы могут быть определены в файле макета , на который затем можно ссылаться любым представлением, используемым в приложении. Макеты позволяют сократить дублирование кода в представлениях.

В соответствии с соглашением макет по умолчанию для приложения ASP.NET Core имеет имя _Layout.cshtml. В новых проектах ASP.NET Core, созданных с применением шаблонов, используются следующие файлы макета.

Макет определяет шаблон верхнего уровня для представлений в приложении. Для приложений макет не требуется. В приложении может быть определено несколько макетов для разных представлений.

В следующем коде показан файл макета для проекта, созданного по шаблону, с контроллером и представлениями:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap. css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span>Toggle navigation</span>
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <a asp-page="/Index">WebApplication1</a>
            </div>
            <div>
                <ul>
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <partial name="_CookieConsentPartial" />
    <div>
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - WebApplication1</p>
        </footer>
    </div>
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery. js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site. min.js" asp-append-version="true"></script>
    </environment>
    @RenderSection("Scripts", required: false)
</body>
</html>

Указание макета

Razor представления имеют Layout свойство. С его помощью указывается макет в отдельных представлениях:

@{
    Layout = "_Layout";
}

Указанный макет может использовать полный путь (например, /Pages/Shared/_Layout.cshtml или) или /Views/Shared/_Layout.cshtmlчастичное имя (например: _Layout). При указании Razor частичного имени модуль просмотра выполняет поиск файла макета с помощью стандартного процесса обнаружения. Сначала поиск выполняется в папке, где существует метод обработчика (или контроллер), а затем в папке Shared. Процесс обнаружения аналогичен тому, который применяется для поиска частичных представлений.

По умолчанию каждый макет должен вызывать метод RenderBody. При каждом вызове RenderBody содержимое представления будет преобразовываться для просмотра.

Разделы

Макет может при необходимости ссылаться на один или несколько разделов, вызывая метод RenderSection. Разделы — это средство для упорядочения размещения определенных элементов на странице. В каждом вызове RenderSection можно указывать, является ли раздел обязательным или необязательным:

<script type="text/javascript" src="~/scripts/global.js"></script>
@RenderSection("Scripts", required: false)

Если обязательный раздел не найден, создается исключение. Отдельные представления указывают содержимое для отрисовки в разделе с помощью синтаксиса @sectionRazor . Если на странице или в представлении определяется раздел, он должен быть преобразован для просмотра (в противном случае произойдет ошибка).

Пример @section определения в Razor представлении Pages:

@section Scripts {
     <script type="text/javascript" src="~/scripts/main.js"></script>
}

В приведенном выше коде scripts/main. js добавляется в scripts раздел на странице или представлении. Другие страницы или представления в одном приложении могут не требовать этот скрипт и не определять раздел скриптов.

Следующая разметка использует вспомогательный элемент частичного тега для отрисовки _ValidationScriptsPartial.cshtml:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Предыдущая разметка была создана шаблономIdentity.

Разделы, определенные на странице или в представлении, доступны только непосредственно на странице макета. На них нельзя ссылаться из частичных представлений, компонентов представлений или других частей системы представлений.

Пропуск разделов

По умолчанию тело и все разделы страницы содержимого должны преобразовываться для просмотра страницей макета. Обработчик Razor представлений применяет это путем отслеживания того, был ли отрисован текст и каждый раздел.

Чтобы подсистема представлений пропустила тело или разделы, вызовите методы IgnoreBody и IgnoreSection.

Текст и каждый раздел Razor на странице должны быть отрисованы или проигнорированы.

Импорт общих директив

Представления и страницы могут использовать Razor директивы для импорта пространств имен и внедрения зависимостей. Директивы, используемые несколькими представлениями, можно указать в общем файле _ViewImports.cshtml. Файл _ViewImports поддерживает следующие директивы:

@addTagHelper
@removeTagHelper
@tagHelperPrefix
@using
@model
@inherits
@inject
@namespace

Файл не поддерживает другие Razor функции, такие как функции и определения разделов.

Пример файла _ViewImports.cshtml:

@using WebApplication1
@using WebApplication1.Models
@using WebApplication1.Models.AccountViewModels
@using WebApplication1.Models.ManageViewModels
@using Microsoft. AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewImports.cshtml Файл для приложения ASP.NET Core MVC обычно помещается в папку Pages (или Views). Файл _ViewImports.cshtml можно поместить в любую папку, в этом случае она будет применяться только к страницам или представлениям в этой папке и ее вложенным папкам. Файлы _ViewImports обрабатываются начиная с корневого уровня, а затем для каждой папки вплоть до расположения самой страницы или представления. Параметры _ViewImports, заданные на корневом уровне, можно переопределить на уровне папки.

Например, предположим, что:

Файл корневого уровня _ViewImports.cshtml включает @model MyModel1 и @addTagHelper *, MyTagHelper1.
Файл вложенной папки _ViewImports.cshtml включает @model MyModel2 и @addTagHelper *, MyTagHelper2.

Страницы и представления во вложенной папке будут иметь доступ к вспомогательным функциям тегов и модели MyModel2.

Если в иерархии файлов найдено несколько _ViewImports.cshtml файлов, объединенное поведение директив будет следующим:

@addTagHelper, @removeTagHelper: выполняются все директивы по порядку;
@tagHelperPrefix: ближайшая к представлению директива переопределяет все остальные;
@model: ближайшая к представлению директива переопределяет все остальные;
@inherits: ближайшая к представлению директива переопределяет все остальные;
@using: включаются все директивы, повторяющиеся пропускаются;
@inject: для каждого свойства ближайшая к представлению директива переопределяет все остальные директивы с тем же именем свойства.

Выполнение кода перед каждым представлением

Код, который должен выполняться перед каждым представлением или страницей _ViewStart.cshtml , должен быть помещен в файл. По соглашению _ViewStart. cshtml файл находится в папке Pages (или Views). Операторы, перечисленные в файле _ViewStart.cshtml, выполняются перед каждым полным представлением (но не перед макетами и не перед частичными представлениями). Как и ViewImports.cshtml, _ViewStart.cshtml является иерархическим. _ViewStart.cshtml Если файл определен в папке представления или страницы, он будет выполняться после того, как он определен в корневой папке Pages (или Views) (если таковые есть).

Пример файла _ViewStart.cshtml:

@{
    Layout = "_Layout";
}

Приведенный файл предписывает всем представлениям использовать макет _Layout.cshtml.

_ViewStart.cshtml и _ViewImports.cshtmlобычно не помещаются в папку /Pages/Shared (или /Views/Shared). Версии этих файлов, которые должны действовать на уровне приложения, следует помещать непосредственно в папку /Pages (или /Views).

Тема Bootstrap «Просто я»

❮ Предыдущая Далее ❯

Создайте тему: «Просто я»

На этой странице показано, как создать тему Bootstrap с нуля.

Мы начнем с простой HTML-страницы, а затем будем добавлять все больше и больше компонентов, пока у нас не будет полностью функционального, персонального и отзывчивого веб-сайта.

Результат будет выглядеть следующим образом, и вы можете изменять, сохранять, делиться, использовать или делать с ним все, что захотите:

Демонстрация полной страницы Полный исходный код

Стартовая HTML-страница

Мы начнем со следующей HTML-страницы:

Тема Bootstrap Simply Me

Кто я?

Я искатель приключений

Добавить Bootstrap CDN и поместить элементы в контейнер

Добавить Bootstrap CDN и ссылку на jQuery и поместить внутрь элементы HTML а контейнер:

Пример

Тема Bootstrap Simply Me

bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css»>

Кто я?

Я искатель приключений

Результат:

Кто я?

Я искатель приключений

Попробуйте сами »

Добавить цвет фона и центральный текст

1. Добавьте в контейнер пользовательский класс (.bg-1), чтобы добавить цвет фона.

2. Добавьте класс .text-center для центрирования текста внутри контейнер:

Пример

<голова>
<стиль>
.bg-1 {
    цвет фона: #1abc9c; /* Зеленый */
    color: #ffffff;
  }

Кто я?

jpg» alt=»Bird»>

Я искатель приключений

Результат:

Кто я?

Я искатель приключений

Попробуйте сами »

Изображение в виде круга

Сверните изображение в круг с помощью .img-circle класс:

Пример

Bird

Результат:

Кто я?

Я искатель приключений

Попробуйте сами »

Больше содержимого

Добавьте больше содержимого и поместите его в новые контейнеры:

Пример

<голова>

Кто я?

jpg» alt=»Bird»>

Я искатель приключений

Кто я?

Lorem ipsum..

Где меня найти?

Lorem ipsum..

Результат:

Кто я?

Я искатель приключений

Кто я?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

Где меня найти?

Попробуйте сами »

Добавить отступы

Давайте сделаем контейнеры более привлекательными, добавив отступы:

Example

Результат:

Кто я?

Я искатель приключений

Кто я?

Где меня найти?

Попробуйте сами »

Добавить кнопку

Добавить кнопку в средний контейнер:

Пример

Что я?

Знания м ипсум..

Поиск

Результат:

Кто я?

Поиск

Попробуйте сами »

Добавить значок

Добавить значок поиска на кнопку «Поиск»:

Пример

Поиск

Результат:

Поиск

Попробуйте сами »

Изменить третий контейнер (добавить сетку)

Добавьте три столбца одинаковой ширины внутрь третьего контейнера ( . кол-см-4 ):

Пример

Где меня найти?

Lorem ipsum..

Lorem ipsum. .

Результат:

Где меня найти?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.

Попробуйте сами »

Сделайте изображения адаптивными

Добавьте класс .img-responsive ко всем изображениям.

Добавьте display:inline к первому изображению, чтобы принудительно центрировать его (класс с поддержкой .img добавляет display:block к изображению, что заставляет его прыгать влево от экрана).

Если вы хотите, чтобы изображение занимало всю ширину экрана когда он начнет складываться, добавьте width:100% к изображению.

При открытии примера не забудьте изменить размер экрана, чтобы увидеть адаптивный эффект:

`Пример`

Попробуйте сами »

`Добавить Navbar`

Добавить стандартную панель навигации в верхней части страницы и сделать ее складной на небольших экранах:

`Пример`

Результат:

Попробуйте сами »

`Стиль панели навигации`

Используйте CSS для настройки панели навигации:

`Пример 900 45`

. navbar { padding-top: 15px; padding-bottom: 15px; граница: 0; радиус границы: 0; нижняя граница: 0; размер шрифта: 12 пикселей; интервал между буквами: 5 пикселей; }

.navbar-nav li a:hover { цвет: #1abc9c !важно; }

Результат:

Попробуйте сами »

`Добавьте нижний колонтитул`

Добавьте нижний колонтитул и используйте CSS для его оформления:

`Пример`

 
   Тема Bootstrap, созданная www.w3schools.com

Результат:

Попробуйте сами »

`Последний штрих`

Персонализируйте свою тему, добавив понравившийся шрифт. Мы использовали «Montserrat» из библиотеки шрифтов Google.

Ссылка на шрифт в section:

Затем вы можете использовать его на странице:

`Пример`

тело { шрифт: 20px "Montserrat", без засечек; line-height: 1,8; цвет: #f5f6f7; }

p {font-size: 16px;}

Мы также создали вспомогательный класс полей для добавления дополнительного пространства где мы думаем, что это необходимо; обычно после каждого элемента

 и   .
 Пример 
 .margin {margin-bottom: 45px;}
 Попробуйте сами »
 Завершите тему «Просто я» 
 Полностраничная демонстрация
Полный исходный код
 ❮ Предыдущий
Далее ❯
 
 Bootstrap Layout — примеры и руководство. 
 Макет 
  Примечание:  Эта документация предназначена для более старой версии Bootstrap (v. 4).
Для Bootstrap 5 доступна более новая версия. Мы рекомендуем перейти на последнюю версию нашего продукта — Material Design для
Бутстрап 5. 
 Перейти к документации v.5
 Мы представляем здесь некоторые компоненты и варианты компоновки вашего проекта Bootstrap, включая контейнеры-обертки,
мощная система сетки, гибкий медиа-объект и отзывчивые служебные классы.
 Контейнеры  Контейнеры являются самым основным элементом макета в Bootstrap и  требуются при использовании нашей системы сетки по умолчанию  . Выберите из отзывчивого контейнера с фиксированной шириной (это означает, что его максимальная ширина изменяется в каждой точке останова) или
Fluid-width (это означает, что он всегда имеет ширину 100%).
 Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.
 Показать код
Изменить в песочнице
            
              <дел>


            
        
      Контейнерная жидкость 
 Используйте  . container-fluid  для полноразмерного контейнера, охватывающего всю ширину области просмотра.
 Показать код
Изменить в песочнице
            
          <дел>


          
        
      Bootstrap поставляется с тремя разными контейнерами:
  .container  , который устанавливает максимальную ширину   в каждой отзывчивой точке останова
  .container-fluid  , который равен  width: 100%  во всех контрольных точках
  .container-{точка останова}  , что составляет  ширина: 100%  до указанной точки останова
 В приведенной ниже таблице показано, как  max-width  каждого контейнера сравнивается с исходными  . container  и  .container-fluid  для каждой контрольной точки.
 Очень маленький 
 <576px  Маленький 
 ≥576px  Средний 
 ≥768px  Большой 
 ≥992px  Очень большой 
 ≥1200 пикселей
  .контейнер  100%  540px  720px  960px  1140px
  .контейнер-см  100%  540px  720px  960px  1140px
  . container-md  100%  100%  720px  960px  1140px
  .контейнер-lg  100%  100%  100%  960px  1140px
  .контейнер-xl  100%  100%  100%  100%  1140px
  .контейнерная жидкость  100%  100%  100%  100%  100%
 Реагирующие точки останова  Поскольку Bootstrap изначально разрабатывался для мобильных устройств, мы используем несколько медиа-запросов для создания разумных точек останова для наших макетов и интерфейсов. Эти контрольные точки в основном основаны на минимальной ширине области просмотра и позволяют нам масштабировать элементы по мере изменения области просмотра.
 Bootstrap в основном использует следующие диапазоны медиа-запросов — или точки останова — в наших исходных файлах Sass для нашего макета, системы сетки и компонентов.
 Показать код
Изменить в песочнице
            
            // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
            // Нет медиа-запроса, так как это значение по умолчанию в Bootstrap
            // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
            @media (минимальная ширина: 576 пикселей) { ... }
            // Средние устройства (планшеты, 768px и выше)
            @media (минимальная ширина: 768 пикселей) { ... }
            // Большие устройства (десктопы, 992px и выше)
            @media (минимальная ширина: 992 пикселя) { . .. }
            // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
            @media (минимальная ширина: 1200 пикселей) { ... }
          
        
     
 Поскольку мы пишем наш исходный CSS в Sass, все наши медиа-запросы доступны через миксины Sass:
 Показать код
Изменить в песочнице
            
              @include media-breakpoint-up(xs) { ... }
              @include media-breakpoint-up(sm) { ... }
              @include media-breakpoint-up(md) { ... }
              @include media-breakpoint-up(lg) { ... }
              @include media-breakpoint-up(xl) { ... }
              // Пример использования:
              @include media-breakpoint-up(sm) {
                  .некоторый класс {
                    дисплей: блок;
                  }
              }
          
        
     
 Мы иногда используем медиа-запросы, которые идут в другом направлении (данный размер экрана или меньше):
 Показать код
Изменить в песочнице
            
                // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
                @media (максимальная ширина: 575,98 пикселей) { . .. }
                // Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
                @media (максимальная ширина: 767,98px) {...}
                // Средние устройства (планшеты, менее 992 пикселей)
                @media (максимальная ширина: 991px.98) { ... }
                // Большие устройства (рабочие столы, менее 1200 пикселей)
                @media (максимальная ширина: 1199,98 пикселей) { ... }
                // Очень большие устройства (большие рабочие столы)
                // Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы ширины
              
        
     
 Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают контекстные запросы диапазона, мы обходим ограничения  min-  и  max-  префиксы и окна просмотра с дробной шириной (что может произойти при определенных условиях, например, на устройствах с высоким разрешением), используя значения с более высокой точностью для этих сравнений.
 Опять же, эти медиа-запросы также доступны через миксины Sass:
 Показать код
Изменить в песочнице
            
                @include media-breakpoint-down(xs) { ... }
                @include media-breakpoint-down(sm) { ... }
                @include media-breakpoint-down(md) { ... }
                @include media-breakpoint-down(lg) { ... }
              
        
     
 Существуют также медиа-запросы и примеси для таргетинга на один сегмент размеров экрана с использованием минимальной и максимальной ширины точки останова.
 Показать код
Изменить в песочнице
            
                // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
                @media (максимальная ширина: 575,98 пикселей) { . .. }
                // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
                @media (минимальная ширина: 576 пикселей) и (максимальная ширина: 767,98 пикселей) { ... }
                // Средние устройства (планшеты, 768px и выше)
                @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991,98 пикселей) { ... }
                // Большие устройства (десктопы, 992px и выше)
                @media (минимальная ширина: 992 пикселя) и (максимальная ширина: 1199,98 пикселя) { ... }
                // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
                @media (минимальная ширина: 1200 пикселей) { ... }
              
        
     
 Эти медиа-запросы также доступны через миксины Sass:
 Показать код
Изменить в песочнице
            
                @include media-breakpoint-only (xs) { . .. }
                @include media-breakpoint-only (sm) { ... }
                @include media-breakpoint-only (md) { ... }
                @include media-breakpoint-only (lg) { ... }
                @include media-breakpoint-only (xl) { ... }
              
        
     
 Точно так же медиазапросы могут охватывать несколько точек останова по ширине:
 Показать код
Изменить в песочнице
            
                // Пример
                // Применяем стили, начиная со средних устройств и заканчивая очень большими устройствами
                @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 1199,98 пикселей) { ... }
              
        
     
 Миксин Sass для таргетинга на тот же диапазон размеров экрана будет выглядеть так:
 Показать код
Изменить в песочнице
            
                @include media-breakpoint-between(md, xl) { . .. }
              
        
     
 Z-индекс  Некоторые компоненты Bootstrap используют  z-index  , свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочения содержимого. Мы используем шкалу z-индекса по умолчанию в Bootstrap, которая была разработана для правильной навигации по слоям,
всплывающие подсказки и всплывающие окна, модальные окна и многое другое.
 Эти более высокие значения начинаются с произвольного числа, высокого и достаточно определенного, чтобы в идеале избежать конфликтов. Нам нужен их стандартный набор для наших многоуровневых компонентов — всплывающие подсказки, всплывающие окна, панели навигации, раскрывающиеся списки, модальные окна — чтобы мы могли быть достаточно последовательными в поведении. Нет никаких причин, по которым мы не могли бы использовать  100  + или  500  +.
 Мы не поощряем настройку этих значений; если вы измените один, вам, вероятно, придется изменить их все.