Bootstrap обеспечивает отзывчивую систему потоковой сети с мобильной связи. По мере увеличения размера экрана или размер просмотра система будет автоматически разделена на 12 столбцов.
Система сетки аналогична таблице с рядами и столбцами. Он должен быть помещен в контейнер с типом, установленным для контейнера. Это может быть div, и содержание помещается в столбце. Сетка в веб -дизайне используется для расположения контента, что делает веб -сайт легко просматривать. Ниже приведен пример использования сетки Bootstrap Grid.
<div> <div> col2 </div> <div> col10 </div> </div>
Эффект отображения выглядит следующим образом:
Стиль класса = "row" добавляется для представления строки, и стиль класса = "col-sm-2" добавляется для представления столбца. Система делит весь экран на 12 частей, COL-SM-2 означает, что столбец охватывает 2 части, а отношение COL-SM-10 означает, что колонка охватывает 10 частей. Отображаемый эффект будет быть как показано на рисунке выше, указывая, что в одной строке есть два столбца, в первом столбце учитывается 2 части, а второй столбец учитывает 10 частей.
Bootstrap является отзывчивой фронтальной структурой, которая отражается в системе сетки, которая представляет собой устройство, соответствующее различным размерам дисплея, и может представлять различные эффекты дисплея. Как показано ниже:
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
COL-MD-8 означает, что этот список учитывает 8 частей под экранами среднего размера, таких как обычные настольные компьютеры и ноутбуки. COL-XS-12 означает, что в этом столбце составляют 12 экземпляров под небольшими экранами, такими как таблетки. Приведенный выше код показывает, что в строке есть два столбца и следующая строка обычных рабочих столов и ноутбуков. Первый столбец учитывает 8 частей, второй столбец учитывает 4 частей, а также следующая строка и следующее столбцом учитывают 2 столбца, в первом столбце учитывается 12 частей, а второй столбец - 6 частей. Таким образом, различные эффекты достигаются на разных устройствах отображения. Вы можете имитировать эти две ситуации, изменяя размер браузера.
На следующем рисунке показано, как сетчатая система Bootstrap работает на нескольких экранных устройствах
Выше приведено полное описание третьих оснований сетки начальной загрузки, представленных редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!