1: Введение в начальную загрузку
Boostrap-это очень популярная фронтальная структура разработки, которая значительно повышает эффективность развития фронтальных команд. Bootstrap завершает общие компоненты компонента CSS и плагины JavaScript, что позволяет разработчикам легко использовать. Используйте начальную загрузку, чтобы быстро создать красиво отзывчивые страницы и совместимы с мобильными устройствами.
Два: функции начальной загрузки
Предоставьте полный набор плагинов CSS, богатых предопределенных листов в стиле, набор плагических столов на основе JQUERY. Гибкая система удаления отзывчивой сетки. Мобильная первая разработка на основе меньше и SASS.
Три: используйте начальную загрузку
1. Шаг 1:
Загрузите последнюю начальную загрузку по адресу http://www.bootcss.com/. После декомпрессии есть три папки, которые размещают CSS, JS и шрифты соответственно. Существует сжатая версия файлов CSS и JavaScript, и вы можете выбрать версию в соответствии с вашими потребностями. Несоцененная версия используется во время разработки, а сжатая версия используется во время выпуска.
2. Фиксированный дисплей кода шаблона
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-comelabity" content = "ie = edge, chrome = 1"> <! name = "viewport" content = "width = width устройства, начальная масштаба = 1"> <!-Приведенные выше три теги * должны быть размещены спереди, и любой другой контент * должен * следовать за ними! -> <Title> Стиль шаблона начальной загрузки </title> <!-Представление Bootstrap-> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <!-Представление фреймворта html5 и respong.js для поддержки IE8 и IE9. IE 8 требует сотрудничества respons.js для достижения поддержки медиа -запросов. Response.js больше не может запускаться в файле: // path file: //-> <!-[if ie Ie 9] означает, что он вступает в силу в браузерах ниже IE9-> <!-[if ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.script. src = "// cdn.bootcss.com/respond.js/1.4.2/respons.min.js"> </script> <! [endif]-> </head> <body> <h1> Привет, мир! </h1> <!-цитируйте плагин jquery внизу, чтобы достичь динамических эффектов начальной загрузки-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> написано src = "js/bootstrap.min.js"> </script> </body> </html>
3. Основное использование:
3.1 Общая система сетки-структуры-12
Ядро начальной загрузки-12-хитрость. Система 12 сетки делит область содержания веб -страницы на 12 копий в соответствии с шириной. Веб -разработчики могут свободно объединять его по частям, что облегчает макет веб -страницы и делает макет аккуратным и стандартизированным.
BootStarp предоставляет контейнер в стиле, называемый контейнером. Контейнер-это автосцентрированный, очень адаптивный стиль. Использование .container в качестве наиболее внешнего стиля Div стиля веб -страницы может легко реализовать 12 сетки веб -страницы. Более того, эта 12-серийная система адаптивна к размеру экрана, и. Контейнер будет автоматически регулировать общую ширину и среднюю ширину сетки в соответствии с размером экрана.
COL-LG-N Максимальная ширина столбца 95PX В случае> = 1200px пиксели, раздел .container12 в равной степени с шириной 95px за порцию. Ширина остальных на 100%
Col-MD-N максимальная ширина 78px; Divide .container12 в равной степени с> = 992px пиксели, оставшиеся 100%
COL-SM-N Максимальная ширина столбца 60px В случае> = 768px пиксели, разделить .container12 в равной степени с остальными случаями 100%
Ширина столбца COL-XS-N равен размеру 12. Контейнер 12 равен экрану любого размера
3.2 Основные стили
(1) Стиль H1-H6 от начальной загрузки был отменен жирным шрифтом, а верхняя и нижняя края переопределили H1-H3 Margin-Top: 20px; маржиновый баттом-10PX; H3-H6 Margin-Top: 10px; маржиновый баттом-10PX;
(2) Определите четыре стиля выравнивания, а именно. Текст-левый,. Текст-центр,
(3) Bootstrap содержит пять стилей цвета по умолчанию, -ппирационно -синий, -сиксельный успех зеленый, -Info информация
3.3btn Компонент +BTN-группа
<button type = "button" class = "btn btn-primary"> кнопка клавиши </button> компонент оповещения <div class = "alert" class = "wared wared-danger"> Предупреждение о опасности </div>
Общие компоненты имеют четыре размера: Ultra-Small XS, маленький SM, обычный и большой LG. Использовать метод-это компонент имени <кнопка типа = "Кнопка" class = "btn btn-lg"> кнопка с ультраименной кнопкой </button> Различные типы кнопок одного и того же компонента можно использовать в комбинации.
<Button Type = "button" class = "btn btn-primary btn-lg"> кнопка с ультра-более широкой кнопкой </button> <!-btn-group-> <div> <tood> home </button> <tood> вторая страница </button> <futne> Page 2 </Button> <bute> Последняя страница </button> <div> </кнопка-type = ». Список <pan> </span> </button> <ul> <li> lenovo </li> <li> asus </li> <li> Apple </li> </ul> </div>
3.4Table Столовый стиль:
Добавьте родительский элемент Div в элемент таблицы, добавьте Class = "Table-Recousive" в этот Div Создайте соответствующую таблицу. Когда пиксель Viewport составляет менее 768px, появится горизонтальная полоса прокрутки.
<!-Таблица, между списками с полосатыми настольной полосой есть расстояние цветов. Adaptive-> <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div>
3.5 Badge значок
<!-Значки значков-> <br/> <a href = "#"> Special Care <pan> 42 </span> </a> <br/>
3.6 Навигационная планка
(1) Капсульная навигационная планка
<ul> <li> <a href = "#"> dynamic <pan> 42 </span> </a> </li> <li> <a href = "#"> Профиль </a> </li> <li> <a href = "#"> частное сообщение <span> 3 </span> </a> </li> </ul>
(2) Навигационная планка метки
<!-Меню навигации по тегам-> <ul> <li> <a href = "#news1" data-toggle = "tab"> News Company </a> </li> <li> <a href = "#news2" data-toggle = "Tab"> Новости отрасли </a> </li> <li> <a href = "#news3" data-toggle = "tab"> уведомления </a> </li> </ul> <div> <div id = "news1"> <ul> <li> Новости компании </li> </ul> </div> <div id = "news2"> <ul> Новости отрасли </li> <li> </li> </ul> </div> <dif> news3 " Объявление </li> <li> Объявление уведомления </li> <li> Объявление уведомления </li> </ul> </div> </div>
3.7 Входная группа
<!-Входная+Кнопка Комбинация-> <div> <input type = "text"> <pan> <tood> search </button> </span> </div>
3.8 Карусель
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap template Style </title> <link href = "../ css/bootstrap.min.css" rel = "stylesheet"> <style> body {founal: #eee} .item {position: относительно; Высота: 400px} .Item img {позиция: относительно; Ширина: 100%; Высота: 400px} .Item p {позиция: абсолют; Верх: 40%; Ширина: 100%; Цвет: #fff; } .Item h1 {position: Absolute; Верх: 20%; Ширина: 100%; Цвет: #fff; Text-align: Center} @Media (max-width: 768px) {.slide {width: 100%}} </style> <!-[if ie 9]> <script src = "../ js/html5shiv.min.js"> </script> <script src = "../ js/resplion.min.js"> </script> <! [endif]-> <script src = "../ js/jquery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </script> </head> <body> <div> <div идентификатор. data-ride = "carousel"> <!-Slide Navigation-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousele-slide-to =" 1 "> </li> <li data-target ="#mycarousel "data-s-slide-to =" 1> </li> </li> </li> </li> </li> </li> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li data-target = "#mycarousel" data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <div style = "height: 400px"> <!-Первый слайд-> <div style = "height: 400px"> <img data-holder-rendered = "true" src = "../ ICON1.PNG"> <h1> title state = "hrc =" ../ ICON1.PNG "> Содержание </p> <!-Название слайда-> <div> Название 1 </div> </div> <!-Второй слайд-> <div> <img data-holder-rendered = "true" src = "../ Images/icon2.png"> <div> title2 </div> </div> <!-Third Slide-> <div> <img Data-holder-rendered = "true". src = "../ Images/icon3.png"> <div> title3 </div> </div> <!-Навигация по праву в прямом эфире-> <a href = "#mycarousele" data-slide = "prev"> <pan aria-hidden = "true"> </span> <pan> </span> </a> <a href = "#mycarous"> </span> </a> <a href = "#myCarous" aria-hidden = "true"> </span> <pan> next </span> </a> </div> </div> <script> $ (function () {$ ('#mycarousel'). On ('slide.bs.carouseel', function () {// alert ("function");});});3.9 Группа панели
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Plagin-Page (Tab) </title> <link rel = "href =" ../ JSS/bootstrap.min.css "> <cript src =" ../ js/js/jsbery.min. src = "../ js/bootstrap.min.js"> </script> <body> <div id = "panel-group"> <!-Содержание панели закрыто-> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#панель-группа" href = "#collapseone"> panel title </a> </h4> div> div> div> div> div> div> div> div> div> div> div> div> div> div> id = "collapseOne"> <div> Содержание панели </div> </div> <!-Содержимое панели Open-> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#панель-группа" href = "#collapsetwo"> Панель </a> </h4> </div> <div = "collapsetwo" Содержание </div> </div> </div> </body>
3.10 СМИ запрос
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "максимальная шкала = 1,0, минимальная шкала = 1.0, пользовательский scalbable = 0, width = width, начальная шкала = 1.0"/> </title> title </title> <stement> <stement> </stythte> wilet> wilet> wilet> wid> {widte> wid> {widte> wilet> diThTh> 200px; фоновый цвет: красный;}/*Когда максимальная вкусная ширина составляет 980px, то есть вкусный <= 980px Внутренний стиль вступает в силу*/@media (максимальная ширина: 320px) {div {font-size: 10px; фон: желтый;}} </style> </head> <body> <div>. Query </div> </body> <script> window.onresize = function () {var mydiv = document.getElementsbytagname ("div") [0]; mydiv.innerhtml = document.documentelement.clientWidth;} </script> </html>Четыре: что следует отметить
1. Контейнер, col - - (растровый), должен быть заверен в отдельный Div, а затем определить в нем другое содержимое.
2. Если вы хотите установить класс или идентификатор, который не может быть определен для запроса на медиа, нельзя определить для элемента и написать класс или идентификатор определения col - - (растровый) в Div,
Medio - это способ написать ошибки классов для определения медиа -запросов <div> aa </div>
Правильный способ написать это
<div> <div> aa </div> </div>
3. Если вы используете контейнер для достижения адаптации высоты, вы не можете добавить высоту в элемент, и вам следует установить переполнение его родительского элемента.
4. При настройке позиционирования позиции для элемента ширина элемента составляет 0. Если вы хотите, чтобы элемент был центрирован, вам нужно добавить ширину: 100%; Текст-альбом: Центр;
5. При использовании входного тега, если COL - - (растровый) определяется для его родительского класса, вы можете добавить контроль формы к вводу, чтобы установить размер ввода, такой же большой, как родительский класс.