Я выучил начальную загрузку несколько дней назад и разобрал систему сетки. Если есть какие -либо ошибки, пожалуйста, не стесняйтесь их исправлять.
Резюме: Система сетки разработала адаптивные веб -страницы для ПК, PAD и мобильных терминалов, и существуют различные решения, основанные на различных разрешениях экрана.
(0,1, размер устройства экрана превышает 1200px select col-lg
(0,2. Размер устройства экрана находится между 970PX и 1200PX SELECT COL-MD
(0,3. Размер устройства экрана находится между 768PX и 970PX SELECT COL-SM
(0,4. Размер устройства экрана меньше 768px select col-xs
1. Система сетки делит страницу на 12 столбцов (до 12 столбцов), следующим образом :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device, начальная шкала = 1, максинальная шкала, пользовательский составление = no"> <Tite> Распетной системы </title> <Link relse-Seet " href = "Библиотека/bootstrap.min.css"> <style> .a {height: 50px; Граница: 1px красное твердое вещество; Фон: розовый; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>3</div> <div>9</div> </div> </div> </div> </div> </div> <script src = "Library/jq.js"> </script> <script src = "Library/bootstrap.min.js"> </script> </body> </html>(2.1, COL-MD-1-это столбец, в общей сложности 12 столбцов, покрытых «горизонтальной строкой». Число, тянущее после MD,-это количество назначенных столбцов (COL-LG, COL-SM, COL-XS одинаково)
3. При устройствах с различными разрешениями экрана представленная страница представлена соответствующая «страница растра формата», тем самым реализуя отзывчивый макет, следующим образом :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device, начальная шкала = 1, максинальная шкала, пользовательский составление = no"> <Tite> Распетной системы </title> <Link relse-Seet " href = "Библиотека/bootstrap.min.css"> <style> .a {height: 50px; Граница: 1px красное твердое вещество; Фон: розовый; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "Библиотека/Jq.js"> </script> <script src = "Library/bootstrap.min.js"> </script> </body> </html>(3.1. Приведенный выше код показывает, что, когда размер устройства экрана больше 1200px, один горизонтальный строк имеет четыре столбца, один большой столбец имеет три маленьких столбца, а в небольшом столбце в общей сложности 12 столбцов.
(3.2, указывая на то, что когда размер устройства экрана составляет от 970 пикселей до 1200px (вы можете сначала посмотреть на сокращение браузера до этой стадии), в горизонтальной строке есть три столбца и четыре столбца в большом столбце, в общей сложности 12 столбцов.
(3.2, указывая, что когда размер устройства экрана составляет от 768 п. До 970px (вы можете сначала посмотреть на сокращение браузера до этой стадии), в горизонтальной строке есть два больших столбца и шесть небольших столбцов в большом столбце, в общей сложности 12 столбцов.
(3.2, указывая на то, что когда размер устройства экрана составляет менее 768px (вы можете сначала посмотреть на сокращение браузера до этой стадии), в горизонтальном ряду есть большой столбец, а в большом столбце есть двенадцать маленьких столбцов, в общей сложности 12 столбцов.
4. Смещение колонны, гнездование и положения обмена в растровой системе
(4.1, смещение столбца
<div> <div> 8 </div> <div> 3 </div> <!-столбец сметает один за один справа-> </div>
(4.2, гнездование
<div> <!-гнезда-> <div style = "padding: 0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, положение обмена
<div> <!-Положение обмена-> <div> 9 </div> <!-Нажмите, двигаться вправо
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
В этой статье используются самые простые случаи для анализа ключевых точек макета, связанных с делом, надеясь быть полезным для каждого обучения.