Многие компании в настоящее время используют структуру Bootstrap в разработке. Bootstrap-это работа команды Twitter, которая значительно упрощает нашу фронтальную разработку. (Позже я суммирую меньше использования)
Учимся использовать API, я предлагаю вам напрямую просмотреть API официального веб -сайта, адрес: http://www.bootcss.com/
Вот некоторые целевые визуализации:
Ниже я суммирую методы и принципы в небольшой демонстрации:
Первый шаг - загрузить сжатый пакет Bootstrap по адресу http://www.bootcss.com/, создать новый index.html, использовать Sublime или другой редактор, чтобы открыть страницу индекса, а каталог после декомпрессии - это
Шаг 2 : Скопируйте базовый шаблон с официального веб-сайта http://v3.bootcss.com/getting-started/, чтобы облегчить последующее развитие.
<! 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 href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim and respond.js для поддержки IE8 html5 elements and media-> <! <!-[если LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respn.js/1.4.2/rer.min. <! [endif]-> </head> <body> <h1> Привет, мир! </h1> <!-jQuery (необходимо для плагинов Bootstrap's JavaScript)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-включить все скомпилированные плагины (ниже) или включать отдельные файлы-> <сценарий> <! src = "js/bootstrap.min.js"> </script> </body> </html>
1) Примечание. Ссылка на jQuery.js должна быть перед Bootstrap.min.js, и лучше всего загрузить jquery.js и поместить его в путь JS, <script src = "js/jquery.min.js"> </script>
Поскольку позже, когда я подражал, я обнаружил, что эффекты раскрывающейся и анимации каруселей исчезли, и я обнаружил, что файл jQuery базового шаблона был загружен и не может быть подключен к Интернету, поэтому я не загружал его. Лучше всего процитировать местный сам.
2) ПРИМЕЧАНИЕ. Ссылка на CSS помещается над страницей, а ссылка JS размещена ниже страницы, поскольку сначала CSS должна загрузить визуализированную страницу, а JS должен загружать и выполнять после завершения рендеринга страницы; и мета-операторы для мобильных устройств адаптированы к: <meta name = "viewport" content = "width = ширина устройства, начальная масштаба = 1">
Шаг 3, навигационная планка
1) Эффект центрирования: должен быть изменен в контейнер.
2) Измените белый на черный с эффектом контраста: <Av>
3) Навигационная полоса закреплена на вершину и добавляйте атрибуты класса времени: фиксированная навигация
<nav> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> Zootopia </a> </div> <!-Собирайте навигационные ссылки, формы и другое содержание для переключения-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <A href = "#"> homepage <pan> (ток) </span> </l> </li> <li> <li> Описание </a> </li> <li> <a href = "#"> функции </a> </li> <li> <a href = "#"> о </a> </li> </div> <!-/.navbar-collapse-> </div> <!
4) Навигационный панель будет покрывать верхнюю часть тела, поэтому добавьте стиль
<style type = "text/css"> body {padding-top: 50px; } </style>5) Избранные навигационные элементы добавляют раскрывающиеся меню
<li> <a href = "#" data-toggle = "Выпадение"> функции </a> <ul> <li> <a href = "#"> животное 1 </a> </li> <li> <a href = "#"> животное 2 </a> </li> <li> <a href = "#"> Animal 3 </i> <li> <al> <a li> 4 </a> </li> </li> </li>
Обратите внимание, что содержимое подменю вложено в самый внешний тег LI, а тег LI имеет раскрывающуюся класс, а подменю также является тегом UL, а класс выпадает меню. См. Выше для конкретных отношений картирования.
Шаг 4: Увеличьте эффект вращения и копируйте и измените модуль каруселей компонента начальной загрузки:
<div id = "Carousel-example-Generic" data-ride = "carousel"> <!-Индикаторы-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic" data-to-to-to "1"> </li> <li> <li> <li> <li> <li> <li> <li data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-обертка для слайдов-> <div role = "listbox"> <viv> <img src = "Image/1.jpg"> <h Div> <h1> zootopia 1 </h1> <p>. Опыт позиции просмотра дома женского дома, которая открывает два числа, которые встречаются в стране </p> </div> </div> <div> <img src = "Image/2.jpg"> <div> <div> <img src = "Image/2.jpg"> <Div> <h1> Zootopia 1 </h1> <p> Позиция. the two numbers that occur in the country</p> </div> </div> <div> <img src="image/3.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous page</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next page</span> </a> </div>
1) Чтобы не было пустого места или зазоров при вращении изображения, добавьте стиль
.carousele {высота: 500px; фоновый цвет: #000; } .carousel .item {height: 500px; фоновый цвет: #000; } .carousel img {width: 100%; }2) Установите стиль для текста, чтобы сделать его более красивым
.casousele-caption p {маржинальный бат: 20px; размер шрифта: 20px; высота линии: 1,8; }Текущие эффекты следующие
Давайте продолжим: (кодирование обновляется ...)
Вторая часть была обновлена, демонстрация в случае разработки на основе начальной загрузки (II)
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам замечательную тему: учебник по обучению Bootstrap