1. Введение
Bootstrap имеет встроенную систему потоковой сетки с мобильной точки зрения. По мере увеличения размера устройства экрана или размер просмотра система автоматически будет разделена на 12 столбцов . Он включает в себя простые в использовании предопределенные классы и мощные микшины для получения большего количества семантических макетов.
2. Растровые варианты
Bootstrap3.x использует четыре варианта сетки для формирования системы сетки. Внедрение этих четырех вариантов на официальном сайте выглядит следующим образом. Многие люди этого не понимают. Здесь я подробно объясню различия между четырьмя вариантами сетки. На самом деле, только одно из различий в том, что они подходят для экранных устройств разных размеров . Давайте посмотрим на элемент префикса класса. Давайте назваем эти четыре варианта сетки для префикса. Это COL-XS, COL-SM, COL-MD и COL-LG. Те, кто понимает английский, будут знать, что LG является аббревиатурой крупного, MD - это аббревиатура Mid, SM - это аббревиатура малых, а XS - это аббревиатура ***. Это именование отражает различную ширину экрана, к которой адаптируются эти классы. Ниже мы представляем характеристики этих классов.
Следующая таблица позволяет подробно видеть, как растровая система Bootstrap работает на нескольких экранных устройствах.
3. Смещение столбца
Используйте .col-md-offset-* Чтобы сметить столбец вправо. Эти классы добавляют все столбцы к левому полю столбца с помощью селектора *. Например, .col-md-offset-4 сдвинулся .col-md-4 справа на 4 столбца в ширину.
4. Вложенные колонны
Чтобы гнездовать содержание, используя встроенные Rasters, это можно сделать, добавив новые. Столбцы, содержащиеся в вложенных рядах, должны составлять до 12 .
5. Сортировка столбцов
Порядок столбцов можно легко изменить с помощью .col-md-push-* и .col-md-pull-*.
Случай
<%@ page language = "java" pageEncoding = "utf-8"%> <%string path = request.getContextPath ();%> <! Doctype html> <html lang = "zh-cn"> <head> <title> </title> <meta content = "ie = edge" http-eavivible = "x-u http-equiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-equiv = "content-language" content = "zh-cn" /> <meta name = "Автор" content = "[email protected]" /> <meta = "copyright" content "content =" parami newertine | xiam netwern.com. ООО " /> <meta http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "expires" content = "0"> <meta http-equiv = "keywords" content = ", ключевое слово1, ключевое слово 2" meta equiv = "meta equiv =" meta equiv = "meta equiv =" meta equiv = " http-equiv = "description" content = "Это моя страница"> <jsp: include page = "/demo/base/js_bootstrap.jsp"/> <style type = "text/css">. Show-Grid [class ^= "col-"] {padding-top: 10px; Padding-bottom: 10px; foinal-solor: #eee; 1px; Rgba (86, 61, 124, .15); граница: 1px solid rgba (86, 61, 124, .2);} </style> <script type = "text/javascript"> $ (function () {}); </script> </head> <bege> <b> col-lg-*usage </b> <brpt> </Head> <be Body> <b> col-lg-* <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*Использование </b> <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> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*Использование </b> <div> <div> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs-*Использование </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> Столбец Смещение: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <viv> .col-md-4 </div> <div> .col-m d-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <viv> .col-md-4 </div> <div> .col-md-4 </di v> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div> <br/> <b> Столбец Смещение: COL-MD-Offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offset-4 </div> </div> <div> <div> .col-md-3 .col-md-offset-3 </div> <div> <div>. .col-md-offset-3 </div> </div> <div> <div> .col-md-6 .col-md-offset-3 </div> </div> <br/> <b> Вложенные столбцы: столбцы, содержащиеся в вложенной строке 2: .col-md-6 </div> </div> </div> <br/> <b> Сортировка столбца: .col-md-push-* и .col-md-pull-* </b> <div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div> <div> .col-md-3 .col-md-pull-9 </div>. </body> </html>
Демонстрационный эффект
Выше приведено соответствующие знания о системе Bootstrap Grid, введенной вам редактором. Я надеюсь, что это будет полезно для вас!