Из -за потребностей проекта я планирую хорошо изучить основу для начальной загрузки. Я узнал немного раньше. Структура в целом не сложна, но есть еще много вещей. Если вы хотите овладеть этим опытным, вам все равно нужно больше практиковать.
1. Что такое начальная загрузка?
Что такое BS? То есть, стандартизированный фронт-инструмент, созданный на передней странице, был написан в стиле CSS.JS, и его нужно использовать.
Как использовать BS? Эффект в основном увеличивается с помощью различных классов, и каждый класс имеет разные соответствующие функции.
Преимущества BS: повышает эффективность разработки, делает дизайн страницы более красивым и поддерживает адаптивную разработку. Адрес загрузки: https://github.com/foreverjiangting/bootstrap
Учебная документация: http://v3.bootcss.com/getting-started/
2. Дизайн стиля CSS
1. На основе документации HTML
Bootstrap относится к некоторым HTML -элементам, поэтому заголовок должен быть записан как образец, показанный ниже.
<! Doctype html> --- Содержит объявление о документе HTML5, все браузеры включают стандартный режим <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-complayable" content = "ie = edge"> <meta name = "viewport" content = "width = device-width," ie = edge "> <meta name =" viewport "=" width = devict-width, width,> 1 "wydth width = widtth,> 1" wyd-width = width, 1 ". Метаги * должны быть * сначала размещены, а любой другой контент * должен * следовать за ними! Убедитесь, что адаптивные макеты поддерживаются-> <Title> Bootstrap </title> [/code] [code] <!-Новый файл Bootstrap Core CSS-> <link rel = "stylessheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> функциональные файлы. rel = "styleSheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> написано файл jquery. Обязательно представьте-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js">вы src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 33.
2. Сетка сетки
Содержание макета, установив строки и столбцы. Bootstrap устанавливает страницу на 12 столбцов. Макет путем изменения количества столбцов, таких как настройка трех столбцов равной ширины:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <Title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </bootstrap/3.3.4/js/bootstrap.min.js "> <//bootstrap/3.3.4/js/bootstrap.min.js" Макет-> <div> <!-или Container-Fluid-> <div>-Col-XS-4: относится к небольшому устройству менее 768 пл. less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
Есть четыре способа написать формат сети CSS, которые в основном используются в разрешении различных устройств.
2: перевести столбец
Используйте смещение в PAN. То есть количество переведенных столбцов
<div> <!-или контейнер-флюид-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- Относится к праву 33 </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- рефери <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-Translate->
Эффекты следующие:
33 Поскольку два столбца были переведены, он не смог удовлетворить свои требования занять 4 столбца, поэтому он был втиснут в следующую строку и начал занимать 4 столбца. Проще говоря, это эквивалентно перемещению всего блока Div.
3: вложенные столбцы
То есть гнездо в колонке сетки. Давайте сравним.
<div><!-- or container-fluid--> <div> <div> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div>11</div> </div> <div>11</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
Эффекты следующие:
Вы нашли какие -нибудь проблемы? Почему нет равного распределения 8 выше?
Причина: давайте посмотрим на консоли отладки
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-6,. Лебь набивки: 15px; Плава правая: 15px; позиция: относительно;}
Было обнаружено, что левые накладки и правые накладки имеют 15px. Это связано с тем, что заполнение между столбцами заслуживает влияния, так почему второй див не оказывает никакого влияния? Давайте рассмотрим принцип сетки забора.
1. «ряд» должна быть включена в .container (фиксированная ширина) или .container-fluid (ширина на 100%), чтобы придать ему соответствующее выравнивание и прокладку.
2. Создайте желоб между столбцами, установив свойство padding для «столбца». Установив отрицательный margin для элемента .row , настройка padding настройки для элемента .container
Косвенно, «столбец» padding в «строке».
Примечание . В настоящее время ROW компенсирует прокладку столбца, поэтому нет значения заполнения.
4: Сортировка столбцов
В основном используя col-xs-push-* col-xs-pull-* (* представляет количество 0-11) Как понять эти два класса? толчок означает толкать, тянуть означает тяну.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
Рендеринги следующие:
<div> 21 </div> --- Записано как div1 <div> 24 </div>-записано как div2
Можно понять, что это должно обмениваться позициями обоих. Вам нужно выдвинуть Div1 вправо 8 столбцов, и вам нужно потянуть 4 столбца влево.
3. Плодовой сетка
1. Ширина столбца использует проценты, а не пиксели
2. Измените класс строки на сколь
3. Другие основные функции такие же, как и фиксированный макет выше, и поддерживают отзывчивость.
4. При разделении определенного столбца в бисекторе, поскольку потоковая компоновка использует проценты, его следует рассчитывать в соответствии с 6.
// Обратите внимание на следующую ситуацию. При разделении 8 столбцов в двустороннем порядке он устанавливается не на два 4s, а два 6 с, потому что в начальной загрузке есть 12 столбцов распределения растровых. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Давайте посмотрим на применение потоковых макетов и сравним их с фиксированными макетами.
<!-Потоковая макет-> <div> <div> 333 </div> <div> 444 </div> </div> <div> --- Объятите класс контейнерного жидкости, указывая на то, что содержание представляет собой потоковую компоновку, функция: как содержащий блок, чтобы содержать потоковое содержание <div> <div> 333 </div> <div> <div> 444 </div> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>. Классы контейнера и контейнера, и это ширина экрана <div> 333 </div> <div> 444 </div> </div>
Когда экран меньше 768px, эффект заключается в следующем:
Когда экран превышает 992px, эффект выглядит следующим образом: в настоящее время одна линия исключительно
Класс рядных потоков (очень важный) определяет, является ли это макетом потока. Затем код блока контента записан так же, как и система сетки, и он по-прежнему начинается с COL-MD-1 до COL-MD-12, что соответствует различным процентам соответственно.
4. Отзывчивый дизайн
Проще говоря, он поддерживает разрешения (960px, 1366px, 978px и т. Д.) Различных устройств (мобильные телефоны, ПК) для адаптивного ответа.
<div> <div> 21 </div> <div> 24 </div> </div>
Когда устройство меньше 768px, эффект выглядит следующим образом:
Когда устройство> = 992px. Эффекты следующие:
Резолюции двух вышеупомянутых категорий различны. COL-MD-12 означает, что каждый столбец имеет одну строку, то есть 12 столбцов.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.