В этой статье в основном будет представлена сетка Bootstrap.
Реализация системы сетки предназначена для определения размера контейнера, разделите 12 частей (или 24 частей или 32 частей, но 12 частей являются наиболее распространенными), затем регулируйте внутреннюю и внешнюю маржу и, наконец, объедините запросы среды, чтобы создать мощную отзывную систему сетки.
Система сетки в начальной загрузке предназначена для разделения контейнера на 12 частей.
Сетка Bootstrap используется для макета, которая на самом деле представляет собой комбинацию столбцов. Есть четыре основных использования:
1. Комбинация столбцов
Измените число, чтобы слияние столбцов (принцип: сумма столбцов не может превышать 12), например:
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Основное использование комбинации столбцов </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.csss> <! Style-> <style> [class *= col-] {founal-color: #eee; Граница: 1PX SOLID #CCC; } </style> </head> <body> <br> <div> <div> <!-Система сетки в начальной загрузке делит контейнер на 12 частей-> <!-Эта строка разделена равномерно на 1: 1: 1-> <div> .col-md-4 </div> <div> .col-4 </div>. </div> <div> <!-Эта строка разделена равномерно разделена на 1: 2: 1-> <Div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div> </div> </div> </body> </html> </div> </div> </div> </body> </html>Рендеринги следующие:
2. Смещение столбца
Добавьте имя класса «col-md-offset-*» в элемент столбца (где звездочка представляет количество комбинаций столбцов, которые должны быть смещены), и столбец с этим именем класса будет смещена вправо.
<div> <!-расстояние из четырех столбцов, движущихся вправо-> <div> <div> .col-md-4 </div> <div> расстояние из четырех столбцов, движущихся вправо </div> <div> .col-md-3 </div> </div> <!-расстояние из четырех столбцов, движущихся вправо </div>. -> <div> <div> <div> .col-md-4 </div> <div> расстояние из четырех столбцов, движущихся вправо </div> <div> .col-md-3 </div> </div> <div> <div>. <div> col-md-4 </div> </div> </div>
Рендеринги следующие:
3. Сортировка столбцов
Сортировка столбца предназначена для изменения направления столбца, изменение плавающего левого и справа и установить плавающее расстояние. Bootstrap достигается путем добавления имен классов «col-md-push-» и «col-md-pull-» (где звездочка представляет количество комбинаций движущихся столбцов).
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> базовое использование </title> <link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csss/bootstrap.min.cssss-- [class *= col-] {founal-color: #eee; Граница: 1PX SOLID #CCC; } </style> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4. гнездование колонн
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> базовое использование </title> <link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csss/bootstrap.min.cssss-- [class *= col-] {founal-color: #eee; Граница: 1PX SOLID #CCC; } [class *= col-] [class *= col-] {founal-color: #f36; Граница: 1px пунктир #ffff; Цвет: #ffff; } </style> </head> <body> <div> <div> <div> <div> У меня есть сетка, вложенная в ней <div> <div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> </div> </div> </div> </hobod> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht>Рендеринги следующие:
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Серия статей:
В первый раз, когда я вступил в контакт с магической начальной загрузкой.
В первый раз, когда я вступил в контакт с Magical Bootstrap Form //www.vevb.com/article/89330.htm
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.