Система сетки в каркасе начальной загрузки делит контейнер на 12 кусочков. При его использовании вы можете перекомпилировать исходный код Less/SASS в соответствии с фактической ситуацией, чтобы изменить значение 12. Как работает сетка в рамках начальной загрузки:
1. Строки данных (.rows) должны быть включены в контейнер, чтобы они могли дать соответствующее выравнивание и прокладку
<div> <div> </div> </div>
2. Вы можете добавить столбцы (.
<div> <div> <div> </div> <div> </div> </div>
3. Конкретное содержание следует размещать в контейнере столбца (.column), и только столбец (.column) может использоваться в качестве прямых дочерних элементов контейнера строки (.row).
4. Создайте расстояние между столбцами, установив внутреннее расстояние (прокладки), а затем компенсируйте влияние заполнения, установив отрицательные значения для первого столбца и последнего стека.
В системе Bootstrap Grid существует отзывчивый эффект, которая имеет четыре типа браузеров (Ultra-Mall Screen, Small Ecren, средний экран и большой экран), а его точка останова составляет 768px, 992px, 1220px
Контейнер (.container), для различных разрешений браузера, имеет разные ширины: автоматический, 760px, 970px, 1170px;
.container {Padding-Right: 15px; Padding-left: 15px; Margin-Right: Auto; Margin-left: Auto; @media (min-width: 768px) {.container {width: 750px;}@media (min-width: 992px) {.container {width: 970; 1200px) {.container {width: 1170px;}Ряд контейнер (.row), делит ряды контейнера на 12 равных частей, то есть столбцы. Каждый столбец имеет левые набивки: 15px и прокладки вправо: 15px; Это также вызывает левое прокладку в первом столбце и правом праве на прокладки в последнем столбце, чтобы занять 30px от среды ширины.
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-md-3, .col-md-3, .col-lg-3, .col-x-4, .col-md-md-md-md-md-3, .col-lg-3, .col-md-3, .col-md-3, .col-lg-3, .col-4,. .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-6, .col-xs-7, .col-md-6, .col-lg-6, .col-xs-7, .col-md-6,. .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-XS-10,. .col-xs-11, .col-md-11, .col-md-11, .col-md-11, .col-lg-11, .col-xs-12, .col-md-12, .col-md-12, .col-lg-12 {Позиция: относительно; мин-Height: 1px; Padding-right: 15px; Padding-Leth-Leth-Left;Контейнер строки (.ROW) определяет значения левого края и правого края -15PX, которые используются для компенсации левого внутреннего расстояния первого столбца и правого внутреннего расстояния последнего столбца, так что между первым столбцом и последним столбцом нет интерната.
.ROW {Margin -Right: -15px; Margin -left: -15px;}Основное использование
Поскольку в рамках начальной загрузки используются разные стили сетки для разных размеров экрана, давайте возьмем средний экран (970px) в качестве примера.
1. Комбинация столбцов
Комбинация столбцов состоит в том, чтобы изменить количество столбцов слияния (общее количество столбцов не может превышать 12), что несколько похоже на атрибут Colspan таблицы; Метод комбинации столбцов включает только две характеристики: плавание в процентах ширины
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> <div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> <di v> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
Эффекты следующие:
Убедитесь, что все столбцы плавают влево
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 a-9
Определите ширину каждой комбинации столбца
.col-md-12 {width: 100%;}. Col-md-11 {width: 91.666666667%;}. Col-MD-10 {ширина: 83,333333333%;}. Col-MD-9 {Width: 75%;}. Col-MD-8 {width: width: width: width: width: width: 66.66666667%;}. COL-MD-7 {ширина: 58,333333333%;}. COL-MD-6 {ширина: 50%;}. COL-MD-5 {Width: 41,66666667%;}. Col-MD-4 {width: 33,3333333333333333333t333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333. {ширина: 25%;}. Col-MD-2 {ширина: 16,666666667%;}. Col-MD-1 {ширина: 8,333333333%;}Смещение столбца
Иногда мы не хотим, чтобы две соседние столбцы были близко друг к другу, но мы не хотим использовать маржу или другие технические средства. Это может быть достигнуто с помощью смещения столбца. Используя смещение столбца, просто добавьте имя класса. Col-MD-Offset-* в элемент столбца (звездочка представляет количество комбинаций столбцов, которые должны быть смещены). Столбец с этим именем класса будет смещен, например: Add .col-MD-Offset-4 на элементе столбца, указывая, что столбец смещен вправо на 4 столбца в ширине.
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> Смещение столбца </div> <div> col-md-2 </div> <div> col-md-2 </div> </div> </div> </div>
Эффекты следующие:
Принцип реализации:
Используя левые на дневных марже, столько лево маржи левого края, как и смещения, вы можете получить столько лево маржи.
.col-md-offset-12 {margin-left: 100%;}. Col-Md-Off-11 {margin-left: 91.666666667%;}. Col-MD-Offset-10 {Margin-left: 83.33333333%;}. Col-Md-Offset-9 {Margin-Left: 75%;}. 66.66666667%;}. Col-MD-Offset-7 {margin-left: 58,33333333%;}. Col-Md-Offset-6 {margin-left: 50%;}. Col-Md-Offset-5 {Margin-L-Left: 41.6666666%;}. 33.333333333%;}. COL-MD-Offset-3 {Margin-left: 25%;}. Col-MD-Offset-2 {Margin-Left: 16.66666667%;}. Col-MD-Off-1 {Margin-Lefft: 8.333333%;}. Col-Md-Offset-0 {MARGIN-LOTH: 0;Следует отметить, что при использовании COL-MD-OffSet-* для прямого смещения столбца необходимо убедиться, что общее количество столбцов и столбцов смещения не превышает 12, в противном случае он приведет к отображению столбца вне строки.
Сортировка колонн
Сортировка столбца должна изменить направление столбца и установить плавающее расстояние. В системе Bootstrap Grid это добавление имен классов. col-md-push-* и col-md-pull-*
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
Эффекты следующие:
COL-MD-4 слева, а COL-MD-8 находится справа. Если вы хотите поменять позиции, вам нужно переместить COL-MD-4 вправо на 8 столбцов, то есть добавить имя класса. Col-MD-Push-8; В то же время вам нужно переместить COL-MD-8 влево на 4 столбца, то есть добавить имя класса. Col-MD-PULL-4.
Bootstrap достигает эффектов позиционирования только путем установки влево и вправо.
.col-md-pull-12 {справа: 100%;}. Col-md-pull-11 {справа: 91.66666667%;}. Col-Md-Pull-10 {справа: 83,3333333333%;}. Col-Md-Pull-9 {справа: 75%;}. Col-Md-Pul 66.66666667%;}. Col-MD-Pull-7 {справа: 58,33333333%;}. Col-MD-Pull-6 {справа: 50%;}. Col-MD-Pull-5 {справа: 41,6666667%;}. Col-Md-Pull-4 33.333333333%;}. Col-MD-Pull-3 {справа: 25%;}. Col-MD-Pull-2 {справа: 16.666666667%;}. Col-MD-Pull-1 {справа: 8.33333333%;}. Col-Md-Pull-0 {справа: 0;}. 100%;}. COL-MD-PUSH-11 {слева: 91,666666667%;}. COL-MD-PUSH-10 {слева: 83,3333333333%;}. COL-MD-Push-9 {слева: 75%;}. COL-MD-Push-8 {Left: 66.6666667%;}. 58.333333333%;}. Col-MD-Push-6 {слева: 50%;}. Col-MD-Push-5 {слева: 41,666666667%;}. Col-MD-Push-4 {слева: 33,3333333333%;}. Col-Md-Push-3 {слева: 25%;}. 16.666666667%;}. Col-MD-Push-1 {слева: 8,333333333%;}. Col-MD-Push-0 {слева: 0;}Гнездование
Гнездование столбца может добавить один или сделать контейнер с строкой в столбце, а затем вставить столбец в этот контейнер строки. Когда ширина контейнера строки (строка) в контейнере столбца составляет 100%, это ширина текущего внешнего столбца.
<div> <div> <div>
Я вложил сетку внутри
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> col-md-4 </div> <div>
Я вложил сетку внутри
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
Приведенный выше контент - это система Bootstrap Grid, введенная вам редактором. Я надеюсь, что это будет полезно для всех!