Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее.
Ключевые моменты для обучения:
1. Мобильные устройства предпочтительнее
2. Контейнер для макета
3. Система сетки
На этом уроке мы в основном узнаем о системе Bootstrap's Grid и предоставим отзывную систему потоковой сети с мобильной связи.
один. Мобильные устройства предпочтительнее
В проекте HTML5 мы сделали мобильный проект. Он имеет очень важную мета для настройки ширины на экран и устройства и для запуска пользовательского масштабирования и масштабирования.
// Ширина экрана согласуется с устройством, начальным масштабируемым, максимальным масштабируемым и запретом масштабирования пользователя.
два. Контейнер для макета
Bootstrap требует контейнер. Из -за таких атрибутов, как прокладка, эти два класса контейнера не могут быть вложены друг на друга.
// Фиксированная ширина <div> ... </div> // 100% ширина <div> ... </div>
В растровой системе браузер автоматически распределяет до 12 столбцов, поскольку размер экрана увеличивается или уменьшается. Создайте макет страницы, объединив серию рядов и столбцов. Принцип работы заключается в следующем:
1. «ряд» должна быть включена в .container (фиксированная ширина) или .container-Fluid (ширина на 100%), чтобы придать ему подходящее выравнивание и прокладку.
2. Создайте набор «столбцов» горизонтально через «ряд».
3. Ваш контент должен быть размещен в «столбце», и только «столбец» может использоваться в качестве прямых дочерних элементов строки.
4. Предопределенные классы, такие как .row и .col-XS-4 могут использоваться для быстрого создания растровых макетов.
Миксель, определенный в исходном коде начальной загрузки, также может использоваться для создания семантических макетов.
5. Создайте желоб между столбцами, установив свойство накладки для «столбца». Установив отрицательные значения для элементов.
Таким образом, маржа компенсирует набор наборов для элемента .container, который косвенно сметает прокладку для «столбца», содержащейся в «строке».
6. Отрицательная маржа - это причина, по которой следующий пример подчеркивает наружу. Содержание в растровом столбце расположено в ряду.
7. Столбец в растровой системе представляет диапазон, который он охватывает, указав значения от 1 до 12. Например, три столбца равной ширины могут быть созданы с использованием трех .col-XS-4.
8. Если «столбец», содержащий в «строке», больше 12, элементы, в которых расположены дополнительная «столбец», будут расположены в другой строке в целом.
9. Класс сетки подходит для устройств с шириной экрана, превышающей или равным размеру точки деления, и покрывает класс сетки для небольших экранных устройств. Следовательно, применение любого класса .col-md-* raster на элемент подходит для устройств с шириной экрана, превышающей или равным размеру точки деления и перезаписывает класс растра для небольших экранных устройств. Следовательно, применение любого .col-lg-* на элементе не существует, что также влияет на устройство крупного экрана.
// Создать адаптивную строку <div> <div> ... </div> </div> // Создать адаптивную строку с до 12 столбцов <div><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></div> //To show obvious Css.a {height: 100px; фоновый цвет: #eee; граница: 1px solid #ccc;} // Общее количество столбцов составляет 12, и каждому столбцу присваивается несколько столбцов <div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> </div> 9-12 </div> </div >> </div >> 9-12 </div> </div >>Таблица растровых параметров
Как показано на рисунке выше, самый внешний слой системы сетки различает четыре ширины браузеров: Ultra-Mall Screen (<768px), небольшой экран (> = 768px), средний экран (> = 992px) и большой экран (> = 1200px). Адаптивная ширина внутреннего контейнера. Автоматическое означает, что если вы находитесь на экране мобильного телефона, вы будете в полной мере отобразить одну строку.
// активировать все четыре экрана Категории <div> <div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> //Sometimes we can set column offsets to keep a gap in the middle<div><div><div>8</div><div>3</div></div></div> //It can also be nested, and the embedding is also 12. Column <div><div><div>1-8</div><div>9-12</div></div><div>11-12</div></div></div> //You can Обменивайте два столбца, нажмите влево и потяните вправо <div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
Выше приведено связанная информация для системы Bootstrap Grid, я надеюсь, что это будет полезно для всех!