Разметка bootstrap: Система сеток. Разметка · Bootstrap. Версия v4.0.0

Содержание

Как работает в Bootstrap сетка и что это вообще такое?

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

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

Конечно, приятно, что Bootstrap есть все компоненты и можно использовать все готовое, но в первую очередь нас интересует именно сетка. Итак, давайте подробно рассмотрим сетку бутстрапа.

12-ти колоночная сетка Bootstrap

Итак, в сетке этого фреймворка по умолчанию 12 колонок. На самом деле при кастомизации фреймворка вы сможете выставить любое другое значение, но практически всегда вас будет устраивать 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

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

Вся сетка должна располагаться в общем контейнере. Это должен быть блок с классом container или container-fluid. Отличие у классов в том, что первый имеет максимальные фиксированные размеры, а именно 1170 пикселей. То есть ширина сайта не будет больше этого значения.

Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер. Если мы говорим о таблицах, то там тоже есть свой глобальный контейнер – table.

Внутри этого контейнера должен быть еще один блок с классом row, то есть одна строка сетки. И опять же, если сравниваем с таблицами, то там за вывод одного табличного ряда отвечает тег tr. Ряды сетки и таблицы очень похожи, потому что в обоих случаях они просто выступают контейнерами для основного содержимого – в них самих никакой контент не размещается, да и стили к ним не применяются.

Например, если мы говорим о простом сайте, то можно разделить его на три ряда – шапка сайта, блок для основного контента и боковая колонка и подвал. Заметьте, что контент и сайдбар мы поместили в один ряд, потому что это действительно так.

В самом ряду располагаются уже непосредственно ячейки ил колонки, как принято говорить при верстке на Bootstrap. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – кол-во колонок от 1 до 12. Как это работает, мы с вами сейчас посмотрим. Если вам удастся это понять, то вы также быстро поймете, почему так легко делать адаптивные сайты на Bootstrap.

Итак, разработчики фремворка при создании сетки выделили 4 основных типа устройств по ширине экрана. Хорошую таблицу с перечнем классов для сетки вы можете найти в русской документации, которая находится здесь — //www.oneskyapp.com/ru/docs/bootstrap/css#grid.

Вот скриншот этой таблицы. Итак, мы видим, что для самых маленьких устройств, у которых ширина экрана менее 768 пикселей, префикс класса – col-xs- или если отбросить col, просто xs. Далее идет sm (small-devices, ширина от 768 до 991 пикселей), md (medium-devices, ширина от 992 до 1199 пикселей) и large-devices, с шириной более 1200 пикселей.

Как же все это работает? Разбор на примерах

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

Итак, давайте рассмотрим этот кусок кода:

<div class = «container»>
<div class = «row»>
<div class = «col-md-3 col-sm-6»>Первый</div>
<div class = «col-md-1 col-sm-6»>Первый</div>
</div>
</div>

<div class = «container»>

<div class = «row»>

<div class = «col-md-3 col-sm-6»>Первый</div>

<div class = «col-md-1 col-sm-6»>Первый</div>

</div>

</div>

Если вы внимательно читали предыдущий текст, то уже понимаете, что мы сейчас создаем свои первые блоки в сетке.=col]{

background: #8CC7D9;

border: 1px solid #6B6ACD;

}

Отлично, вот что мы видим в браузере:

Отмечу, что я просматриваю результат на своем компьютере, у которого ширина экрана более 1200 пикселей, а значит Bootstrap классифицирует его как large-устройство.

Итак, первый блок занимает 25% ширины контейнера (если 12 колонок считается за 100% ширины, то 3, соответственно, за 25%). Ну а второй примерно 8-8,5%, точные расчеты нам ни к чему. Остальные 66% ширины контейнера будут пусты. Конечно, на скриншоте вы этого не видите, так как я просто не могу запихнуть в статью скриншот всего моего экрана, так как он слишком велик, поэтому я и советовал вам повторять все за мной.

А теперь давайте проверим, как поведут себя блоки на ширине менее 992 пикселя. Начните сужать окно. В Google Chrome после нажатия F12 при сужении вы будете видеть в правом верхнем углу точную ширину окна.

Ну а я, пожалуй, воспользуюсь браузером Internet Explorer. Вот так блоки выглядят на ширине чуть-чуть больше 768 пикселей, то есть на small-экранах.

Как видите, вместо 25% и 8% каждый блок занимает теперь ровно по 50% ширины ряда. А все благодаря этим инструкциям:

col-md-3 col-sm-6
col-md-1 col-sm-6

col-md-3 col-sm-6

col-md-1 col-sm-6

То есть с помощью этих классов мы как бы говорим бутстрапу: на средних и больших устройствах дай первому блоку ширину в 3 колонки из 12, а второму – 1 из 12. А вот на маленьких, будь добр, оба блока показать на 50% ширины ряда.

А что же произойдет на самых маленьких экранах? Вот я совсем сузил окно, как будто мы смотрим сайт с телефона:

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Как видите, инструкция, которая действовала для small-устройств, отменилась для extra-small и каждый блок стал занимать по 100% ширины в ряде. Запомните, что это поведение блоков по умолчанию – занимать 100% ширины в своем контейнере.

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

Если мы задаем, например, col-sm-6, то такая ширина сохраниться у блока и на md и lg, если для этих устройств ничего не прописано.

Возьмем этот же пример (col-sm-6). А вот на xs, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs устройствах будет другая ширина.

Вы можете указывать блоку не один, а несколько классов. Например, col-xs-6 col-md-4. Попробуйте сами в уме ответить, какой будет ширина блока на разных устройствах? Не читайте дальше)

А ответ таков:

На xs-экранах будет 50%, то есть половина ширины контейнера

На sm то же самое – 50%. Почему? Как я уже сказал выше, значение наследуется для устройств с большей шириной.

На md блок займет треть ширины.

На самых больших экранах тоже треть. Опять же, значение наследуется из md.

Но Bootstrap ничем вас не ограничивает и вы можете прописать даже так:

<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div>

<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div>

То есть вообще для каждого типа устройств задать свое отображение. Тут вы уже сами можете понять, насколько широким будет блок на разной ширине экранов.

ВНИМАНИЕ! Никогда не допускайте ситуации, чтобы у вас в одном ряду было более 12-ти колонок, иначе ваш сайт может развалиться.

Дальше – интереснее! Вложенные сетки

Но мощь сетки Bootstrap не только в том, что вы можете задать разное отображение блоков на разной ширине. А еще в том, что можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:

<div class = «container»>
<div class = «row»>
<div class = «col-sm-8 col-md-6»>
<div class = «row»>
<div class = «col-sm-4 col-md-3»>1</div>
<div class = «col-sm-4 col-md-3»>2</div>
<div class = «col-sm-4 col-md-3»>3</div>
</div>
</div>
</div>
</div>

<div class = «container»>

<div class = «row»>

<div class = «col-sm-8 col-md-6»>

<div class = «row»>

<div class = «col-sm-4 col-md-3»>1</div>

<div class = «col-sm-4 col-md-3»>2</div>

<div class = «col-sm-4 col-md-3»>3</div>

</div>

</div>

</div>

</div>

Итак, у нас есть общий контейнер, а в нем один ряд. В ряд вложен блок, который занимает половину ширины контейнера на средних и больших экранах, две трети на маленьких и 100% на самых маленьких.

Но ведь мы можем спокойно представить себе, что этот блок является тоже контейнером, почему нет? По сути, так и есть при разработке сайта. Есть общий контейнер для всего сайта, контейнер для контента, сайдбара, шапки и т.д.

Можно представить, что этот блок – контейнер для основного блока с текстом на сайте, в него мы помещаем, в свою очередь, ряд (обязательно придерживайтесь в коде структуры – контейнер – ряд — ячейки).

В этом ряду, как видите, 3 блока и для каждого задано поведение на разных устройствах. По сути, мы получили сетку внутри основной сетки! И эта вложенная сетка тоже будет иметь 12 колонок.

Я вам скажу даже больше. Вложенных сеток может быть неограниченное количество. Например, эти три блока – это три карточки товара в интернет-магазине. Структура самой карточки может быть тоже достаточно сложной. Кто знает, может и там вы используете вложенную сетку.

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

Адаптивные утилиты

Еще одна потрясающая возможность фреймворка – адаптивные утилиты. Сейчас объясню. Наверняка вы не планируете на мобильных устройствах отображать 100% элементов сайта, которые видны на больших десктопах – вам попросту некуда будеть все это впихнуть. Очень часто на мобильных устройствах полностью убирают боковую колонку, сворачивают меню, удаляют какие-то большие декоративные элементы и т.д.

В Bootstrap все это очень легко делать с помощью классов, которые называют адаптивными утилитами. В документации ознакомиться с ними можно тут: //www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities

Вот список этих классов. Чтобы скрыть элемент на нужном устройстве, достаточно всего лишь использовать один из четырех классов: hidden-xs|sm|md|lg. Хочу отметить, что элемент будет скрыт только на указанной ширине экрана, на всех остальных он останется видимым.

Если вам нужно сделать элемент видимым только на одном из четырех типов устройств, удобнее использовать классы visible-xs|sm|md|lg- block|inline|inline-block.

Кроме самого ключевого слова и типа устройств тут еще нужно указать, как именно отображать элемент: как блочный, строчный или блочно-строчный. Примеры:

visible-xs-inline – элемент будет виден только на самых маленьких экранах и будет отображаться как строка;

visible-lg-block – будет виден только на самых больших экранах и будет блочным;

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

Другие возможности сетки и итог

Друзья, очень много еще можно написать о сетке бутстрапа, потому что мы рассмотрели примерно только половину теории. С остальными классами и примерами вы можете ознакомиться в документации.

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

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

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

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

Переход от Bootstrap к Susy

Одним из самых распространенных вопросов, касающихся перехода от Bootstrap к Susy, является следующий: “Как построить сетку Bootstrap с помощью Susy?”

Я считаю, что просто ответив на этот вопрос, я поведу вас по пути, с которым не согласен. Именно по этому я так долго медлил с ответом.

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

Почему вы не должны строить сетку Bootstrap с Susy?

Многие люди интересуются переходом к Susy по причине раздутого HTML, производимого Bootstrap. Им нужен незасоренный HTML. А также гибкость, которая есть в Susy.

Вдумайтесь в сам вопрос. А затем продолжайте читать, если вы заинтересовались Susy по той же причине.

Чтобы найти ответ. нам надо разделять два вида сеточных сеток. Я называю их сетки HTML и сетки CSS.

Bootstrap это эталонный пример сеточной системы, основанной на HTML. Такие системы требуют использования предопределенных классов, которые надо встраивать в разметку. Еще одним популярным примером сетки такого типа является Foundation.

Вот образец разметки Bootstrap:

<div>
  <div>Gallery Item</div>
  <div>Gallery Item</div>
</div><br>

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

<div>
  <div>Gallery Item</div>
  <div>Gallery Item</div>
</div>

Отметьте, что нам здесь не нужны классы типа .col-. В этом сила сеточных систем CSS.

Susy относится к сеточным системам CSS. Но это не значит, что ее возможностей и гибкости не хватит для создания сетки HTML.

Именно поэтому ошибка таится в самом вопросе — ведь вы пытаетесь написать сеточную систему HTML с помощью Susy, которая вас привлекает именно за счет отсутствия раздутой разметки, традиционной для сеток HTML.

Я рекомендую использовать Susy по ее прямому назначению — в качестве системы сеток CSS, потому как именно за счет этого она намного мощнее, чем сетки HTML.

Почему сеточные системы, основанные на стилях, лучше сеточных систем, основанных на разметке

Свой выбор я основываю на двух критериях: поддерживаемости и скорости.

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

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

Рассмотрим это подробнее.

Критерий №1: скорость

Если исходить из того, что вы ничего не знаете ни о HTML, ни о CSS, то в таком случае реализовать на сайте сетку HTML вам будет проще.

Потому что все свойства сетки уже созданы и вам надо лишь именовать классы в соответствии с документаций, чтобы получить сетку.

Но это применимо только к самым простым сайтам. Отзывчивые сайты это уже совершенно иное. Их настройка займет намного больше времени, ведь вам придется возиться с большим количеством сеточных классов.

Представим, вам надо сверстать следующий макет по сетке:

Если вы будете использовать сетку Bootstrap, ваша разметка будет выглядеть так:

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

С сеточной системой CSS разметка будет проще:

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

Я хочу обратить ваше внимание на две вещи.

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

Когда вы пишете HTML для CSS-сеток, вы думаете только о содержании страницы — вам не надо думать о ее представлении (задании классов и т.п.).

Это, на мой взгляд, одно из основных преимуществ сеток на основе CSS. Вы не разбрасываетесь, а сразу фокусируетесь на чем-то одном.

Второе, по началу CSS-сетки покажутся более сложными, особенно, если раньше вы никогда не писали код для раскладки вручную. Начинающим это может показаться сложнее, чем работа с сетками HTML.

Для начинающих это нормально — в первый раз редко что получается хорошо.

Однако, после того как вы освоите основы, работа с сетками на основе CSS будет проще. Я это все прошел на собственном опыте.

Суть в том, что сначала вам надо разобраться с основами создания раскладки, выучить вещи типа флоатов, клирфиксов, медиа-запросов для мобильных устройств…

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

Теперь перейдем к поддерживаемости.

Критерий №2: поддерживаемость

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

Итак, вы решили изменить раскладку по ходу разработки, переместив влево боковую панель, а контент вправо?

В сетке, основанной на HTML, вам надо менять разметку.

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

С этой разметкой у нас есть одна большая проблема. Вы увидите сначала содержимое боковой колонки, а только затем основное содержимое, если зайдете на такой сайт с мобильного. И это совсем не то, что вам нужно.

С сетками на основе CSS в такой ситуации вам не надо ничего делать с разметкой.

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

Все, что нужно это поменять CSS (в данном случае SCSS).

.content {
  @media screen (min-width: 900px) {
    width: /* width of 8 columns here */ 
    float: right;
  }
}

.sidebar {
  @media screen (min-width: 900px) {
    width: /* width of 4 columns here */ 
    float: left; 
  }
}

Примечание: в этом примере я не использовал Susy, чтобы не усложнять понимание. Это примерный код, который Susy создаст для вас, если вам понадобиться подобная раскладка.

Отлично! Мы выяснили, что сетки на основе CSS поддерживать намного проще. Но есть одно но — у вас должно быть твердое понимание способов создания CSS-раскладки, чтобы писать и поддерживать сетки на основе CSS. И если вы хотите, чтобы эти сетки поддерживали другие люди, вам нужно будет обучить их этому.

Заключение

Итак, если вы хотите перейти к Susy потому, что вас утомляют сеточные системы на основе HTML, вам надо изучить основы создания раскладки средствами CSS и не вспоминать про классы Bootstrap при работе с Susy.

Поначалу это будет сложным. Но это единственный (и лучший) способ полностью перейти с Bootstrap на Susy. И если вы заинтересовались этим, я настоятельно рекомендую свою книгу о Susy.

Примечание: в этой статье изложено личное мнение автора статьи. Разработчики Susy проще смотрят на вещи.

Если вы по-прежнему хотите строить сетки в стиле Bootstrap после прочтения этой статьи, значит, у вас для этого есть достаточные причины. В таком случае можете посмотреть мое демо на Codepen, которое можно использовать в качестве основы для создания собственных классов.

Дополнительные материалы

Шаблон | Bootstrap по-русски

Требуется HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства, которые требуют HTML5 doctype. Включите его во все свои проекты.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   ...
  4. </html>

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

Основные компоненты Bootstrap включают в себя элементы отображения, оформления и стили ссылок. В частности, мы:

  • Удалили отступ margin элемента body
  • Установили белый цвет фона background-color: white; для body
  • Используем атрибуты @baseFontFamily, @baseFontSize и @baseLineHeight как основные
  • Настроили основной цвет ссылки с помощью @linkColor и применяем подчеркивание только для селектора :hover

Эти стили вы можете найти в scaffolding.less.

Сброс настроек посредством Normalize

В Bootstrap 2 мы применили старый сброс браузерных дефолтов с помощью Normalize.css, проект от Николаса Галлагера который также включает в себя HTML5 Boilerplate. Так как мы часто используем Normalize в нашем reset.less, мы удалили некоторые элементы специально для Bootstrap.

Демонстрация

Основная сетка макета состоит из 12 колонок, обеспечивая ширину контейнеров в 940px без активных динамических особенностей. При добавлении динамического файла CSS сетка может растягиваться в ширину от 724px до 1170px, в зависимости от вашего монитора. На дисплеях, ширина которых менее 767px, колонки становятся плавающими и выстраиваются вертикально.

Основная сетка HTML

Для простого макета в две колонки создайте класс .row и добавьте соответствующее число колонок .span*. Так как это сетка в 12 колонок, каждый диапазон из двух .span* насчитывает 12 колонок и всякий раз будет добавлять 12 колонок в каждую строку (или то количество колонок, которое задано в родительском элементе).

  1. <div>
  2.   <div>...</div>
  3.   <div>...</div>
  4. </div>

В данном примере у нас имеются .span4 и .span8, созданные и 12 колонок и одной сплошной строки.

Перемещение колонок

Подвиньте колонки вправо, используя классы .offset*. Каждый класс увеличивает левый отступ колонки на размер ее самой. Например, .offset4 перемещает .span4 на четыре колонки.

  1. <div>
  2.   <div>...</div>
  3.   <div>...</div>
  4. </div>

Верстка колонок

Чтобы сверстать контент, используя сетку по умолчанию, добавьте новый класс .row и установите расстояние .span* для колонок внутри существующей .span* колонки. Сверстанные строки должны состоять из набора колонок, который добавлен к количеству родительских колонок.

Колонка уровня 1

Уровень 2

Уровень 2

  1. <div>
  2.   <div>
  3.     Level 1 column
  4.     <div>
  5.       <div>Level 2</div>
  6.       <div>Level 2</div>
  7.     </div>
  8.   </div>
  9. </div>

Демонстрация

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

Основная плавающая сетка HTML

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

  1. <div>
  2.   <div>...</div>
  3.   <div>...</div>
  4. </div>

Плавающее перемещение

Устанавливается таким же образом, как и в фиксированной сетке: добавьте класс .offset* в любую колонку, чтобы при этом переместить несколько колонок.

  1. <div>
  2.   <div>...</div>
  3.   <div>...</div>
  4. </div>

Плавающая верстка

Верстка плавающей сетки немного отличается: количество верстаемых колонок не должно соответствовать количеству родительских колонок. Вместо этого каждый уровень сверстанных колонок «сбрасывается», потому что каждая строка принимает 100% свойств родительской колонки.

  1. <div>
  2.   <div>
  3.     Level 1 of column
  4.     <div>
  5.       <div>Level 2</div>
  6.       <div>Level 2</div>
  7.     </div>
  8.   </div>
  9. </div>

Фиксированная разметка

Основной фиксированный по ширине макет (опционально динамический) с единственным требованием — <div>.

  1. <body>
  2.   <div>
  3.     ...
  4.   </div>
  5. </body>

Плавающая разметка

Создайте плавающую страницу с двумя колонками с помощью <div>. Идеально подходит для приложений и документации.

  1. <div>
  2.   <div>
  3.     <div>
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div>
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>

Включение адаптивных возможностей

Включите в вашем проекте адаптивный CSS, добавляя соответствующие мета теги и дополнительные таблицы стилей в <head> вашего документа. Если у вас компилированный Bootstrap, загруженный с нашей страницы, то вам всего лишь нужно добавить мета тег.

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

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

Об адаптивных особенностях Bootstrap

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

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

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

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

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

КатегорияШирина макетаШирина колонокОтступ между колонками
Большой дисплей1200px и более70px30px
По умолчанию980px и более60px20px
Портретные планшеты768px и более42px20px
Планшеты767px и менееПлавающие колонки, без фиксированной ширины
Смартфоны480px и менееПлавающие колонки, без фиксированной ширины
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Дополнительные адаптивные классы

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

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

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

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

Тестирование адаптивных классов

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

Виден на…

Зеленые отметки обозначают, что класс виден на данном дисплее.

  • Телефон? Телефон
  • Планшет? Планшет
  • Десктоп? Десктоп
Скрыт на…

В этом случае зеленые отметки обозначают, что класс не отображается на данном дисплее.

  • Телефон? Телефон
  • Планшет? Планшет
  • Десктоп? Десктоп

Основы адаптивного веб-дизайна с помощью Twitter Bootstrap.

Введение:

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

Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки — «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок.

Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана.

Сетка включает в себя такие классы:

  • xs (для телефонов) – менее 768px
  • sm (для планшетов) – от 768px
  • md (для ПК и ноутбуков) – от 992px
  • lg (для ПК с мониторами большой диагонали) – от 1200px

Наглядный пример разметки страницы на строки и столбцы для отображения на ПК:

В коде это может выглядеть так:

    <div>

        <div>.col-sm-4 div>

        <div>.col-sm-4 div>

        <div>.col-sm-4 div>

    div>

Или так:

<div>

        <div>.col-sm-4 div>

        <div>.col-sm-8 div>

    div>

К столбцам можно применять несколько классов, что укажет, как именно они перестроятся при просмотре на устройствах с разными размерами экранов.

К примеру:

    <div>

        <div>

            Responsive block 1

        div>

        <div>

            Responsive block 2

        div>

    div>

Рассмотрим первый пример.

Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения:

Вашего файла соответствующие-и;следующий код:

Вашего файла соответствующие-и;следующий код:

  • скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в
  • воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в

  

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css»>

   

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css»>

   

    <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js»>script>

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

В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers.

Давайте рассмотрим, как это работает на примере.

Пример:

Создадим

с классом “container” в

и добавим в него две строки (

с классом “row”). В первую строку добавим два столбца, а во вторую три столбца.  Главное помнить, что суммарное количество столбцов должно быть равным двенадцати.

Код выглядит так:

DOCTYPE html>

<html>

<head>

       <meta charset=»utf-8″>

      

       <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css»>

       <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css»>

       <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js»>script>

head>

<body>

       <div>

              <div>

                     <div >

                      Первая строка, первый столбец.

                     div>

                     <div >

                      Первая строка, второй столбец.

                     div>

              div>

              <div>

                     <div >

                      Вторая строка, первый столбец.

                     div>

                     <div >

                      Вторая строка, второй столбец.

                     div>

                     <div >

                      Вторая строка, третий столбец.

                     div>

              div>

       div>

body>

html>

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

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

Сперва столбцы перестроятся так:

А затем так:

Теперь давайте изменим класс нашего

на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу.

Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы.

Результат после изменений выглядят так:

Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой.

Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя.

Второй пример:

Создадим html страницу со стандартной структурой. Между тегами

вставляем

с классом “container” для того, чтобы максимальная ширина формы была фиксированной.

DOCTYPE html>

<html>

<head>

    <meta charset=»utf-8″>

   

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css»>

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css»>

    <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js»>script>

    <title>Our registration formtitle>

head>

<body>

    <div>

    div>

body>

html>

Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер

с классом “row” и в него одинс классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”.

Здесь “col-xs-12 col-sm-6 col-md-4” —  уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана.

Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки  при размере экрана от 992px.

    <div>

        <div>

            <div>

            div>

        div>

    div>

Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к

. К этому жеприменим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельныйс классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня

с примененным к ним классом “panel-title”.

<div>

    <div>

        <div>

            <div>

                <div>

                    <div>

                        <h4>Registration formh4>

                    div>

                div>

            div>

        div>

    div>

На данном этапе наша форма в браузере будет выглядеть так:

После

…

добавим тегс классом “panel-body” и непосредственно в этотмы будем добавлять поля для заполнения пользователем.

В нашей форме будут такие поля:

  • Имя
  • Фамилия
  • Email
  • Пароль
  • Поле для повторного введения пароля, как его подтверждение

В качестве поля ввода мы будем использовать тег   с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type).

Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок.

Реализуем кнопку с помощью тега    с атрибутом “submit” и  классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons.

Нам нужно добавить три

с классом “row” внутрьс классом “panel-body”.  В первой и третьей строке будет по два столбца, а во второй строке — один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке.

Код выглядит так:

<div>

        <div>

            <div>

                <input type=»text» placeholder=»First name»>

            div>

            <div>

                <input type=»text» placeholder=»Last name»>

            div>

        div>

        <div>

            <input type=»email» placeholder=»Email»>

        div>

        <div>

            <div>

                <input type=»password» placeholder=»Password»>

            div>

            <div>

                <input type=»password» placeholder=»Confirm password»>

            div>

        div>

        <input type=»submit» value=»Register»>

    div>

На данном этапе форма выглядит так:

Изменив размеры окна, мы увидим адаптивность в действии:

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

с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS —  “margin”.

<div>

        <div>

            <div>

                <div>

                    <input type=»text» placeholder=»First name»>

                div>

            div>

            <div>

                <div>

                    <input type=»text» placeholder=»Last name»>

                div>

            div>

        div>

        <div>

            <div>

                <input type=»email» placeholder=»Email»>

            div>

        div>

        <div>

            <div>

                <div>

                    <input type=»password» placeholder=»Password»>

                div>

            div>

            <div>

                <div>

                    <input type=»password» placeholder=»Confirm password»>

                div>

            div>

        div>

        <input type=»submit» value=»Register»>

div>

Запустив пример в браузере, Вы увидите привлекательную форму регистрации пользователя.

Уменьшив размер, получим:

Надеемся, что статья была для Вас полезной и послужит толчком для создания потрясающих веб страниц с помощью Bootstrap(http://getbootstrap.com/)!

Видео курсы по схожей тематике:

Бесплатные вебинары по схожей тематике

Медиа запросы CSS (media queries). Разметка Bootstrap

Для корректной работы медиа запросов требуется прописать мета тег viewport  в теге head вашей страницы

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

Медиа запросы по ширине и высоте экрана

Медиа запросы — это правила CSS, которые применяются к HTML разметке страницы в зависимости от разрешения экрана устройства, на котором она открыта.

/*пример сетки Bootstrap*/
@media screen and (max-width: 575px) {
	/*xs - для ширины экрана не более 575px включительно*/
}
@media screen and (min-width: 576px) and (max-width: 767px){
	/*sm - для ширины экрана от 576px до 767px включительно*/
}
@media screen and (min-width: 768px) and (max-width: 991px){
	/*md - для ширины экрана от 768px до 991px включительно*/
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	/*lg - для ширины экрана от 992px до 1199px включительно*/
}
@media screen and (min-width: 1200px) {
	/*xl - для ширины экрана более 1200px включительно*/
}

Аналогично медиа запросам создаваемым по ширине экрана можно делать по высоте. Например:

@media (min-height: 720px) { 
  /* Стили CSS */ 
}
/*для высоты экрана от 720px включительно*/

К содержанию ↑

Медиа запрос по ориентации экрана

orientation — функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.

/* landscape - альбомная ориентация (ширина > высоты) */
@media (orientation: landscape) { 
  /* Стили CSS */
}
/* portrait - книжная ориентация (высота > ширины) */
@media (orientation: portrait) { 
  /* Стили CSS */
}

Медиа запрос на подключение файла CSS

Подключить файл CSS в зависимости от разрешения экрана устройства можно следующим образом:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="styles-mobile.css">

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

Стилизация с помощью JavaScript в зависимости от размера экрана

if (window.matchMedia('screen and (max-width: 575px)').matches) {
  // CSS стили если соответствует медиа запросу по ширине до 575px
} 
else if(window.matchMedia('screen and (min-width: 576px) and (max-width: 767px)').matches) {
  // CSS стили если соответствует медиа запросу по ширине от 576px до 767px
}
else {
  // CSS стили если не соответствует медиа запросам выше
}

Чем отличается сетка Bootstrap версии 3 и 4

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

Очень сложно сделать универсальное решение, подходящее всем и, судя по популярности, создателям Bootstrap эта задача удалась.

Наверно, каждый веб разработчик проходит в своём развитии несколько стадий:

  • скачивает Bootstrap целиком, с кнопками, формами и прочим, не всегда применяемым арсеналом;

  • понимая, со временем, что неиспользуемых стилей и скриптов слишком много, открывает для себя раздел Customize на сайте getbootstrap.com, настраивает сборку из необходимых компонентов;

  • осваивает Node.js, скачивает исходники Bootstrap с github и делает сборку на своём компьютере локально под каждые конкретные задачи;

  • понимает, что лишних классов всё равно много, а исходные mixin-ы править лень, пишет свои классы, столько, сколько используется в проекте и размер на разных экранах устанавливает, исходя из макета.

Основные элементы разметки Bootstrap

Сетка Bootstrap — это «скелет» страницы, определяющий положение блоков на ней.

Расположение блоков на странице

Допустим, нужно разместить блоки на типовом лендинге, где некоторые секции страницы имеют ширину во весь экран, а некоторые — ограничены каким то значением и расположены посередине.

Основной «строительный материал», из которого складывается веб страница — HTML-тег <div>, типичное «поведение» которого (если не указан класс), занимать всю ширину и располагаться с новой строки.

Если внутри необходимо разместить содержимое, ограниченное по ширине, добавляем div с классом container (здесь и далее — классы Bootstrap). Внутри контейнера происходит дальнейшее деление на мелкие блоки — добавляется div (строка) и в нём — колонки, которые в Bootstrap именуются, начиная с col-. Число колонок, «умещающихся» в ширину строки — 12 (это сетка по умолчанию, принятая в Bootstrap, при необходимости, можно задать своё деление).

Почему 12 колонок? Да потому что это число делится на 2, 3, 4 и 6, что позволяет реализовать самые типовые макеты. Соответственно, на рисунке-примере HTML-разметка будет выглядеть так:

<div>
 <div>
  <div>
    <!-- Две колонки в половину ширины -->
    <div>Текст первой колонки</div>
    <div>Текст второй колонки</div>
  </div>
 </div>
</div>

для верхнего блока, и, для нижнего — следующим образом:

<div>
 <div>
  <div>
    <!-- Три колонки в 1/3 ширины -->
    <div>Текст первой колонки</div>
    <div>Текст второй колонки</div>
    <div>Текст третьей колонки</div>
  </div>
 </div>
</div>

Сумма чисел в классах колонок должна составлять 12, иначе ширина блока будет меньше ширины контейнера и справа останется незаполненное место.

Если колонку, в свою очередь, необходимо также поделить по ширине — добавляем div и в нём колонки по той же схеме.

Здесь пример сетки Bootstrap 3, обратите внимание на стили CSS — именно так формируются основные структурные элементы сетки — контейнер, строка и колонка. Для колонок разной ширины разница только в свойстве width — оно задаётся в процентах от общей ширины. Относительное значение width придаёт вёрстке адаптивность под разные устройства.

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

Недостатки сетки Bootstrap версии 3

Сетка Bootstrap 3 основана на CSS свойстве float, которое поддерживается во всех браузерах, включая старые версии, но не лишено недостатков. Один из них очевиден в приведённом примере — колонки имеют высоту, соответствующую содержимому, и не развёртываются по высоте родительского элемента (row).

Одно из решений — выставлять фиксированную height или минимальную min-height высоту колонок (соответственно разную, для разных устройств). Данную задачу можно решить с помощью jQuery (пример иллюстрирует реализацию при нажатии на ссылку или, после раскомментирования одной строки скрипта, включается выравнивание при загрузке страницы).

Кроме того, чтобы колонки вели себя предсказуемо при адаптации, для контейнера и строки используются добавление псевдоэлементов :before и :after, которые визуально не отображаются, а лишь компенсируют недостатки свойства float (имеющего назначение в виде «обтекания» рисунка текстом). А оптимизация HTML страницы предполагает использование минимально необходимого количества элементов.

Классы разметки в 4-ой версии

Классы контейнера и строки остались те же — .container и .row. Классов колонок добавилось, но прежние так же актуальны.

Сетка в Bootstrap 4 формируется указанием родительскому элементу свойства display:flex;. Cовременные версии браузеров его поддерживают:

Поддержка браузерами свойства flex (caniuse.com)

Internet Explorer, даже в версии 11 отличился — дословный перевод «частичная поддержка из-за большого количества ошибок».

Указывая классы с цифрами — получаем колонки c определённой шириной, как и в прежней версии (пример).

Колонки в родительском .row теперь занимают всю высоту строки.

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

Некоторым из колонок нужно задать ширину, а остальным нет? Сочетаем в одном .row классы колонок с цифрами и без них — и колонки с классом .col равномерно распределятся по оставшейся ширине строки.

Выравнивание содержимого колонки по вертикали? С flex это делается достаточно просто. Указываем родительскому элементу следующие CSS правила:

display: flex;
flex-direction: column;
justify-content: center;

Выводы по использованию

Решение, какую версию фреймворка Bootstrap зависит, не в меньшей мере, от аудитории сайта, который предстоит разрабатывать. Точнее, от браузера, который используют ваши пользователи.

Люди пожилого возраста, например, часто пользуются устаревшими компьютерами, что подразумевает Windows XP, а это Internet Explorer 8 версии максимум.

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

Мобильные устройства — на старых смартфонах операционная система, как и браузеры, уже не обновляется. В этом случае можно частично выйти из положения, переключая на маленьких экранах .row на свойство display:block;, а колонки на flex:unset;. Тогда они просто будут выводиться одна под другой во всю ширину экрана (что на маленьких экранах, обычно, и делается).

При перепечатке и копировании ссылка на сайт обязательна.

Опубликовано: 24.02.2020 г. 224

Система сеток Bootstrap 4 | WebReference

Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.=»col»] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>

<div>
<!— Сетка Bootstrap —>
<div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
<div>.col-sm-1</div>
</div>
<div>
<div>.col-sm-2</div>
<div>.col-sm-3</div>
<div>.col-sm-7</div>
</div>
<div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
</div>
<div>
<div>.col-sm-5</div>
<div>.col-sm-7</div>
</div>
<div>
<div>.col-sm-6</div>
<div>.col-sm-6</div>
</div>
<div>
<div>.col-sm-12</div>
</div>
</div>

Числа в конце каждого имени класса означают количество занимаемых колонок. Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь. sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.

Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).=»col»] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
<div>
<!— Сетка Bootstrap —>
<div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
</div>
<div>
<div>.col-md-2</div>
<div>.col-md-3</div>
<div>.col-md-7</div>
</div>
<div>
<div>.col-md-4</div>
<div>.col-md-4</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-5</div>
<div>.col-md-7</div>
</div>
<div>
<div>.col-md-6</div>
<div>.col-md-6</div>
</div>
<div>
<div>.col-md-12</div>
</div>
</div>

Размеры сетки

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.








Сверхмалая <576pxМалая ≥576pxСредняя ≥768pxБольшая ≥992pxСверхбольшая ≥1200px
Максимальная ширина контейнераНет (auto)540px720px960px1140px
Префикс класса.col-.col-sm-.col-md-.col-lg-.col-xl-
Число колонок12
Межколоночный интервал30px (по 15px с каждой стороны колонки)
ВложенностьДа
Порядок колонокДа

Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).

Что надо знать про сетки

Контейнеры

Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.

Ряды и колонки

Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.

padding

Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.

Более 12 колонок на строку?

Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.

Менее 12 столбцов на строку?

Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.

Классы сетки

Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).

Несколько классов

Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать, тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Код

· Bootstrap

Документация и примеры для отображения встроенных и многострочных блоков кода с помощью Bootstrap.

Встроенный код

Обернуть встроенные фрагменты кода в . Обязательно избегайте угловых скобок HTML.

Например,

следует обернуть как встроенный.

  Например,  & lt; section & gt;  должен быть заключен в оболочку как встроенный.

Кодовые блоки

Используйте 

  для нескольких строк кода.Еще раз, не забудьте снять угловые скобки в коде для правильного рендеринга. При желании вы можете добавить класс  .pre-scrollable , который установит максимальную высоту 350 пикселей и предоставит полосу прокрутки по оси Y. 



 
  
 Образец текста здесь ... 


 И еще одна строка образца текста здесь ... 

  
  
  & lt; p & gt; Пример текста здесь ... & lt; / p & gt;
& lt; p & gt; И еще одна строка образца текста здесь ... & lt; / p & gt;
 
 
 Переменные 
 Для указания переменных используйте тег   .
  y  =  м   x  +  b 
   y  =  m   x  +  b   
 Пользовательский ввод 
 Используйте    для обозначения ввода, который обычно вводится с клавиатуры.
 Чтобы переключить каталоги, введите  cd , а затем имя каталога. 
 Для редактирования настроек нажмите   ctrl  + ,  
  Чтобы переключить каталоги, введите  cd , а затем имя каталога. 

Чтобы изменить настройки, нажмите   ctrl  + ,    
 Пример вывода 
 Для указания образца вывода из программы используйте тег   .
  Этот текст следует рассматривать как образец вывода компьютерной программы. 
   Этот текст следует рассматривать как образец вывода компьютерной программы.   
 JavaScript · Bootstrap 
 Индивидуальный или составной 
 Плагины
 могут быть включены индивидуально (с использованием отдельных файлов Bootstrap  * .js ) или все сразу (с использованием  bootstrap.js  или минифицированного загрузочного файла .min.js ).
 Использование скомпилированного JavaScript 
 И  bootstrap.js , и  bootstrap.min.js  содержат все плагины в одном файле. Включите только один.
 Зависимости плагина 
 Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен  перед  файлами плагина).Проконсультируйтесь с нашим  bower.json , чтобы узнать, какие версии jQuery поддерживаются.
 Атрибуты данных 
 Вы можете использовать все плагины Bootstrap только через API разметки, не написав ни одной строчки JavaScript. Это первоклассный API-интерфейс Bootstrap, который следует учитывать в первую очередь при использовании плагина.
 Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Таким образом, мы также предоставляем возможность отключить API атрибутов данных, отключив все события в документе с пространством имен  data-api .Это выглядит так:
  $ (document) .off ('. Data-api')  
 В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например:
  $ (документ) .off ('. Alert.data-api')  
 Только один плагин на элемент через атрибуты данных 
 Не используйте атрибуты данных из нескольких плагинов в одном элементе. Например, кнопка не может одновременно иметь всплывающую подсказку и переключать модальное окно.Для этого используйте оборачивающий элемент.
 Программный API 
 Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия.
  $ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')  
 Все методы должны принимать необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что инициирует плагин с поведением по умолчанию):
  $ ('# myModal').modal () // инициализируется значениями по умолчанию
$ ('# myModal'). modal ({keyboard: false}) // инициализируется без клавиатуры
$ ('# myModal'). modal ('show') // немедленно инициализирует и вызывает show  
 Каждый плагин также предоставляет свой необработанный конструктор в свойстве  Constructor :  $ .fn.popover.Constructor . Если вы хотите получить конкретный экземпляр плагина, получите его прямо из элемента:  $ ('[rel = "popover"]'). Data ('popover') .
 Настройки по умолчанию 
 Вы можете изменить настройки плагина по умолчанию, изменив его конструктор .DEFAULTS  объект:
  $ .fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значение по умолчанию для опции `keyboard` модального плагина на false  
 Нет конфликта 
 Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен.Если это произойдет, вы можете позвонить по номеру  .noConflict  для плагина, значение которого вы хотите вернуть.
  var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
$ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap  
 События 
 Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени - где инфинитив (напр. show ) запускается в начале события, а его форма прошедшего причастия (например,  показано ) запускается при завершении действия.
 Начиная с 3.0.0, все события Bootstrap имеют пространство имен.
 Все инфинитивные события обеспечивают функциональность  preventDefault . Это дает возможность остановить выполнение действия до его запуска.
  $ ('# myModal'). On ('show.bs.modal', function (e) {
  if (! data) return e.preventDefault () // останавливает отображение модального окна
})  
 Дезинфицирующее средство 
 Всплывающие подсказки и всплывающие окна используют наше встроенное средство дезинфекции для очистки параметров, которые принимают HTML.ария - [\ w -] * $ / i
 var DefaultWhitelist = {
 // Глобальные атрибуты разрешены для любого указанного ниже элемента.
 '*': ['класс', 'каталог', 'идентификатор', 'язык', 'роль', ARIA_ATTRIBUTE_PATTERN],
 a: ['target', 'href', 'title', 'rel'],
 площадь: [],
 b: [],
 br: [],
 col: [],
 код: [],
 div: [],
 em: [],
 час: [],
 h2: [],
 h3: [],
 h4: [],
 h5: [],
 h5: [],
 h6: [],
 я: [],
 img: ['src', 'alt', 'title', 'width', 'height'],
 li: [],
 ол: [],
 п: [],
 pre: [],
 s: [],
 небольшой: [],
 охватывать: [],
 sub: [],
 Как дела: [],
 сильный: [],
 u: [],
 ul: []
 } 
 Если вы хотите добавить новые значения в этот белый список  по умолчанию , вы можете сделать следующее:
  var myDefaultWhiteList = $.data-my-app - [\ w -] + /
myDefaultWhiteList ['*']. push (myCustomRegex)  
 Если вы хотите обойти наше средство очистки, потому что вы предпочитаете использовать выделенную библиотеку, например DOMPurify, вы должны сделать следующее:
  $ ('# yourTooltip'). Tooltip ({
  sanitizeFn: function (content) {
    вернуть DOMPurify.sanitize (контент)
  }
})  
 Браузеры без 
 document.implementation.createHTMLDocument 
 В случае браузеров, которые не поддерживают документ .implementation.createHTMLDocument , как и Internet Explorer 8, встроенная функция sanitize возвращает HTML как есть.
 Если вы хотите выполнить дезинфекцию в этом случае, укажите  sanitizeFn  и используйте внешнюю библиотеку, такую ​​как DOMPurify.
 Номера версий 
 Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство  VERSION  конструктора подключаемого модуля. Например, для плагина всплывающей подсказки:
  $.fn.tooltip.Constructor.VERSION // => "3.4.1"  
 Никаких специальных резервных вариантов при отключенном JavaScript 
 Плагины
 Bootstrap не особо изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте  
 Сторонние библиотеки 
  Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на  .noConflict  и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.
 О переходах 
 Для простых эффектов перехода включите  transition.js  один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минифицированный)  bootstrap.js , нет необходимости включать его - он уже есть.
 Что внутри 
 Transition.js - это базовый помощник для событий  transitionEnd , а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов.
 Отключение переходов 
 Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен быть после загрузки  transition.js  (или  bootstrap.js  или  bootstrap.min.js , в зависимости от обстоятельств):
  $ .support.transition = false  
 Модальные окна - это упрощенные, но гибкие диалоговые окна с минимально необходимой функциональностью и интеллектуальными настройками по умолчанию.
 Несколько открытых модальных окон не поддерживаются 
 Не открывайте модальное окно, пока еще видно другое. Для одновременного отображения нескольких модальных окон требуется специальный код.
 Размещение модальной разметки 
 Всегда старайтесь размещать HTML-код модального окна на верхнем уровне в вашем документе, чтобы другие компоненты не влияли на внешний вид и / или функциональность модального окна.
  Из-за того, как HTML5 определяет свою семантику, атрибут  autofocus  HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:
  $ ('# myModal'). On ('shown.bs.modal', function () {
  $ ('# myInput'). фокус ()
})  
 Примеры 
 Статический пример 
 Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.
  

  

    

      

        
        
 Модальный заголовок 

      

      

        
 Одно прекрасное тело & hellip; 

      

      

        
        
      

    
 
  
 

   
 Живая демонстрация 
 Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.
 Текст в модальном окне 
 Duis mollis, est nonmodo luctus, nisi erat porttitor ligula.
 Поповер в модальном окне 
 Эта кнопка должна вызывать всплывающее окно при нажатии.
 Подсказки в модальном окне 
 Эта ссылка и эта ссылка должны иметь всплывающие подсказки при наведении курсора.
 Переполнение текста для отображения поведения прокрутки 
 Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
 Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
 Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
 Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
 Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
 Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
 Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
 Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
 Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
 Запустить демо-модальное окно
  





  

    

      

        
        
 Модальный заголовок 

      

      

        ...
      

      

        
        
      

    

  


  
 Сделать модальные окна доступными 
 Не забудьте добавить  role = "dialog"  и  aria-labelledby = "..."  со ссылкой на модальный заголовок в  .modal  и  role = "document"  в  .modal- сам диалог .
 Кроме того, вы можете дать описание вашего модального диалога с помощью  aria, описанного  на  .modal .
 Встраивание видео с YouTube 
 Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации.
 Дополнительные размеры 
 Модалы имеют два дополнительных размера, доступных через классы модификаторов, которые можно разместить на .модальный диалог .
 Большой модальный
 Малый модальный
  




  

    

      ...
    

  









  

    

      ...
    

  


  
 Удалить анимацию 
 Для модальных окон, которые просто появляются, а не исчезают при отображении, удалите класс  .fade  из модальной разметки.
  

  ...

  
 Использование грид-системы 
 Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите  .row  в  .modal-body , а затем используйте обычные классы системы сеток.
 .col-md-4
 .col-md-4 .col-md-offset-4
 .col-md-3 .col-md-offset-3
 .col-md-2 .col-md-offset-4
 .col-md-6 .col-md-offset-3
 Уровень 1: .col-sm-9
 Уровень 2: .col-xs-8 .col-sm-6
 Уровень 2: .col-xs-4 .col-sm-6
 Запустить демо-модальное окно
  

  

    

      

        
        
 Модальный заголовок 

      

      

        

          
.col-md-4 

          
 .col-md-4 .col-md-offset-4 

        

        

          
 .col-md-3 .col-md-offset-3 

          
 .col-md-2 .col-md-offset-4 

        

        

          
 .col-md-6 .col-md-offset-3 

        

        

          

            Уровень 1: .col-sm-9
            

              

                Уровень 2: .col-XS-8 .col-sm-6
              

              

                Уровень 2: .col-xs-4 .col-sm-6
              

            

          

        

      

      

        
        
      

    
 
  
 

   
 У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержимым? Используйте атрибуты  event.relatedTarget  и HTML  data- *  (возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о  relatedTarget ,
.
 Открыть модальное окно для @mdo
 Открыть модальное окно для @fat
 Открыть модальное окно для @getbootstrap
 ... еще кнопки ...
  


...больше кнопок ...



  

    

      

        
        
 Новое сообщение 

      

      

        <форма>
          

            
            
          

          

            
            
          

        
      

      

        
        
      

    

  


  
  $ ('# exampleModal').on ('show.bs.modal', функция (событие) {
  var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
  var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
  // При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
  // Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
  var modal = $ (это)
  modal.find ('. modal-title'). text ('Новое сообщение для' + получатель)
  модальный.find ('. ввод модального тела'). val (получатель)
})  
 Использование 
 Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет  .modal-open  к  , чтобы переопределить поведение прокрутки по умолчанию, и генерирует  .modal-backdrop , чтобы предоставить область щелчка для отклонения отображаемых модальных окон при щелчке вне модального окна.
 Через атрибуты данных 
 Активировать модальное окно без написания JavaScript.Установите  data-toggle = "modal"  на элементе контроллера, например кнопке, вместе с  data-target = "# foo"  или  href = "# foo" , чтобы выбрать конкретный модальный элемент для переключения.
    
 Через JavaScript 
 Вызов модального окна с идентификатором  myModal  с помощью одной строки JavaScript:
  $ ('# myModal'). Modal (параметры)  
 Параметры 
 Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к  data- , как в  data-backdrop = "" .
 Имя тип по умолчанию описание
 фон boolean или строка  'static'  правда Включает элемент модального фона. В качестве альтернативы укажите  static  для фона, который не закрывает модальное окно при щелчке.
 клавиатура логический правда Закрывает модальное окно при нажатии клавиши выхода
 показать логический правда Показывает модальное окно при инициализации.
 удаленный путь ложь
  Эта опция устарела, начиная с версии v3.3.0 и был удален в v4.  Вместо этого мы рекомендуем использовать клиентские шаблоны или структуру привязки данных либо самостоятельно вызывать jQuery.load.
 Если предоставлен удаленный URL-адрес, содержимое  будет загружено один раз  с помощью метода jQuery  load  и введено в div  .modal-content . Если вы используете data-api, вы также можете использовать атрибут  href  для указания удаленного источника. Пример этого показан ниже:
   Нажми меня   
 Методы 
 .modal (опции) 
 Активирует ваш контент как модальный. Принимает необязательные параметры , объект .
  $ ('# myModal'). Modal ({
  клавиатура: ложь
})  
 .modal ('toggle') 
 Переключает модальное окно вручную.  Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто  (т.е. перед событием  shown.bs.modal  или  hidden.bs.modal ).
  $ ('# myModal'). Modal ('toggle')  
 .modal ('показать') 
 Открывает модальное окно вручную.  Возврат к вызывающей стороне до фактического отображения модального окна  (т.е. до того, как произойдет событие  shown.bs.modal ).
  $ ('# myModal'). Modal ('показать')  
 .modal ('скрыть') 
 Вручную скрывает модальное окно. Возврат к вызывающей стороне до фактического скрытия модального окна  (т.е. до того, как произойдет событие  hidden.bs.modal ).
  $ ('# myModal'). Modal ('hide')  
 .modal ('handleUpdate') 
 Изменяет положение модального окна для противодействия полосе прокрутки в случае, если она должна появиться, что приведет к переходу модального окна влево.
 Требуется только при изменении высоты модального окна, когда оно открыто.
  $ ('# myModal').модальный ('handleUpdate')  
 События 
 Модальный класс
 Bootstrap предоставляет несколько событий для подключения к модальным функциям.
 Все модальные события запускаются в самом модальном окне (то есть в 
 ).
 Тип события Описание
 показать модальный Это событие запускается немедленно при вызове метода экземпляра  show .Если это вызвано щелчком, выбранный элемент доступен как свойство  relatedTarget  события.
 показан модальный Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ожидать завершения переходов CSS). Если это вызвано щелчком, выбранный элемент доступен как свойство  relatedTarget  события.
 hide.bs.modal Это событие запускается сразу после вызова метода экземпляра  hide .
 hidden.bs.modal Это событие запускается, когда модальное окно перестало быть скрытым от пользователя (будет ожидать завершения переходов CSS).
 загруженный модальный Это событие вызывается, когда модальное окно загружает контент с помощью опции  remote .
  $ ('# myModal'). On ('hidden.bs.modal', function (e) {
  // сделай что-нибудь...
})  
 Примеры 
 Добавляйте раскрывающиеся меню практически ко всему с помощью этого простого плагина, включая панель навигации, вкладки и таблетки.
 Внутри панели навигации 
 Внутри таблеток 
 Использование 
 С помощью атрибутов данных или JavaScript подключаемый модуль раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения класса  .open  в родительском элементе списка.
 На мобильных устройствах открытие раскрывающегося списка добавляет  .dropdown-backdrop  в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню, что является требованием для надлежащей поддержки iOS.  Это означает, что переключение из открытого раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.
 Примечание. Атрибут  data-toggle = "dropdown"  используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.
 Через атрибуты данных 
 Добавьте  data-toggle = "dropdown"  к ссылке или кнопке, чтобы переключить раскрывающийся список.
  

  
  
    
    ...
  


  
 Чтобы URL-адреса оставались неизменными с кнопками ссылок, используйте атрибут  data-target  вместо  href = "#" .
    
 Через JavaScript 
 Вызов раскрывающихся списков с помощью JavaScript:
  $ ('.dropdown-toggle '). dropdown ()  
.
 data-toggle = "dropdown"  по-прежнему требуется
 Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api,  data-toggle = "dropdown"  всегда должен присутствовать в элементе триггера раскрывающегося списка.
 Опции 
  Нет 
 Методы 
 $ (). Раскрывающийся список ('переключение') 
 Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
 События 
 Все выпадающие события запускаются в родительском элементе  .dropdown-menu .
 Все раскрывающиеся события имеют свойство  relatedTarget , значение которого является переключаемым элементом привязки.
 Показан
 Тип события Описание
 показать.bs.dropdown Это событие запускается немедленно при вызове метода экземпляра шоу.
.bs.dropdown Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
 hide.bs.dropdown Это событие запускается сразу после вызова метода экземпляра hide.
 hidden.bs.dropdown Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myDropdown'). On ('show.bs.dropdown', function () {
  // сделай что-нибудь…
})  
 Плагин ScrollSpy предназначен для автоматического обновления навигационных целей в зависимости от положения прокрутки. Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Подпункты раскрывающегося списка также будут выделены.
 @ жир 
 Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui.Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона. Нихил татуировал акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват.
 @mdo 
 Скейтборд Veniam marfa с усами, жирная борода с вилами. Freegan борода aliqua cupidatat mcsweeney's vero.Cupidatat four loko nisi, ea helvetica nulla carles. Татуированный свитер с рисунком косби, фургон с едой, винил mcsweeney's quis non freegan. Lo-fi wes anderson +1 портной. Карлес неэстетическое упражнение quis genrify. Brooklyn adipisicing Craft Beer Vice Keytar deserunt.
 одна 
 Occaecat Commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore, кофе одного происхождения в magna veniam. Виниловая пластинка High Life, Echo Park Conquat Quis Aliquip Banh Mi Villas.Vero VHS очень популярный. Сумка-мессенджер Consectetur nisi «сделай сам» минимального размера. Cred ex in, прочная сумка на пояс delectus Conctetur для iphone.
 два 
 В парке Incididunt Echo, видный мастер службы deserunt mcsweeney очищает thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel Laborum крафтовое пиво. Кофе-подорожники одного происхождения irure four loko, cupidatat terry richardson master cleanse. Предположим, вы, вероятно, не слышали о них: поясная сумка для арт-вечеринки, временная реклама татуированного кардигана nulla.Proident wolf nesciunt sartorial keffiyeh eu banh mi устойчивый. Элитный волк сладострастный, lo-fi ea portland, прежде чем они продали четыре локо. Locavore enim nostrud mlkshk brooklyn nesciunt.
 три 
 Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui. Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона.Нихил татуировал акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват.
 Keytar twee blog, сумка-мессенджер culpa marfa something delectus food truck. Sapiente synth id предположительно. Locavore sed helvetica клише ирония, громовые кошки, о которых вы, вероятно, не слышали, консервируют толстовку с капюшоном без глютена lo-fi fap aliquip. Элитное место работы перед распродажей, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Кардиган крафтовый пивной сейтан готовый велит.VHS chambray labouris tempor veniam. Anim mollit Minimum Commodo Ullamco Thundercats.
 Требуется относительное позиционирование 
 Независимо от метода реализации, scrollspy требует использования  position: relative;  на элементе, за которым вы шпионите. В большинстве случаев это  . При прокрутке элементов, отличных от  , убедитесь, что для  задана высота  и  overflow-y: scroll; Подано .
 Через атрибуты данных 
 Чтобы легко добавить поведение scrollspy к вашей навигации на верхней панели, добавьте  data-spy = "scroll"  к элементу, за которым вы хотите следить (чаще всего это  ). Затем добавьте атрибут  data-target  с идентификатором или классом родительского элемента любого компонента Bootstrap  .nav .
  кузов {
  положение: относительное;
}  
  
  ...
  

    
    
      ...
    

  

  ...   
 Через JavaScript 
 После добавления  позиция: относительная;  в вашем CSS, вызовите scrollspy через JavaScript:
  $ ('body'). Scrollspy ({target: '# navbar-example'})  
 Методы 
 .scrollspy ('обновить') 
 При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам необходимо вызвать метод обновления следующим образом:
  $ ('[data-spy = "scroll"]').each (function () {
  var $ spy = $ (это) .scrollspy ('обновить')
})  
 Опции 
 Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к  data- , как в  data-offset = "" .
 Имя тип по умолчанию описание
 смещение номер 10 Пикселей для смещения сверху при вычислении положения прокрутки.
 События 
 Тип события Описание
 activate.bs.scrollspy Это событие срабатывает всякий раз, когда scrollspy активирует новый элемент.
  $ ('# myScrollspy'). On ('activate.bs.scrollspy', function () {
  // сделай что-нибудь…
})  
 Примеры вкладок 
 Добавьте быстрые динамические вкладки для перехода между панелями локального контента, даже через раскрывающиеся меню. Вложенные вкладки не поддерживаются. 
 Необработанный деним Вы наверняка не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очистки ретро-синтезатора. Усы cliche tempor, williamsburg carles vegan helvetica. Репрезендерит мясник ретро кефиех ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure terry richardson ex squid. Аликвип плац для шалфея cillum iphone. Кардиган Seitan aliquip quis американская одежда, мясник сладострастный nisi qui.
 Food truck fixie locavore, кофейный кальмар одного происхождения accusamus mcsweeney's marfa nulla. Exercitation +1 labore velit, блог портняжные леггинсы PBR следующего уровня wes anderson artisan four loko-farm to table craft beer twee. Qui photo booth высокой печати, коммодо enim craft пиво млкшк аликвип джинсовые шорты ullamco ad винил cillum PBR. Homo nostrud organic, предположительно, работает эстетическая magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.Vegan fanny pack odio cillum wes anderson 8-битные экологически чистые джинсовые шорты с бородой и этичным биодизелем Терри Ричардсона, сделанным своими руками. Art party sceneter stumptown, tumblr butcher vero sint qui sapiente accusamus татуированный эхо-парк.
 Etsy mixtape wayfarers, этичный тофу уэса андерсона до того, как они распродали органический ломо-ретро фанни-пакет от mcsweeney в готовом виде. Сумка-мессенджер с татуировкой в ​​виде вилок, крафтовое пиво, iphone skateboard locavore carles etsy salvia banksy с капюшоном helvetica.DIY synth PBR Банки ирония. Поножи джентрификации кальмара 8-битный кредит вилами. Williamsburg banh mi без глютена, вилы carles biodiesel fixie etsy retro mlkshk Vice blog. Вы, наверное, никогда о них не слышали, блог о крафтовом пиве, виниловом пиве, stumptown. Вилы из экологически чистого тофу, синтезатор, шамбре г.
 трастовый фонд seitan высокой печати, keytar raw denim keffiyeh etsy art party перед распродажей свитера master cleanse без глютена с кальмарами.Fanny pack portland seitan DIY, арт-вечеринка locavore волк клише светская жизнь эхо-парк в Остине. Кред винил keffiyeh DIY salvia PBR, banh mi, прежде чем они распродали свитер VHS вирусного locavore cosby. Lomo wolf viral, готовые усы thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
 Использование 
 Включить вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно):
  $ ('# myTabs a').click (function (e) {
  e.preventDefault ()
  $ (это) .tab ('показать')
})  
 Активировать отдельные вкладки можно несколькими способами:
  $ ('# myTabs a [href = "# profile"]'). Tab ('show') // Выбрать вкладку по имени
$ ('# myTabs a: first'). tab ('show') // Выбрать первую вкладку
$ ('# myTabs a: last'). tab ('show') // Выбрать последнюю вкладку
$ ('# myTabs li: eq (2) a'). tab ('show') // Выбрать третью вкладку (с индексом 0)  
 Разметка 
 Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав для элемента  data-toggle = "tab"  или  data-toggle = "pill" .Добавление классов  nav  и  nav-tabs  на вкладку  ul  применит стиль вкладки Bootstrap, а добавление классов  nav  и  nav-pills  применит стиль таблетки.
    
 Эффект затухания 
 Чтобы вкладки постепенно появлялись, добавьте  .fade  к каждой  .tab-pane . На первой панели вкладок также должно быть  на , чтобы исходное содержимое было видимым.
  

  
 ... 

  
... 

  
 ... 

  
 ... 


  
 Методы 
 $ (). Вкладка 
 Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо  data-target , либо  href , нацеленный на узел контейнера в DOM. В приведенных выше примерах вкладки - это    с атрибутами  data-toggle = "tab" .
.tab ('показать') 
 Выбирает данную вкладку и показывает связанное с ней содержимое. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанное с ней содержимое скрывается.  Возврат к вызывающему абоненту до фактического отображения панели вкладок  (т.е. до того, как произойдет событие  shown.bs.tab ).
  $ ('# someTab'). Tab ('show')  
 События 
 При отображении новой вкладки события запускаются в следующем порядке:
  1.   скрыть.bs.tab  (на текущей активной вкладке)
  2.   show.bs.tab  (на вкладке для показа)
  3.   hidden.bs.tab  (на предыдущей активной вкладке такая же, как для события  hide.bs.tab )
  4.   показано.bs.tab  (на недавно активной только что показанной вкладке та же, что и для события  show.bs.tab )
 Если ни одна вкладка еще не была активной, то события  hide.bs.tab  и  hidden.bs.tab  запускаться не будут.
 Показано
 Тип события Описание
 show.bs.tab Это событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте  event.target  и  event.relatedTarget  для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
.bs.tab Это событие запускается при отображении вкладок после того, как вкладка была показана.Используйте  event.target  и  event.relatedTarget  для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
 hide.bs.tab Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте  event.target  и  event.relatedTarget  для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
 скрыто.bs.tab Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте  event.target  и  event.relatedTarget  для нацеливания на предыдущую активную вкладку и новую активную вкладку соответственно.
  $ ('a [data-toggle = "tab"]'). On ('shown.bs.tab', function (e) {
  e.target // недавно активированная вкладка
  e.relatedTarget // предыдущая активная вкладка
})  
 На основе отличного jQuery.пьяный плагин, написанный Джейсоном Фреймом; Всплывающие подсказки - это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.
 Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
 Наведите указатель мыши на ссылки ниже, чтобы увидеть подсказки:
 Статическая подсказка 
 Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.
 Четыре направления 
  





  
 Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.
 Запуск всплывающей подсказки через JavaScript:
  $ ('# example'). Tooltip (options)  
 Разметка 
 Требуемая разметка для всплывающей подсказки - это только  атрибутов данных  и  заголовка  в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение  top ).
  
 Наведите указатель мыши на меня 




  
 

  

    Текст всплывающей подсказки!
  


  
 Опции 
 Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к  data- , как в  data-animation = "" .
 Номер
 Имя Тип По умолчанию Описание
 анимация логический правда Применение перехода CSS постепенного изменения к всплывающей подсказке
 контейнер строка | ложь ложь
 Добавляет всплывающую подсказку к определенному элементу.Пример:  контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет вам располагать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.
 задержка | объект 0
 Задержка показа и скрытия всплывающей подсказки (мс) - не применяется к ручному типу запуска
 Если указан номер, задержка применяется к скрытию / отображению
 Структура объекта:  задержка: {"показать": 500, "скрыть": 100} 
 HTML логический ложь Вставьте HTML во всплывающую подсказку.Если false, метод jQuery  text  будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
 размещение строка | функция 'верх'
 Как разместить всплывающую подсказку - вверху | внизу | слева | право | авто. 
 Если указано «auto», всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае - справа.
 Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго.  контекст  установлен для экземпляра всплывающей подсказки.
 селектор строка ложь Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( jQuery.на опоре ). См. Этот и информативный пример.
 шаблон строка  '
' 
 Базовый HTML-код для использования при создании всплывающей подсказки.
 Заголовок  всплывающей подсказки  будет вставлен в  .tooltip-inner .
  .tooltip-arrow  станет стрелкой всплывающей подсказки.
 Самый внешний элемент оболочки должен иметь класс  .tooltip .
 название строка | функция '
 Значение заголовка по умолчанию, если атрибут  заголовок  отсутствует.
 Если задана функция, она будет вызываться с  этой ссылкой , установленной на элемент, к которому прикреплена всплывающая подсказка.
 триггер строка 'hover focus' Как запускается всплывающая подсказка - щелкните | парить | фокус | руководство по эксплуатации. Вы можете передать несколько триггеров; разделите их пробелом.  ручной  нельзя комбинировать с каким-либо другим триггером.
 окно просмотра строка | объект | функция {селектор: 'тело', отступ: 0}
 Сохраняет всплывающую подсказку в пределах этого элемента.Пример:  viewport: '#viewport'  или  {"selector": "#viewport", "padding": 0} 
 Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента.  контекст  установлен для экземпляра всплывающей подсказки.
 продезинфицировать логический правда Включение или отключение очистки. Если активирован  «шаблон» ,  «контент»  и  «заголовок»  параметры будут очищены.
 белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
 sanitizeFn null | функция null Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
 Методы 
 $ ().всплывающая подсказка (параметры) 
 Присоединяет обработчик всплывающей подсказки к коллекции элементов.
 .tooltip ('показать') 
 Показывает всплывающую подсказку элемента.  Возврат к вызывающей стороне до фактического отображения всплывающей подсказки  (т.е. до того, как произойдет событие  shown.bs.tooltip ). Это считается "ручным" запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
  $ ('# element'). Tooltip ('show')  
.всплывающая подсказка ('скрыть') 
 Скрывает всплывающую подсказку элемента.  Возвращается к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта.  (т.е. до того, как произойдет событие  hidden.bs.tooltip ). Это считается "ручным" запуском всплывающей подсказки.
  $ ('# element'). Tooltip ('hide')  
 .tooltip ('toggle') 
 Переключает всплывающую подсказку элемента.  Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта  (т.е.е. перед событием  shown.bs.tooltip  или  hidden.bs.tooltip ). Это считается "ручным" запуском всплывающей подсказки.
  $ ('# element'). Tooltip ('toggle')  
 .tooltip ('destroy') 
 Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с использованием опции  селектора ), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
  $ ('# элемент').tooltip ('destroy')  
 События 
 Показан
 Тип события Описание
 показать.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра  show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
 hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра  hide .
 hidden.bs.tooltip Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
 Insert.bs.tooltip Это событие запускается после события  show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  
 Добавьте небольшие наложения контента, как на iPad, в любой элемент для размещения вторичной информации.
 всплывающих окон, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
 Возможность подписки 
 По соображениям производительности API данных всплывающей подсказки и всплывающего окна являются дополнительными, что означает, что  вы должны инициализировать их самостоятельно .
 Один из способов инициализировать все всплывающие окна на странице - выбрать их по их атрибуту  data-toggle :
  $ (function () {
  $ ('[data-toggle = "popover"]'). popover ()
})  
 Всплывающие окна в группах кнопок, группах ввода и таблицах требуют специальной настройки 
 При использовании всплывающих окон на элементах в пределах  .btn-group  или  .input-group , или на элементах, связанных с таблицами (
 , 
 , 
 ,  < thead> , 
 , 
 ), вам нужно будет указать опцию  container: 'body'  (задокументировано ниже), чтобы избежать нежелательных побочных эффектов (например, расширение элемента и / или теряет закругленные углы при срабатывании всплывающего окна).
 Не пытайтесь отображать всплывающие окна на скрытых элементах 
 Вызов  $ (...). Popover ('show') , когда целевой элемент -  display: none;  приведет к неправильному расположению всплывающего окна.
 Для всплывающих окон на отключенных элементах требуются элементы-оболочки 
 Чтобы добавить всплывающее окно к элементу  disabled  или  .disabled , поместите элемент внутри 
  и вместо этого примените всплывающее окно к этому 
 .
 Многострочные ссылки 
 Иногда вы хотите добавить всплывающее окно к гиперссылке, которая переносит несколько строк. По умолчанию плагин popover центрирует его по горизонтали и вертикали. Добавьте  пробелов: nowrap;  к вашим якорям, чтобы этого избежать.
 Примеры 
 Статическое всплывающее окно 
 Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.
 Топ с открытой спиной 
 Sed posuere consctetur est at lobortis.Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
 Поповер правый 
 Sed posuere consctetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
 Поповер снизу 
 Sed posuere consctetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
 Поповер слева 
 Sed posuere consctetur est at lobortis.Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
 Живая демонстрация 
 Нажмите, чтобы переключить всплывающее окно
    
 Четыре направления 
 Всплывающее окно справа
 Поповер сверху
 Поповер внизу
 Поповер слева
  





  
 Закрыть при следующем нажатии 
 Используйте триггер  focus , чтобы закрыть всплывающие окна при следующем щелчке, сделанном пользователем.
 Специальная разметка, необходимая для закрытия при следующем нажатии 
 Для правильного кроссбраузерного и кроссплатформенного поведения необходимо использовать тег   , , а не  тег    
 Чтобы ваши оповещения использовали анимацию при закрытии, убедитесь, что к ним уже применены классы  .fade  и  .in .
 Методы 
 $ (). Alert () 
 Заставляет оповещение прослушивать события щелчка на дочерних элементах, которые имеют атрибут  data-dismiss = "alert" .(Не требуется при использовании автоматической инициализации data-api.)
 $ (). Alert ('закрыть') 
 Закрывает предупреждение, удаляя его из модели DOM. Если классы  .fade  и  .in  присутствуют в элементе, предупреждение исчезнет, ​​прежде чем оно будет удалено.
 События 
 Плагин предупреждений
 Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.
 Тип события Описание
 закрыть.bs.alert Это событие возникает сразу после вызова метода экземпляра  close .
 closed.bs.alert Это событие вызывается, когда предупреждение закрывается (ожидает завершения переходов CSS).
  $ ('# myAlert'). On ('closed.bs.alert', function () {
  // сделай что-нибудь…
})  
 Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.
 с сохранением состояния 
 Добавьте  data-loading-text = "Loading ..." , чтобы использовать состояние загрузки для кнопки.
  Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4. 
 Состояние загрузки
  

<сценарий>
  $ ('# myButton'). on ('щелчок', function () {
    var $ btn = $ (это) .button ('загрузка')
    // бизнес-логика...
    $ btn.button ('сбросить')
  })
  
 Одиночный переключатель 
 Добавьте  data-toggle = "button" , чтобы активировать переключение на одной кнопке.
 Для кнопок с предварительным переключением требуется 
 .active  и  aria -olved = "true" 
 Для кнопок с предварительным переключением необходимо самостоятельно добавить класс  .active  и атрибут  aria -hibited = "true"  к кнопке  button .
 Одиночный переключатель
    
 Флажок / Радио 
 Добавьте  data-toggle = "buttons"  в .btn-group , содержащий флажки или радиовходы, позволяющие переключаться между соответствующими стилями.
 Требуются предварительно выбранные опции 
 .активно 
 Для предварительно выбранных опций необходимо самостоятельно добавить класс  .active  к метке  входа .
 Состояние визуальной проверки обновляется только при нажатии 
 Если отмеченное состояние кнопки флажка обновляется без запуска события  click  на кнопке (например,через    или через установку свойства  checked  входа), вам нужно будет самостоятельно переключить класс  .active  на метку  входа .
  

  <метка>
     Флажок 1 (установлен заранее)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  

  
  

  <метка>
     Radio 1 (предварительно выбрано)
  
  <метка>
     Радио 2
  
  <метка>
     Радио 3
  

  
 Методы 
 $ ().кнопка ('переключение') 
 Переключает состояние push. Придает кнопке вид, что она была активирована.
 $ (). Кнопка ('сброс') 
 Сбрасывает состояние кнопки - заменяет текст исходным текстом.  Этот метод является асинхронным и возвращается до фактического завершения сброса. 
 $ (). Кнопка (строка) 
 Меняет текст на любое текстовое состояние, определенное данными.
  

<сценарий>
  $ ('# myStateButton'). on ('щелчок', function () {
    $ (this) .button ('complete') // текст кнопки будет "готово!"
  })
  
 Гибкий плагин, который использует несколько классов для легкого переключения.
 Зависимость плагина 
 Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap.
 Пример 
 Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
  •  .свернуть  скрывает содержимое
  •  . Свертывание  применяется во время переходов
  •   .collapse.in  показывает содержимое
 Можно использовать ссылку с атрибутом  href  или кнопку с атрибутом  data-target . В обоих случаях требуется  data-toggle = "collapse" .
 Ссылка на href
 Кнопка с целью данных
 Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
  



  

    ...
  


  
 Пример «Аккордеон» 
 Расширить поведение сворачивания по умолчанию, чтобы создать гармошку с компонентом панели.
 Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
 Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
 Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
  

  

    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

    

  

  

    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

    

  

  

    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

    

  


  
 Также можно заменить  .panel-body  s на  .list-group  s.
  •  Bootply
  •  One itmus ac facilin
  •  Второй эрос
 Сделать доступными элементы управления разворачиванием / свертыванием 
 Не забудьте добавить  aria-extended  к элементу управления. Этот атрибут явно определяет текущее состояние сворачиваемого элемента для программ чтения с экрана и аналогичных вспомогательных технологий.Если складной элемент закрыт по умолчанию, он должен иметь значение  aria-extended = "false" . Если вы установили открываемый складной элемент по умолчанию с использованием класса  в , вместо этого установите  aria-extended = "true"  в элементе управления. Плагин автоматически переключает этот атрибут в зависимости от того, был ли открыт или закрыт складной элемент.
 Кроме того, если ваш элемент управления нацелен на единственный складной элемент, т. Е.атрибут  data-target  указывает на селектор  id  - вы можете добавить дополнительный атрибут  aria-controls  к элементу управления, содержащий  id  сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.
 Использование 
 Плагин коллапса использует несколько классов для работы с тяжелыми грузами:
  •  .collapse  скрывает содержимое
  •   .collapse.in  показывает содержимое
  •   .collapsing  добавляется при запуске перехода и удаляется при его завершении
 Эти классы можно найти в  component-animations.less .
 Через атрибуты данных 
 Просто добавьте  data-toggle = "collapse"  и  data-target  к элементу, чтобы автоматически назначить управление сворачиваемым элементом.Атрибут  data-target  принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс  collapse . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс  в .
 Чтобы добавить к сворачиваемому элементу управления групповое управление группами, добавьте атрибут данных  data-parent = "# selector" . Обратитесь к демонстрации, чтобы увидеть это в действии.
 Через JavaScript 
 Включить вручную с помощью:
  $ ('.collapse '). collapse ()  
 Параметры 
 Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к  data- , как в  data-parent = "" .
 Имя тип по умолчанию описание
 родитель селектор ложь Если предоставлен селектор, то все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента.(аналогично традиционному поведению аккордеона - это зависит от панели  класса )
 переключатель логический правда Переключает сворачиваемый элемент при вызове
 Методы 
. Свернуть (опции) 
 Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры , объект .
  $ ('# myCollapsible').крах({
  toggle: false
})  
 .collapse ('переключение') 
 Переключает складной элемент на отображение или скрытие.  Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт  (т.е. до того, как произойдет событие  shown.bs.collapse  или  hidden.bs.collapse ).
 .collapse ('показать') 
 Показывает складной элемент.  Возврат к вызывающей стороне до того, как складной элемент будет фактически показан  (т.е. до того, как произойдет событие  shown.bs.collapse ).
 .collapse ('скрыть') 
 Скрывает складной элемент.  Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента  (т.е. до того, как произойдет событие  hidden.bs.collapse ).
 События 
 Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.
 Показано
 Тип события Описание
 показать.bs.collapse Это событие запускается немедленно при вызове метода экземпляра  show .
.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (ожидает завершения переходов CSS).
 hide.bs.collapse Это событие запускается сразу после вызова метода  hide .
 скрыто.bs.collapse Это событие вызывается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})  
 Компонент слайд-шоу для циклического просмотра элементов, например карусели.  Вложенные карусели не поддерживаются. 
 Примеры 
    
 Проблема доступности 
 Компонент карусели обычно не соответствует стандартам доступности.Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента.
 Анимация перехода не поддерживается в Internet Explorer 8 и 9 
 Bootstrap использует исключительно CSS3 для своей анимации, но Internet Explorer 8 и 9 не поддерживает необходимые свойства CSS. Таким образом, при использовании этих браузеров анимация перехода между слайдами отсутствует. Мы намеренно решили не включать в переходы резервные варианты на основе jQuery.
 Требуется начальный активный элемент 
 Модель .Активный класс  нужно добавить на один из слайдов. В противном случае карусель не будет видна.
 Глификоны не нужны 
 Классы  .glyphicon .glyphicon-chevron-left  и  .glyphicon .glyphicon-chevron-right  не обязательно нужны для элементов управления. Bootstrap предоставляет  .icon-prev  и  .icon-next  как простые альтернативы Unicode.
 Дополнительные подписи 
 Легко добавляйте подписи к слайдам с помощью .carousel-caption  в любом элементе  .item . Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.
 Этикетка первого слайда 
 Nulla vitae elit libero, pharetra augue mollis interdum.
 Этикетка второго слайда 
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.
 Этикетка третьего слайда 
 Praesentmodo cursus magna, vel scelerisque nisl consctetur.
 Предыдущий
 Следующий
  

  ...
  

    
 ... 

    
 ... 

  


  
 Использование 
 Несколько каруселей 
 Карусели требуют использования  id  на самом внешнем контейнере (.карусель ) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или изменении идентификатора  карусели  обязательно обновите соответствующие элементы управления.
 Через атрибуты данных 
 Используйте атрибуты данных, чтобы легко управлять положением карусели.  data-slide  принимает ключевые слова  prev  или  next , которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте  data-slide-to , чтобы передать необработанный индекс слайда в карусель  data-slide-to = "2" , который сдвигает положение слайда на конкретный индекс, начиная с  0 .
 Атрибут  data-ride = "carousel"  используется для обозначения карусели как анимированной, начиная с загрузки страницы.  Не может использоваться в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели. 
 Через JavaScript 
 Вызов карусели вручную с помощью:
  $ ('. Carousel'). Carousel ()  
 Опции 
 Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к  data- , как в  data-interval = "" .
 Имя тип по умолчанию описание
 интервал номер 5000 Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
 пауза строка | null «парение» Если установлено значение  "hover" , приостанавливает цикл карусели на  mouseenter  и возобновляет цикл карусели на  mouseleave .Если установлено значение  null , при наведении курсора на карусель она не будет приостановлена.
 обертка логический правда Должна ли карусель работать непрерывно или иметь жесткие остановки.
 клавиатура логический правда Должна ли карусель реагировать на события клавиатуры.
 Методы 
.карусель (опции) 
 Инициализирует карусель с дополнительным объектом options   и начинает циклический просмотр элементов.
  $ ('. Carousel'). Carousel ({
  интервал: 2000
})  
 .carousel ('цикл') 
 Перебирает элементы карусели слева направо.
. Карусель ('пауза') 
 Запрещает карусели циклически перемещаться по элементам.
. Карусель (номер) 
 Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву).
 .carousel ('предыдущая') 
 Переход к предыдущему элементу.
 .carousel ('next') 
 Переход к следующему элементу.
 События 
 Класс карусели
 Bootstrap предоставляет два события для подключения к функциональности карусели.
 Оба события имеют следующие дополнительные свойства:
  •   направление : направление, в котором движется карусель ( «влево»  или  «вправо» ).
  •   relatedTarget : элемент DOM, который вставляется на место в качестве активного элемента.
 Все события карусели запускаются в самой карусели (то есть в 
 ).
 Тип события Описание
 слайд.б. карусель Это событие запускается немедленно при вызове метода экземпляра  slide .
 сдвинуто.bs.carousel Это событие вызывается, когда карусель завершает переход между слайдами.
  $ ('# myCarousel'). On ('slide.bs.carousel', function () {
  // сделай что-нибудь…
})  
 Пример 
 Плагин аффикса переключает положение : фиксировано;  включается и выключается, имитируя эффект, обнаруженный с помощью позиции : липкое; . Поднавигация справа - это живая демонстрация плагина аффиксов.
 Использование 
 Используйте подключаемый модуль аффиксов через атрибуты данных или вручную с помощью собственного JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования и ширины вашего прикрепленного контента. 
 Примечание. Не используйте подключаемый модуль аффикса к элементу, содержащемуся в относительно позиционированном элементе, таком как вытягиваемый или выталкиваемый столбец, из-за ошибки рендеринга Safari.
 Позиционирование через CSS 
 Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние:  .affix ,  .affix-top  и  .affix-bottom .Вы должны предоставить стили, за исключением  position: fixed;  на  .affix , чтобы эти классы самостоятельно (независимо от этого плагина) обрабатывали фактические позиции.
 Вот как работает плагин affix:
  1.  Для начала плагин добавляет  .affix-top , чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется.
  2.  Прокрутка мимо элемента, который вы хотите прикрепить, должна вызвать фактическое прикрепление.Здесь  .affix  заменяет  .affix-top  и устанавливает  position: fixed;  (предоставляется CSS Bootstrap).
  3.  Если задано нижнее смещение, прокрутка мимо него должна заменить  .affix  на  .affix-bottom . Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае добавьте  position: absolute;  при необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда.
 Выполните указанные выше действия, чтобы настроить CSS для любого из указанных ниже вариантов использования.
 Через атрибуты данных 
 Чтобы легко добавить поведение аффикса к любому элементу, просто добавьте  data-spy = "affix"  к элементу, за которым вы хотите следить. Используйте смещения, чтобы определить, когда следует переключать закрепление элемента.
  

  ...

  
 Через JavaScript 
 Вызов плагина affix через JavaScript:
  $ ('# myAffix').affix ({
  компенсировать: {
    верх: 100,
    bottom: function () {
      return (this.bottom = $ ('. footer'). outerHeight (true))
    }
  }
})  
 Опции 
 Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к  data- , как в  data-offset-top = "200" .
 Номер
 Селектор
 Имя тип по умолчанию описание
 смещение | функция | объект 10 Пикселей для смещения от экрана при вычислении положения прокрутки.Если указано одно число, смещение будет применяться как в верхнем, так и в нижнем направлениях. Чтобы обеспечить уникальное смещение снизу и сверху, просто укажите объект  offset: {top: 10}  или  offset: {top: 10, bottom: 5} . Используйте функцию, когда вам нужно динамически вычислить смещение.
 цель | узел | Элемент jQuery окно   объект Задает целевой элемент аффикса.
 Методы 
. Крепление (опции) 
 Активирует ваш контент как прикрепленный контент. Принимает необязательные параметры , объект .
  $ ('# myAffix'). Affix ({
  смещение: 15
})  
 .affix ('checkPosition') 
 Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов.  .affix ,  .affix-top  и .affix-bottom  классы добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы гарантировать правильное позиционирование прикрепленного содержимого.
  $ ('# myAffix'). Affix ('checkPosition')  
 События 
 Плагин аффиксов
 Bootstrap предоставляет несколько событий для подключения к функциям аффиксов.
 Тип события Описание
 аффикс.bs.affix Это событие запускается непосредственно перед прикреплением элемента.
 прикрепленный аффикс Это событие вызывается после прикрепления элемента.
 affix-top.bs.affix Это событие запускается непосредственно перед прикреплением элемента вверху.
 прикрепленный верхний аффикс Это событие вызывается после того, как элемент был прикреплен сверху.
 крепление-дно аффикс Это событие запускается непосредственно перед прикреплением элемента снизу.
 прикрепленное нижнее крепление Это событие вызывается после того, как элемент был прикреплен снизу.
 Необработанная разметка HTML для Twitter Bootstrap · GitHub 
 Необработанная разметка формы начальной загрузки Twitter 
 Это необработанная разметка всех элементов формы, извлеченных из  Страница формы Twitter Bootstrap 
 Колодец 
 <форма>
 
 
  Пример текста справки на уровне блока.
 <метка>
  Проверьте меня
 
 
 Поиск 
 <форма>
 
 
 Встроенный поиск 
 <форма>
 
 
 <метка>
  Запомнить меня
 
 
 Горизонтальные формы 
 <форма>
 
 
 
  Здесь какое-то значение 
 
 
 
 <метка>
 
 Это отключенный флажок
 
 
 
  Что-то пошло не так 
 
 
  Исправьте ошибку 
 
 
  Woohoo! 
 
 <выбрать>
 
  Woohoo! 
 
 
 <форма>
 
 
 
 
 <выбрать>
 
 <выбрать>
 
 <выбрать>
 
 Используйте тот же .span *  из системы сеток для размеров ввода.
 
 
 
 
 Вы также можете использовать статические классы, которые не сопоставляются с сеткой, не адаптируются к адаптивным стилям CSS или не учитывают различные типы элементов управления (например,  input  vs. выберите ).
 
  @  
 Вот справочный текст
 
  .00 
  Дополнительная справка 
 
  $   .00 
 
  
 
   
 
 <метка>
  1
 
 <метка>
  2
 
 <метка>
  3
 
 
 <метка>
 
 Вариант первый - это то и это & ​​mdash; обязательно укажите, почему это здорово
 
 <метка>
 
 Второй вариант также можно проверить и включить в результаты формы
 
 <метка>
 
 Вариант три можно - да, как вы уже догадались - также можно проверить и включить в результаты формы
 
  Примечание.  Этикетки окружают все параметры, чтобы области кликов были намного больше, а форма была удобнее в использовании.
 
 <метка>
 
 Вариант первый - это то и это & ​​mdash; обязательно укажите, почему это здорово
 
 <метка>
 
 Второй вариант может быть другим, и его выбор отменяет выбор первого варианта
 
 
 
 Как работает сетка Bootstrap 4.Что такое Flexbox Powered… | Кэрол Скелли 
 Я отвечу на подобные вопросы Grid через некоторое время. Но,  первый  Я хочу сделать шаг назад, чтобы объяснить кое-что  очень важное  об использовании сетки.
 Поверьте мне. Понимание «правил сетки» сэкономит вам много времени и нервов.  Прочтите  внимательно…
 ___________________________________________________________________
  1.  Столбцы   должны быть   непосредственным  дочерним элементом строки.
  2.  Строки   только   используются для столбцов,  больше ничего .
  3.  Ряды должны быть помещены в контейнер.
 Эти правила  очень   ВАЖНО .  Строки и столбцы  всегда  работают вместе , и у вас не должно быть  ни одного без другого .
 Плохие вещи произойдут, если вы не будете следовать этим 3 простым правилам сетки,  ровно . Я ответил на бесчисленное количество вопросов Bootstrap о Stack Overflow, просто применив эти правила.Сначала это может показаться сложным, но это действительно легко, если вы поймете, как работает Grid.
 ___________________________________________________________________
 В базовом примере вы могли заметить, что я использовал  .container , чтобы обернуть  .row . Контейнер   - это корневой (также известный как верхний уровень, самый внешний) элемент Bootstrap Grid.
  container "> 
  row "> 
  col "> Я доволен сеткой!

< / div>

Контейнер может использоваться для хранения любых элементов и содержимого. Это , а не , используемый только для строк и столбцов сетки. Например, это вполне допустимая разметка Bootstrap:

  
  
  
 My Heading 
  
  
  
 
 Я доволен сеткой!

Не игнорировать контейнер.

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

FYI: Окно просмотра - видимая область внутри окна браузера.

Bootstrap 4 имеет 2 типа контейнеров . В своих примерах я использовал .container , но есть также полноразмерный .Контейнер-жидкость . Вы можете использовать один:

1 - Контейнер фиксированной ширины для центрирования макета по центру:

  container ">

2 - Контейнер полной ширины для макет, занимающий всю ширину:

  container-fluid ">

. .container быстро масштабируется по ширине (по мере уменьшения ширины экрана), так что в конечном итоге он становится заполненным -ширина как. контейнер для жидкости на небольших устройствах.

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

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

Важно , что Контейнер используется для хранения строк сетки ( .row ).

Строки имеют отрицательное левое / правое поле -15 пикселей. Контейнерный отступ в 15 пикселей используется для противодействия отрицательным полям строки. Это сделано для того, чтобы содержимое было равномерно выровнено по краям макета. Если вы не поместите строку в контейнер, строка выйдет за пределы своего контейнера, что приведет к нежелательной горизонтальной прокрутке .

Начало работы с Bootstrap / HTML и CSS / Языки разметки / Языки программирования / Статьи

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

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

Что такое Bootstrap

Созданный на окраине Твиттера, он сначала использовался для их собственных продуктов и назывался «Twitter Bootstrap», но позже был выпущен в мир.Вот почему слово «Твиттер» было опущено.

Bootstrap - это фреймворк CSS / HTML для создания веб-сайтов. Другими словами, это набор инструментов для создания макетов. Он имеет ряд преимуществ, которые делают Bootstrap самым популярным в своем роде.

Преимущества Bootstrap:

  1. Скорость работы - с множеством готовых элементов создание макетов с помощью Bootstrap занимает гораздо меньше времени.
  2. Гибкость - за счет динамически настраиваемой сетки добавление новых элементов не нарушает общую структуру.
  3. Легко настраиваемый - редактирование стилей осуществляется путем создания новых CSS-правил, которые выполняются вместо стандартных. Кроме того, вам не нужно использовать такие атрибуты, как ! Important .
  4. Большое количество шаблонов - отдельная тема в этой статье, о которой будет сказано ниже.
  5. Огромное сообщество сторонников / разработчиков.
  6. Широкий спектр использования - Bootstrap используется при создании тем практически для любой CMS (Magento, Joomla, WordPress или любой другой), включая приложения с одной целевой страницей.
  7. Отличная официальная документация.

Особенно популярен Bootstrap, когда нужно создавать так называемые «лендинги» (лендинги).

Шаблоны начальной загрузки

Шаблоны в начальной загрузке позволяют изменять уже измененные элементы в соответствии с вашими потребностями. Многие разработчики предлагают собственные шаблоны (платные и бесплатные).

Подключить шаблоны Bootstrap очень просто: после подключения Bootstrap просто добавьте вызов своего шаблона CSS.

Содержимое фреймворка

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

Следует отметить, что Bootstrap представляет собой, так сказать, набор из трех фреймворков: CSS / HTML, JS-компоненты и иконочный шрифт.

Сетка

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

Например, класс «col-xs-» будет использоваться для мобильных телефонов с шириной экрана менее 768 пикселей, а «col-lg-» - для любого устройства с шириной экрана более 1170 пикселей. Bootstrap делит ширину родительского блока на 12 равных блоков, которые мы можем использовать по своему усмотрению. Некоторые блоки можно объединить, чтобы получить, например, три столбца: два 25% «col-lg-3» и один 50% «col-lg-6».

Визуально страницу можно представить любым желаемым образом:

Если вы выйдете за пределы 12 блоков, остальные будут отображаться друг под другом, так что будьте осторожны.Вот пример блоков, которые будут отображаться одинаково на всех устройствах. Разделим экран на три равные части:

 


 Первый столбец 


 Второй столбец 


 Третий столбец

Typography

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

Большое внимание уделяется семантике: основной заголовок может быть отформатирован как тег

заголовок

, но также как

заголовок

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

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

Предупреждения

Любое предупреждение может быть представлено в 4 стандартных форматах: успех, информация, предупреждение, опасность. Вот как они выглядят:

Для форматирования такого сообщения достаточно добавить два класса к желаемому объекту:

 
 Молодец! Вы успешно прочитали это важное предупреждающее сообщение. 


 Внимание! Это предупреждение требует вашего внимания, но оно не очень важно.


 Внимание! Лучше проверьте себя, вы не слишком хорошо выглядите. 


 Вот это да! Измените кое-что и попробуйте отправить еще раз.

Также Bootstrap позволяет форматировать диалоговые окна, всплывающие окна и всплывающие подсказки.

Навигация

Навигация часто является опорой, из-за которой создание макета скользит вниз. Грамотно составить верстку, спроектировать и заставить элементы навигации работать правильно, обычно является одной из самых сложных задач верстки.Особое внимание было уделено загрузочной навигации: фреймворк содержит элементы управления для вкладок, разбивки на страницы, боковые панели, хлебные крошки, главное меню, панель инструментов и т.д. , достаточно добавить класс "navbar-fixed".

Пагинация выглядит так:

Требуется следующий код:

Как видите, ничего сложного.

Формы

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

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

Кнопки

Здесь все просто, для настройки кнопки она добавляется в нужный набор классов.Вот только несколько типов кнопок:

Вот код:

Таблицы

Старые добрые таблицы создаются путем добавления класса "table".И мы получим очень аккуратную таблицу:

Компоненты JavaScript

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

Для работы с этими компонентами требуется jQuery; не забудьте подключить его к bootstrap.js .

Иконочный шрифт

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

Вы можете выбрать один из 200 значков и добавить его на сайт следующим образом:

Как подключить Bootstrap

Посетите официальный сайт и отметьте элементы, которые вам нужны для работы. При необходимости дополнительные функции могут быть добавлены или удалены. Выбрав «Скомпилировать и скачать», получите архив и распакуйте его.

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

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

Конструктор форм Rails для разметки Bootstrap 4. : rails

Привет, парни и девушки,

Я потратил пару дней на создание этого: https://github.com/comfy/comfy-bootstrap-form

Найдите минутку, чтобы пролистать README

Если вы не знаком с конструкторами форм, это в основном помощник, который позволяет использовать этот код:

  <% = bootstrap_form_with model: @user do | form | %>
  <% = форма.email_field: адрес электронной почты%>
  <% = form.submit%>
<% конец%>

Для преобразования в это:

Он обертывает все элементы формы разметкой, которая правильно отображается с помощью Bootstrap 4.И в нем есть вся логика, которая обрабатывает отображение ошибок и тому подобное.

Я опубликовал его как 4.0.0.beta2 , так как я все еще хочу очистить код, чтобы избавиться от этого неудобного Ремонтопригодность: D . Но в остальном он функционален, и я успешно интегрировался с CMS в качестве его зависимости: https://github.com/comfy/comfortable-mexican-sofa

Для ясности, это хард-форк https://github.com/bootstrap -ruby / bootstrap_form. Я начал активно вносить свой вклад в это репо, но со временем стало ясно, что форк будет проще, поскольку я могу удалить все, что мне не нравится, и заставить все это работать до того, как выйдет Bootstrap 5.В итоге получилось полностью переписать.

Если вы запускаете новое приложение Rails 5.2 с Bootstrap 4, которому нужны формы повсюду, этот драгоценный камень сэкономит вам массу времени. (Довольно тривиально заставить его поддерживать Rails 5.0 и 5.1, но я не хочу беспокоиться, если нет спроса) И он также поддерживает Rails 5.0 и 5.1.

Дайте мне знать, что вы думаете,

Ура

de.agilecoders.wicket.extensions.markup.html.bootstrap.form.select Class Hierarchy (bootstrap-extensions 0.10.0 API)

de.agilecoders.wicket.extensions.markup.html.bootstrap.form.select Class Hierarchy (bootstrap-extensions 0.10.0 API)

В вашем браузере отключен JavaScript.

Иерархия классов

  • java.lang.Object
    • org.apache.wicket.behavior.Behavior (реализует org.apache.wicket.util.io.IClusterable, org.apache.wicket.IComponentAwareEventSink, org.apache.wicket.markup.html.IComponentAorwareHeader)
    • de.agilecoders.wicket.jquery.CombinableConfig (реализует de.agilecoders.wicket.jquery.Config)
      • de.agilecoders.wicket.jquery.AbstractConfig
    • org.apache.wicket.Component (реализует org.apache.wicket.util.io.IClusterable, org.apache.wicket.IConverterLocator, org.apache.wicket.event.IEventSink, org.apache.wicket.event.IEventSource, org.apache.wicket.markup.html.IHeaderContributor, org.apache.wicket.util.IHierarchical, org.apache.wicket.request.component.IRequestableComponent)
      • орг.apache.wicket.MarkupContainer (реализует java.lang.Iterable)
        • org.apache.wicket.markup.html.WebMarkupContainer
          • org.apache.wicket.markup.html.form.LabeledWebMarkupContainer (реализует org.apache.wicket.markup.html.form.ILabelProvider)
            • org.apache.wicket.markup.html.form.FormComponent (реализует org.apache.wicket.markup.html.form.IFormModelUpdateListener, org.apache.wicket.markup.html.form.IFormVisitor. apache.wicket.IGenericComponent)
              • org.apache.wicket.markup.html.form.AbstractChoice
                • org.apache.wicket.markup.html.form.AbstractSingleSelectChoice
                  • org.apache.wicket.markup.html.form.DropDownChoice (реализует org.apache.wicket.markup.html.form.IOnChangeListener)
                    • de.agilecoders.wicket.extensions.markup.html.bootstrap.form.select.BootstrapSelect
                • org.apache.wicket.markup.html.form.ListMultipleChoice
    • org.apache.wicket.request.resource.ResourceReference (реализует org.apache.wicket.util.io.IClusterable)
      • org.apache.wicket.request.resource.PackageResourceReference
        • org.apache.wicket.request.resource.CssResourceReference
        • org.apache.wicket.request.resource.JavaScriptResourceReference
          • org.apache.wicket.resource.JQueryPluginResourceReference

Авторские права © AgileCoders, 2011–2015.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *