1. Создайте среду разработки начальной загрузки
1. Скачать Bootstrap, http://www.bootcss.com/
2. Скачать jQuery и Access http://code.jquery.com/jquery-2.0.3.min.js напрямую через т.е.
3. Импорт Bootstrap и JQUERY's JS, CSS -файлы и теги .Viewport <Meta> на HTML -странице. Этот тег можно изменить для отображения на большинстве мобильных устройств, например, IT IE 9 ..., для совместимости ниже IE9.
Шаблон выглядит следующим образом
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta Content = "width = width Device, начальная шкала = 1,0" name = "viewport"/> <Title> вставьте заголовок здесь </title> <link href = "css/bootstrap.min.css" rel = "rel =" rel = "rel =" rel = "relsheet". 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/resp.js/1.3.0/resp.min. <! [endif]-> <script src = "js/jquery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </head> <body> <div> </div> </body> </html>
II Сетка система
1. Boostrap разделяет рабочий стол на таблице с 12 строками * N столбцов для макета, который является ядром Boostrap.
2. .ROW используется для разделения уровня строки и должен быть включен в.
3. COL-XX-* Выполните деление уровня столбца, как показано на рисунке ниже
<div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </div> </div> </div> </div> </div> </div>
4. Смещение столбца, реализованное через COL-XX-Offset-*
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
5. Сортировка столбцов может быть достигнута с помощью .col-xx-push-* и .col-xx-pull-* для реализации левой или правой сортировки столбцов.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
6. Гнездовые колонны и гнездо в Col.
<div> <div>1</div> <div>2</div> <div>3</div> <div> <div> <div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.