Bootstrap 3-это первые мобильные устройства, в этом смысле код начальной загрузки начинается с небольших экранных устройств (таких как мобильные устройства, планшеты), а затем расширяется до компонентов и сетей на больших экране (таких как ноутбуки, рабочие столы).
1. Стратегия приоритета мобильного устройства
1. Содержание: Решение о том, что самое важное.
2. макет
Преимущественный дизайн меньшей ширины.
Базовые CSS предпочтительнее для мобильных устройств, а медиа -запросы предназначены для планшетов и настольных компьютеров.
3. Постепенно усиливается
Добавьте элементы по мере увеличения размера экрана.
По мере увеличения размера экрана или размер просмотра система будет автоматически разделена на 12 столбцов. Как показано на рисунке ниже:
2. Принцип работы системы начальной загрузки (система сетки)
Система сетки создает макеты страниц через серию строк и столбцов, содержащих контент. Вот список того, как работает система Bootstrap Mesh:
1. Строки должны быть размещены в классе .container, чтобы получить соответствующее выравнивание и прокладку.
2. Используйте ряды, чтобы создать горизонтальные группы столбцов.
3. Содержимое должно быть размещено в столбце, и только столбец может быть прямым дочерним элементом строки.
4. Предопределенные классы сетки, такие как .row и .col-XS-4, могут быть использованы для быстрого создания макетов сетки. Меньше гибридных классов можно использовать для более семантических макетов.
5. Столбцы создают разрывы между содержимым столбца посредством прокладки. Этот внутренний край отрицательный по краю на.
7. Система сетки создается путем указания двенадцати доступных столбцов, которые вы хотите охватить. Например, чтобы создать три равных столбца, используйте три .col-XS-4.
3. СМИ запрос
СМИ запросы очень шикарны "условные правила CSS". Это относится только к некоторым CSS на основе определенных предписанных условий. Если эти условия выполнены, применяется соответствующий стиль.
Запросы медиа в начальной загрузке позволяют перемещать, отображать и скрывать контент в зависимости от размера просмотра. Следующий медиа -запрос используется в меньшем файле для создания критических порогов точки останова в системе сетки Bootstrap.
/* Ultra-small device (mobile phone, less than 768px) *//* No media query by default in Bootstrap*/ /* Small device (tablet, starting from 768px) */@media (min-width: @screen-sm-min) { ... } /* Medium device (desktop, starting from 992px) */@media (min-width: @screen-md-min) { ... } /* Large Устройство (большой рабочий стол, начиная с 1200px) */ @media (min-width: @screen-lg-min) {...}Иногда мы включаем максимальную ширину в наш код медиа-запроса, ограничивая влияние CSS до меньшего диапазона размеров экрана.
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Есть две части для медиа -запроса, сначала спецификация устройства, а затем правило размера. В приведенном выше случае установлены следующие правила:
Давайте посмотрим на следующую строку кода:
@media (min-width: @screen-sm-min) и (максимальная ширина: @screen-sm-max) {...}
Для всех устройств с минимальной шириной: @Screen-SM-Min будет выполнена обработка, если ширина экрана меньше, чем @Screen-SM-Max.
4. Варианты сетки
В следующей таблице приведено, как система начальной загрузки работает на нескольких устройствах:
5. Основная структура сетки
Вот основная структура сетки начальной загрузки:
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
Вот конкретный пример кода:
<div> <h1> Привет, мир! </h1> <div> <!-Мобильное телефон с небольшим устройством (<768px)-> <div style = "founal: #f00"> 1 </div> <div style = "founke: #b2b0b0"> 2 </div> <div style = "foanle: #ff6a00"> 3 </div> <div style = "foundation: #fff: #fff: #fff"/fff: #fff: #fff: #fff: #fff: #fff: #fff: #fff: #fff: #/fff "/fff"/fff ". style = "fouren: #4cff00"> 5 </div> <div style = "№ 0ff"> 6 </div> <div style = "Фон: #0094ff"> 7 </div> <div style = "Фон: #0094ff"> 7 </div> <div Style = "founal: #b200ff"> 8 </div> <div style = "founly: #ff00dc> div> div> div> </div> <div style =" facknc: #fff #fff #fff #fff #fff00 #fainc> div> 9 </div> <div styl style="background: #ff006e">10</div> <div style="background: #ac5050">11</div> <div style="background: #54bd4f">12</div> </div> <div> <!--Small Device Tablet (≥768px) --> <div style="background: #b2b0b0">1</div> <div style="background: #ffd800 "> 1 </div> <div style =" founal: #ac5050 "> 1 </div> </div> <div> <!-настольный компьютер среднего размера (≥992px)-> <div style =" Фон: #AC5050 "> 1 </div> <div Style = Фон: #54bd4f"> 1 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <! (≥1200px) -> <div style = "foureny: #ac5050"> 1 </div> <div style = "founke: #54bd4f"> 1 </div> </div> </div> </div>
6. Столовый столбец
Offset является полезной функцией для более профессиональных макетов. Они могут быть использованы, чтобы сделать больше места для столбца. Например, классы .col-xs =* не поддерживают смещения, но они могут просто достичь этого, используя пустую ячейку.
Чтобы использовать смещения на больших мониторах экрана, используйте класс .col-md-off-*. Эти классы увеличат левый поля столбца по * столбце, где * диапазон составляет от 1 до 11.
В приведенном ниже примере у нас есть <div> .. </div>, и мы будем использовать .col-md-offset-3 класс для центра этого Div.
<div> <div> <div style = "founal-color: #dedef8;"> <p> Столбец смещения теста --- 3 столбцы смещены на правое здесь </p> </div> </div> <div> <div Style = "Фон: #f00"> 1 </div> <div style = "foanle: #b2b0b0"> 2 </div> <div style = "foundation: #fff6"/div6. style = "fouren: #ffd800"> 4 </div> <div style = "№ 4cff00"> 5 </div> <div style = "founke: #0ff"> 6 </div> <div style = "founke: #0094ff"> 7 </div> <div style = "founfer: #b200ff"> 8 </div> <div style = "founder: #fff #fff #fff #fff #fff00 #fff00 #fainc> 9 </div> <div style: #fff00 style = "fourene: #ff006e"> 10 </div> <div style = "founke: #ac5050"> 11 </div> <div style = "founke: #54bd4f"> 12 </div> </div> </div> </div>
Эффект отображения:
7. Вложенные колонны
Чтобы гнетать сетку по умолчанию в контенте, добавьте новый .row и добавьте набор из столбцов .col-md-* в существующем столбце .col-md-*. Вложенные ряды должны содержать набор столбцов, а количество столбцов в этом наборе столбцов не может превышать 12 (на самом деле, нет никаких требований, чтобы вы заняли 12 столбцов).
В следующем примере макет имеет два столбца, а второй столбец делится на два ряда и четыре поле.
<div> <div> <div style = "foureny: #b2b0b0"> Первый столбец < /div> <div style = "founal: #dedef8"> второй столбец-есть четыре div вложены в It <div> <div style = "founfer: #0094ff"> Я содержатся один <br /> <br /> <br /> < /div> <div styl </div> <div> <div style = "founale: #ff00dc"> я доволен тремя <br/> <br/> <br/> </div> <div style = "founal: #ff006e"> я доволен четырьмя </div> </div> </div> </div> </div>.
Эффект отображения:
8. Сортировка столбцов
Еще одна идеальная особенность системы Bootstrap Mesh заключается в том, что вы можете легко записать столбцы в одном порядке, а затем отобразить их в другом.
Вы можете легко изменить порядок встроенных колонн сетки с классами .col-md-push-* и .col-md-pull-*, где* варьируется от 1 до 11.
В приведенном ниже примере у нас есть две макеты столбцов, левый столбец узкий, в качестве боковой панели. Мы будем использовать классы .col-md-push-* и .col-md-pull-* для обмена порядком двух столбцов.
<div> <div> <div style = "foureny: #ff00dc"> слева </div> <div style = "fourene: #ff006e"> справа </div> </div> </div>
Эффект отображения:
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.