Сетка бутстрап 3: Bootstrap 3 — Система сеток

Содержание

Bootstrap 3 - Система сеток

Система сеток Twitter Bootstrap 3 - это быстрый и легкий путь для создания макета сайта.

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

Контейнер с фиксированной шириной (<div></div>) имеет строго определенную ширину, которая изменяется при изменении ширины рабочей области окна браузера и ориентируется в горизонтальном направлении по центру, с помощью свойств margin-left:auto и margin-right:auto. Также, контейнер задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

Ширина контейнера (.container) Ширина рабочей области окна браузера
1170px Больше или равна 1200px
970px
Больше или равна 992px и меньше 1200px
750px Больше или равна 768px и меньше 992px
Ширина контейнера равна ширине рабочей области окна браузера Меньше 768px

Контейнер с плавающей шириной (<div></div>) занимает всю ширину окна браузера и задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

Следующим этапом является размещение рядов (блоки div с классом .row) внутри контейнера. Ширина рядов (<div></div>) будет равна ширине контейнера, т.к. данный блок имеет отрицательные внешние отступы слева и справа по 15рх (margin-left:-15px и margin-right:-15px).

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

col-*-* равна одной колонке Bootstrap, а максимальная ширина блока col-*-* равна 12 колонкам Bootstrap.

Например, если мы хотим создать в ряду 3 блока с одинаковой шириной, то нам необходимо установить ширину этих блоков равным 4 колонкам Bootstrap (<div>...</div>).

Например: Рассчитать ширину блока в пикселях можно следующим образом: 
[Ширина блока] = [Ширина колонки Bootstrap]*[Количество колонок, из которых состоит блок], 
где: [Ширина колонки Bootstrap] = [Ширина ряда (row)] / 12.

[Ширина колонки Bootstrap] = 970 / 12 = 81px.
[Ширина блока] = 81 * 4 = 324px.

Для создания макетов веб-страниц под различные устройства (смартфоны, планшеты, ноутбуки и персональные компьютеры) необходимо воспользоваться предопределенными классами сеток Twitter Bootstrap 3.

Например, вы можете использовать класс .col-xs-* для создания сетки для устройств с маленьким экраном, таких как смартфоны. Точно так же класс .

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

Следующая таблица обобщает некоторые ключевые особенности новой системы сеток Bootstrap 3.

Особенности системы сеток Bootstrap 3 Крохотная ширина экрана
Смартфоны
(<768px)
Маленькая ширина экрана
Планшеты
(≥768px и <992)
Средняя ширина экрана
Ноутбуки
(≥992px и <1200px)
Большая ширина экрана
Компьютеры
(≥1200px)
Ширина контейнера
фиксированного
макета
(.container)
Равна ширине рабочей области окна браузера 750px 970px 1170px
Ширина контейнера плавающего макета (.container-fluid
)
Равна ширине рабочей области окна браузера
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Максимальная ширина колонки Bootstrap для контейнера с фиксированной шириной (.container) Ширине рабочей области окна браузера / 12 ~62px (750px / 12) ~81px (970px / 12) ~97px (1170px / 12)
Максимальная ширина колонки Bootstrap для контейнера с плавающей шириной (.container-fluid) Ширине рабочей области окна браузера / 12
Внутренние отступы для содержимого блоков, состоящих из колонок Bootstrap 15px с левой и правой стороны блока

Примечание:

Если вы применяете класс .col-sm-* к блоку, то это повлияет не только на разметку для устройств, с маленьким экраном (планшеты), но также на устройства со средним и большим экранами, если Вы не указали классы 

.col-md-* и.col-lg-*. Аналогично, класс .col-md-* будет влиять на разметку не только для устройств со средним экраном, но и на устройства с большим экраном, если класс .col-lg-* не указан.

Создание макета сайта с помощью системы сеток Twitter Bootstrap 3

С новой системой сеток Twitter Bootstrap 3 вы можете легко контролировать отображение макета сайта на различных устройствах, которые имеют различную ширину экрана.

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

Макет сайта для устройства с большим экраном (width >=1200px) состоит из трёх блоков, расположенных горизонтально, которые занимают всю ширину контейнера. Первый блок имеет ширину равную половине ширины контейнера (

col-lg-6), второй блок занимает одну четвертую от ширины контейнера (col-lg-3), и третий блок тоже занимает одну четвертую от ширины контейнера (col-lg-3).


<div>
  <div>
    <div>Блок №1</div>
    <div>Блок №2</div>
    <div>Блок №3</div>
  </div>
</div>

Макет сайта для устройства со средним экраном (width >=992px и <1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом .clearfix, который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс .visible-md-block

. Ширина 3 блока равна ширине контейнера (col-md-12).

 
<div>
  <div>
    <div>Блок №1</div>
    <div>Блок №2</div>
    <div></div>
    <div>Блок №3</div>
  </div>
</div>

 

Аналогичным образом настроим макет для остальных устройств. Макет сайта для устройства с маленьким экраном (width >=768px и <992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.

<div>
  <div>
    <div>Блок №1</div>
    <div>Блок №2</div>
    <div></div>
    <div>Блок №3</div>
  </div>
</div>
 

Макет сайта для устройства с крохотным экраном (width <768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.

<div>
  <div>
    <div>
Блок №1</div> <div>
Блок №2</div> <div></div> <div>
Блок №3</div> </div> </div>
 

Примечание: Для устройств с очень маленькой шириной экрана (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.

<div>
  <div>
    <div>Блок №1
</div> <div>Блок №2
</div> <div></div> <div>Блок №3
</div> </div> </div>
 

Twitter Bootstrap 3 содержит адаптивные служебные классы, которые позволяют включить отображение элементов только на определённых устройствах, размеры экранов которых попадают в соответствующий диапазон.

В Twitter Bootstrap 3.2 добавлена поддержка свойства CSS display для класса .visible. Новая возможность позволяет задавать видимость таким элементам, как inlineblock и inline-block

 на различных экранах. Например, класс.visible-md-block включает видимость элемента, если он является блочным (block) и текущая ширина рабочей области окна браузера соответствует диапазону md (width >=992px и <1200px).

Класс

Описание
.visible-xs-* Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы.
.visible-sm-* Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы.
.visible-md-* Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы.
.visible-lg-* Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы.

Примечание: Вы также можете совместно использовать эти классы для того, чтобы элементы были видны на нескольких устройствах. Например, вы можете применить класс .visible-xs-* и .visible-md-* на любой блок, чтобы сделать его видимым на устройствах и с очень маленьким и с средним экраном.

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

Класс Описание
.hidden-xs Скрыть эти элементы только для устройств, имеющих экран шириной менее 768px. На других устройствах эти элементы видимы.
.hidden-sm Скрыть эти элементы только для устройств, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше 992px. На других устройствах эти элементы видимы.
.hidden-md
Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы видимы.
.hidden-lg Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы видимы.

Совет: Вы также можете совместно использовать эти классы, чтобы блоки не были видны на нескольких устройствах. Например, вы можете применить классы .hidden-xs и .hidden-md к блоку на веб-странице, чтобы сделать этот блок невидимым на устройствах с  очень маленьким и средним экраном.

<p>
  Это параграф будет виден только на смартфонах.
</p>
<p>
  Это параграф будет виден только на планшетах.
</p>
<p>
  Это параграф будет виден только на устройствах со средним размером экрана.
</p>
<p>
  Это параграф будет виден только на устройствах с большим экраном.
</p>
 

Подобно обычным адаптивным классам Twitter Bootstrap 3, можно использовать следующие служебные классы, чтобы отображать или скрывать определенные блоки при печати веб-страниц.

Класс Описание
.visible-print-block Позволяет скрыть отображение блочного элемента в браузере. При печати этот элемент будет виден.
.visible-print-inline Позволяет скрыть строчный элемент в браузере. При печати этот элемент будет виден.
.visible-print-inline-block Позволяет скрыть отображение элемента в браузере, у которого свойство display равно «inline-block» . При печати этот элемент будет виден.
.hidden-print Скрыть элемент при печати страницы. При отображении в браузере этот элемент будет виден.

Bootstrap 3 - Оформление HTML таблиц

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Что такое Bootstrap и зачем он нужен?

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Bootstrap 4 - Управление margin и padding отступами

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Подключение фреймворка Bootstrap к сайту

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap
  • PHP

Начало работы · Bootstrap

Bootstrap (в настоящее время v3.3.7) имеет несколько простых способов быстро начать работу, каждый из которых подходит для разных уровней навыков и вариантов использования. Прочтите, чтобы узнать, что подходит именно вам.

Bootstrap

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

Загрузить Bootstrap

Исходный код

Source Less, файлы JavaScript и шрифтов, а также наши документы. Требуется компилятор Less и некоторая настройка.

Загрузить исходный код

Bootstrap CDN

Ребята из MaxCDN любезно предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти ссылки Bootstrap CDN.

  





      
    
  
  
    

Привет, мир!

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

Получите исходный код для каждого примера ниже, загрузив репозиторий Bootstrap.Примеры можно найти в каталоге docs / examples / .

Использование фреймворка

Стартовый шаблон

Только основы: скомпилированные CSS и JavaScript вместе с контейнером.

Тема Bootstrap

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

Сетки

Несколько примеров макетов сетки со всеми четырьмя уровнями, вложенностью и т. Д.

Jumbotron

Создайте вокруг jumbotron с навигационной панелью и некоторыми основными столбцами сетки.

Узкий jumbotron

Создайте более настраиваемую страницу, сузив контейнер и jumbotron по умолчанию.

Панель навигации в действии

Панель навигации

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

Статическая верхняя панель навигации

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

Фиксированная панель навигации

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

Пользовательские компоненты

.

CSS · Bootstrap 3.0.3 Документация

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

HTML5 doctype

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

  

  ...
  

Первый мобильный

В Bootstrap 2 мы добавили дополнительные стили, удобные для мобильных устройств, для ключевых аспектов платформы.В Bootstrap 3 мы с самого начала переписали проект, чтобы он был удобен для мобильных устройств. Вместо добавления необязательных мобильных стилей они встроены прямо в ядро. Фактически, Bootstrap сначала является мобильным . Стили Mobile first можно найти во всей библиотеке, а не в отдельных файлах.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте метатег области просмотра к вашему .

    

Вы можете отключить возможности масштабирования на мобильных устройствах, добавив user-scalable = no в метатег области просмотра. Это отключает масштабирование, что означает, что пользователи могут только прокручивать, и в результате ваш сайт будет больше похож на собственное приложение. В целом мы не рекомендуем это на всех сайтах, поэтому будьте осторожны!

    

Адаптивные изображения

Образы в Bootstrap 3 можно сделать адаптивными с помощью добавления .img-responseive класс. Это применимо для max-width: 100%; и высота: авто; к изображению, чтобы оно хорошо масштабировалось до родительского элемента.

  Адаптивное изображение  

Типографика и ссылки

Bootstrap устанавливает базовые глобальные стили отображения, оформления и ссылок. В частности, мы:

  • Установить цвет фона: #fff; на корпусе
  • Используйте атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве нашей типографской базы
  • Установите глобальный цвет ссылки через @ link-color и примените подчеркивание ссылок только на : hover

Эти стили можно найти в строительных лесах .менее .

Нормализовать

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

Контейнеры

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

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

  
...

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

Введение

Системы

Grid используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент.Вот как работает сетка Bootstrap:

  • Строки должны быть помещены в контейнер . для надлежащего выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. LESS-миксины также могут использоваться для более семантических макетов.
  • Столбцы создают промежутки (промежутки между содержимым столбца) через заполнение . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
  • Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4 .

Посмотрите примеры применения этих принципов к вашему коду.

Сетки и макеты во всю ширину

Люди, которые хотят создавать полностью гибкие макеты (то есть ваш сайт растягивается на всю ширину области просмотра), должны заключить свое содержимое сетки в содержащий элемент с отступом : 0 15px; для смещения поля : 0 -15 пикселей; используется на .ряд с.

Медиа-запросы

Мы используем следующие медиа-запросы в наших файлах LESS для создания ключевых точек останова в нашей сеточной системе.

  / * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
/ * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /

/ * Маленькие устройства (планшеты, 768 пикселей и выше) * /
@media (min-width: @ screen-sm-min) {...}

/ * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
@media (min-width: @ screen-md-min) {...}

/ * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
@media (min-width: @ screen-lg-min) {...}  

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

  @media (max-width: @ screen-xs-max) {...}
@media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}  

Параметры сети

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

Очень маленькие устройства Телефоны (<768 пикселей) Маленькие устройства Таблетки (≥768 пикселей) Средние устройства Настольные компьютеры (≥992px) Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сетки По горизонтали всегда Свернут для начала, горизонтально над контрольными точками
Макс.ширина контейнера Нет (авто) 750px 970px 1170px
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Количество столбцов
.

Переход на v3.x · Bootstrap

Bootstrap 3 не имеет обратной совместимости с v2.x. Используйте этот раздел как общее руководство по обновлению с v2.x до v3.0. Для более широкого обзора см. Что нового в объявлении о выпуске версии 3.0.

Основные изменения класса

В этой таблице показаны изменения стилей между версиями v2.x и v3.0.

Bootstrap 2.x Bootstrap 3.0
.рядная жидкость . Строка
. Пролет * .col-md- *
. Смещение * .col-md-offset- *
. Марка .navbar-brand
.navbar .nav .navbar-nav
.nav-развал .navbar-развал
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.герой-юнит .джумботрон
. Значок * .glyphicon .glyphicon- *
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-большой .btn-lg
. Оповещение .alert .alert-warning
.alert-error . Предупреждение-опасность
.видимый телефон .visible-xs
. Видимый планшет .visible-sm
. Видимый рабочий стол Разделить на .visible-md .visible-lg
. Скрытый телефон .hidden-xs
.скрытый планшет .hidden-sm
. Скрытый рабочий стол Разделить на .hidden-md .hidden-lg
. Уровень входного блока .form-control
. Контрольная группа .form-группа
.control-group.warning .control-group.error .control-group.success .form-group.has- *
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
. Ввод-добавление . Ввод-добавление . Группа ввода
.дополнение . Вход-группа-аддон
.img-поляроид .img-thumbnail
ул. Без стиля . Список без стиля
ul.inline .list-встроенный
.приглушенный . Без звука
. Этикетка .label .label-default
. Важный ярлык . Этикетка-опасность
.text-error . Текст-опасность
.table .error . Таблица. Опасность
бар . Прогресс-бар
. Бар- * .progress-bar- *
. Аккордеон .панель-группа
.аккордеон-группа .panel .panel-default
. Аккордеон-товарная позиция . Панель - заголовок
.кордеон-корпус .панель-развал
. Аккордеон внутренний . Панель-корпус

Что нового

Мы добавили новые элементы и изменили некоторые существующие.Вот новые или обновленные стили.

.
Элемент Описание
Панели .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Список групп .list-group .list-group-item .list-group-item-text .list-group-item-heading
Глификоны .glyphicon
Джамботрон .джумботрон
Очень маленькая сетка (<768 пикселей) .col-xs- *
Маленькая сетка (≥768 пикселей) .col-sm- *
Средняя сетка (≥992 пикселей) .col-md- *
Большая сетка (≥1200 пикселей) .col-lg- *
Адаптивные служебные классы (≥1200 пикселей) .visible-LG .hidden-LG
Смещения .col-sm-offset- * .col-md-offset- * .col-lg-offset- *
Нажать .col-sm-push- * .col-md-push- * .col-lg-push- *
Тянуть .col-sm-pull- * .col-md-pull- * .col-lg-pull- *
Входные размеры высоты .ввод-sm . ввод-lg
Группы ввода .input-group .input-group-addon .input-group-btn
Элементы управления формой .form-control .form-group
Размер группы кнопок .btn-group-xs .btn-group-sm .btn-group-lg
Текст навигационной панели .navbar-text
Заголовок навигационной панели .navbar-заголовок
Таблетки / таблетки по ширине . Навигационное выравнивание
Адаптивные изображения .img-отзывчивый
Строки контекстной таблицы . Успех . Опасность . Предупреждение .активный . Информация
Контекстные панели .panel-success .panel-dangerous .panel-warning .panel-info
Модальный .модальный диалог .modal-контент
Уменьшенное изображение .img-thumbnail
Размеры колодцев .well-sm .well-lg
Ссылки для предупреждений .alert-ссылка

Что удалено

Следующие элементы были удалены или изменены в v3.0.

Элемент Удалено из 2.x 3.0 эквивалент
Действия формы .форм-действия НЕТ
Форма поиска .form-search НЕТ
Группа форм с информацией .control-group.info НЕТ
Входные размеры фиксированной ширины .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Используйте вместо него .form-control и сетку.
Ввод формы уровня блока .уровень входного блока Нет прямого эквивалента, но элементы управления формами аналогичны.
Перевернутые пуговицы .btn-инверс НЕТ
Ряд жидкости . Проточная жидкость .row (без фиксированной сетки)
Контроллер обертки .органы управления НЕТ
Управляющий ряд . Контрольный ряд .row или .form-group
Внутренняя панель навигации .navbar-внутренний НЕТ
Разделители вертикальные Navbar .navbar.делитель вертикальный НЕТ
Выпадающее подменю . Dropdown-submenu НЕТ
Выравнивание выступов .tabs-слева .tabs-справа .tabs-снизу НЕТ
Таблетки на основе таблеток .содержимое таблетки .tab-content
Панель вкладок на основе таблеток . Таблетка . Панель
Nav списки .nav-список .nav-заголовок Нет прямого эквивалента, но группы списков и .panel-group похожи.
Встроенная справка для элементов управления формой .встроенная помощь Точного эквивалента нет, но .help-block аналогичен.
Цвета прогресса без шкалы .progress-info .progress-success .progress-warning .progress-dangerous Используйте вместо .progress-bar- * .progress-bar .

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

Другие изменения в v3.0 не сразу заметны. Базовые классы, ключевые стили и поведение были скорректированы для обеспечения гибкости и нашего подхода для мобильных первых . Вот неполный список:

  • По умолчанию элементы управления текстовой формой теперь имеют минимальный стиль. Для цветов фокуса и закругленных углов примените класс .form-control к элементу стиля.
  • Элементы управления текстовой формой с примененным классом .form-control теперь по умолчанию имеют ширину 100%.Оберните входные данные внутрь
    , чтобы контролировать ширину ввода.
  • .badge больше не имеет контекстных классов (-success, -primary и т. Д.).
  • .btn также должен использовать .btn-default , чтобы получить кнопку «по умолчанию».
  • .row теперь жидкая.
  • По умолчанию изображения больше не реагируют. Используйте .img-responseive для жидкости размером .
  • Иконы, сейчас .glyphicon , теперь основаны на шрифтах. Для значков также требуется базовый класс и класс значков (например, .glyphicon .glyphicon-asterisk ).
  • Typeahead был удален в пользу использования Twitter Typeahead.
  • Модальная разметка существенно изменилась. Разделы .modal-header , .modal-body и .modal-footer теперь обернуты в .modal-content и .modal-dialog для улучшения мобильного стиля и поведения. Кроме того, вам больше не следует применять .скрыть .modal в разметке.
  • Начиная с версии 3.1.0, HTML-код, загружаемый модальной опцией remote , теперь является injecte
.

Объекты загрузочного носителя


Медиа-объекты

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


Базовый медиа-объект

Пример







John Doe
Lorem ipsum ...




John Doe

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







Попробуй сам "

Объяснение примера

Используйте элемент

с классом .media , чтобы создать контейнер для медиа-объекты.

Используйте класс .media-left для выравнивания носителя объект (изображение) слева или класс .media-right , чтобы выровнять его по правому краю.

Текст, который должен появиться рядом с изображением, помещается в контейнер с w3-codepan "> media-body ".

Дополнительно можно использовать .media-заголовок для заголовки.



Выравнивание по верхнему, среднему или нижнему краю

Медиа-объект также может быть выровнен по верхнему, среднему или нижнему краю с media-top , media-middle или media-bottom class:

Пример







Media Top
Lorem ipsum ...







Медиацентр

Lorem ipsum ...









Медиа внизу

Lorem ipsum ...




Попробуй сам "

Вложенные медиа-объекты

Медиа-объекты также могут быть вложенными (медиа-объект внутри медиа-объекта):


Другой пример вложения


.

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

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