Изучение начальной загрузки очень простое, а стиль, который он обеспечивает, очень красивый. Просто немного простое исследование может создать красивые страницы.
Сайт -сайт Bootstrap китайский веб -сайт: http://v3.bootcss.com/
Bootstrap предоставляет три типа загрузки:
Начальная загрузка для производственных средств
Скомпилируйте и сжали файлы CSS, JavaScript и Font. Не содержать документы и исходные файлы.
Начальный исходный код
Меньше, JavaScript и Font -файлы исходный код и с документацией. Требуется меньший компилятор и некоторая работа настройки.
Набережный
Это проект по портированию источника от меньшего количества SASS для быстрого введения в проектах Rails, Compass или SASS.
На самом деле, мы можем использовать его без загрузки Bootstrap:
На сайте Bootstrap Chines специально создал свой собственный бесплатный сервис ускорения CDN для Bootstrap. Основываясь на сервисе CDN производителей внутренних облаков, скорость доступа быстрее, эффект ускорения более очевиден, нет никаких ограничений скорости и полосы пропускания, и он навсегда свободен.
base.html
<! 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> Bootstrap 101 шаблон </title> <!-Bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <hody> <h1> hello, bootstrap! </h1> <!-jQuery (необходимо для плагинов Javascript от Javascript)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrap был представлен в Base.html. Сохраните, и мы можем использовать стили, предоставленные Bootstrap.
Значок шрифта
Bootstrap предоставляет более 200 значков по умолчанию. Мы можем использовать эти значки через тег SPAN:
<h3> icon </h3> <pan> </span> <pan> </span> <pan> </span> <pan> </span> <pan> </span> <pan> </span> </span> <pan> </span> <pan> </span> <pran> </span>
Кнопка
Тег <tood> </button> используется для создания кнопок, а Bootstrap предоставляет богатые стили кнопок. <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type = "Кнопка"> Кнопка </button> <button Type = "> Primary </button> <button Type =" Button "> Успешное </button> <button Type =" Button "> Info </button> <h3> Показать значок в кнопке </h3> <Кнопка Type ="
В дополнение к размеру кнопки по умолчанию, Bootstrap также предоставляет три параметра для настройки размера кнопки, а именно: BTN-LG, BTN-SM и BTN-XS.
Выпадающее меню
Раскрывающееся меню является одним из самых распространенных взаимодействий, а начальная загрузка обеспечивает красивые стили.
<h3> выпадающее меню </h3> <div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадение" aria-expaded = "true"> выпадающий <pan> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li olue = "devisation"> <a lebelledby = "1 Dropdowdu1"> <li lemex = "<alabelledby =" 1-й ". href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a rol = "menuitem" tabindex = "-1" href = "#"> отдельная ссылка </a> </li> </ul> </div>
Входная коробка
Используйте тег <Input> </input> для создания окна ввода.
<h3> входное поле </h3> <div> <pan> </span> <input type = "text" chicelder = "username"> </div> <div> <pran> </span> <input type = "password" Placeholder = "password"> </div>
Навигационная планка
Навигационная планка необходима в качестве руководства по всему веб -сайту.
<h3> навигационная панель </h3> <av> <div id = "Navbar"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#о"> о </a> </li> <li> <a href = "#contact"> contact </a> </li> <li> <li> ROLE = «Кнопка" aria-expaded = "false"> выпадает <pran> </span> </a> <ul role = "menu"> <li> <a href = "#"> action </a> </li> <li> <a href = "#"> hore Action </a> </li> <li> </li> <li> vAv> <li> <li> <li> <li> <li> <li> <ti> <li> <pi> <pi> Ссылка </a> </li> </li> </li> </ul> </div> <!-/. Nav-Collapse-> </div> </nav>
Форма
Передача данных между людьми и системами должна быть заполнена формами. Например, представление информации о регистрации/входе в систему, представление условий запроса и т. Д. Используйте тег </form> для создания формы.
<h3> form </h3> <form> <div> <pran> </span> <input type = "email" id = "exageminputemail1" Placeholder = "Enter Email"> </div> <div> <pan> </span> <input type = "password" id = "exampureInputPassword1" Placeholder = "Password"> </div> <div> <div> <label for vemportInpul type = "file" id = "exampureInputFile"> <p> Пример справочного текста на уровне блока здесь. </p> </div> <div> <Babel> <input type = "fackbox"> Chece Me Out </label> </div> <button Type = "Opport"> Opport </button> </form>
Предупреждающая коробка
Предупреждающие ящики являются важным средством для системы передачи информации и предоставления руководства пользователям. Там нет лейбла для предупреждающих коробок, и стиль, предоставленный Bootstrap, может мгновенно создать красивые коробки для предупреждения.
<h3> Блок предупреждения </h3> <div rol = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <strong> предупреждение! </strong> лучше проверить себя, вы не будете выглядеть слишком хорошо. </div> <div rol = "alert"> <a href = "#"> Успех! </a> </div> <div rol = "alert"> <a href = "#"> Info! </a> </div> <div role = "alert"> <a href = "#"> предупреждение! </div>
Прогресс
Процесс обработки системы часто требует, чтобы пользователи ждали, и в панели прогресса позволяет пользователям воспринимать процесс обработки системы, тем самым повышая толерантность.
<h3> Бар хода </h3> <div> <div rol = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100"> 70% </div> </div>
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.