Как фронт-плагин, который поддерживает отзывчивый макет, Bootstrap играет важную роль. Независимо от того, просматриваете ли вы Интернет на своем телефоне, планшете или ПК, вы можете достичь хороших результатов. Все это приносит нам Bootstrap!
Сегодня я в основном расскажу о макете страницы. Это самая основная вещь. Когда мы проектируем сайт, мы должны разработать глобальную и унифицированную стандартную страницу для него. Мы называем такие страницы макета страниц, и то, что отражается на странице, - это элементы макета, которые, конечно, необходимы в начальной загрузке.
Макет Bootstrap - это растровая система, то есть она состоит из рядов и столбцов. При использовании ему необходимо обернуть контейнер .container для содержания страницы и растровой системы.
A.Container Class используется для контейнеров, которые являются фиксированной шириной и поддержкой, адаптивными макетами.
<div> ... </div>. Класс .container-Fluid используется для контейнеров с шириной 100%, занимая все видовые точки. <div> ... </div>
В начальной загрузке ряды и столбцы представлены Row и COL, а подряд составляют до 12 единиц столбцов. COL-MD-1 представляет ширину одной единицы, а COL-MD-7 представляет ширину семи единиц. Они объединяются, чтобы составлять до 12 единиц.
<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 </di v> <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-8 </div> <div> .col-md-4 </div > </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>
Вторая и третья строки показывают аналогичные эффекты
Три вложенных столбца, в столбце также могут быть столбцы . Нам нужно изменить MD на SM в этом гнездовании
<div> <div> Уровень 1: .col-sm-9 <div> <div> Уровень 2: .col-xs-8 .col-sm-6 </div> <div> Уровень 2: .col-xs-4 .col-sm-6 </div> </div> </div>
Эффект аналогичен этому
Выше приведено основное знание макета страницы Bootstrap, представленное вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!