Шаблон ❖ 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, мы многое изменили для большей совместимости.
1
1
1
1
1
1
1
1
1
1
1
1
Основная сетка макета представлена как часть Bootstrap’а в 940px-ширины в 12-колонок.
Так же представленны 4 динамических варианта для различных девайсов и разрешений экрана: телефон, наладонник портретная, наладонник горизонтальная, он же маленький монитор, и большой широкоэкранный монитор.
<div> <div>...</div> <div>...</div> </div>
Из примера видно, что основная сетка макета может быть создана с помощью двух «columns», в итоге число «spanning» или span(x)’ов равняется 12 основным колонкам, которые определенны как часть основной сетки.
Отключение колонок
с помощью offset(x) класса4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div> <div>...</div> <div>...</div> </div>
Вложенные колонки
Со статическими колонками (не плавающими) в Bootstrap легко можно создать вложенные колонки. Для вложения одной группы колон в другую колонку просто добавьте новую .row
(строку) и включите в неё .span(x)
колонки.
Пример
Вложенные колонки не могут превышать размер родительской колонны т.е. в .span5
можно вложить пять .span1
или два .span2
и один .span1
.
Смотрите пример ниже.
Уровень 1 (.span6)
Уровень 2 (.span3)
Уровень 2 (.span3)
<div> <div> Уровень 1 <div> <div>Уровень 2</div> <div>Уровень 2</div> </div> </div> </div>
Плавающие колонки
1
1
1
1
1
1
1
1
1
1
1
1
Проценты, не пиксели
Плавающая колонка использует проценты в качестве ширины, в отличии от фиксированного количества пикселей. Плавающие колонки имеют ту же динамичность, что и фиксированные колонки, обеспечивая одинаковую пропорцию на различных устройствах и дисплеях.
Плавающие строки
(.row)Сделать плавающую строку можно просто изменив .row
на .row-fluid
. Колонки останутся прежними. Это позволяет с невероятной легкостью переключаться между фиксированным и плавающим шаблоном дизайна.
Пример разметки
<div> <div>...</div> <div>...</div> </div>
Вложение в плавающую сетку
Вложение в плавающую сетку немного отличается: номер и сумма span(x)’ов может не совпадать с размером родительской колонки, так как вложенные колонны на каждом уровне вложения занимают 100% родительской колонки.
Fluid 12
Fluid 6
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-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
- Статья
Авторы: Стив Смит (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>© 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)
Если обязательный раздел не найден, создается исключение. Отдельные представления указывают содержимое для отрисовки в разделе с помощью синтаксиса @section
Razor . Если на странице или в представлении определяется раздел, он должен быть преобразован для просмотра (в противном случае произойдет ошибка).
Пример @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 CDN и поместить элементы в контейнер
Добавить Bootstrap CDN и ссылку на jQuery и поместить внутрь элементы HTML а контейнер:
Пример
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
класс:
Пример
Результат:
Кто я?
Я искатель приключений
Попробуйте сами »
Больше содержимого
Добавьте больше содержимого и поместите его в новые контейнеры:
Пример
<голова>
Кто я?
jpg» alt=»Bird»>
Я искатель приключений
Кто я?
Lorem ipsum..
Где меня найти?
Lorem ipsum..
div>
Результат:
Кто я?
Я искатель приключений
Кто я?
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.
Где меня найти?
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
Результат:
Кто я?
Я искатель приключений
Кто я?
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.
Где меня найти?
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.
Попробуйте сами »
Добавить кнопку
Добавить кнопку в средний контейнер:
Пример
Результат:
Кто я?
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.
Поиск
Попробуйте сами »
Добавить значок
Добавить значок поиска на кнопку «Поиск»:
Пример
Результат:
Поиск
Попробуйте сами »
Изменить третий контейнер (добавить сетку)
Добавьте три столбца одинаковой ширины внутрь третьего контейнера ( . кол-см-4
):
Пример
Где меня найти?
Lorem ipsum..
Lorem ipsum..
Lorem ipsum. .
Результат:
Где меня найти?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
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%
к изображению.
При открытии примера не забудьте изменить размер экрана, чтобы увидеть адаптивный эффект:
Пример
Попробуйте сами »
Добавить стандартную панель навигации в верхней части страницы и сделать ее складной на небольших экранах:
Пример
Результат:
Попробуйте сами »
Стиль панели навигации
Используйте CSS для настройки панели навигации:
Пример 900 45
. navbar {
padding-top: 15px;
padding-bottom: 15px;
граница: 0;
радиус границы: 0;
нижняя граница: 0;
размер шрифта: 12 пикселей;
интервал между буквами: 5 пикселей;
}
.navbar-nav li a:hover {
цвет: #1abc9c !важно;
}
Результат:
Попробуйте сами »
Добавьте нижний колонтитул
Добавьте нижний колонтитул и используйте CSS для его оформления:
Пример
Результат:
Попробуйте сами »
Последний штрих
Персонализируйте свою тему, добавив понравившийся шрифт. Мы использовали «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
для полноразмерного контейнера, охватывающего всю ширину области просмотра.
Показать код Изменить в песочнице
<дел>