Bootstrap Введение
Цель
Bootstrap — самый популярный фронтенд-фреймворк, и его третья версия (v3.0.0) уже выпущена. Этот учебник поможет вам начать работу с Bootstrap 3.
Вы также увидите, как использовать настройку, чтобы придать фреймворку индивидуальность, например создание макетов с помощью сеток, создание навигации с помощью nav, создание слайд-шоу с помощью carousel и добавление сторонних плагинов, таких как социальные плагины и Google Maps.
Что такое Bootstrap
Bootstrap — это фронтенд-фреймворк для быстрой разработки веб-приложений и веб-сайтов.
В современной веб-разработке есть несколько компонентов, которые нужны почти во всех веб-проектах.
Bootstrap предоставляет вам все эти базовые модули — сетку, типографику, таблицы, формы, кнопки и адаптивность.
Кроме того, существует множество других полезных фронтенд-компонентов, таких как выпадающие меню, навигация, модальные окна, автодополнение, пагинация, карусель, хлебные крошки, вкладки, миниатюры, заголовки и так далее.
С их помощью вы можете быстрее и проще создать веб-проект и запустить его.
Более того, поскольку весь фреймворк основан на модулях, вы можете настроить его с помощью собственного CSS-кода или даже провести серьёзную переработку после запуска проекта.
Он основан на нескольких лучших практиках, и мы считаем, что сейчас хорошее время начать изучение современной веб-разработки. Освоив основы HTML и JavaScript/jQuery, вы сможете применять эти знания в веб-разработке.
Хотя есть критика, что все проекты, созданные с помощью Bootstrap, выглядят одинаково, и что можно создать сайт, не зная слишком много HTML + CSS, мы должны понимать, что Bootstrap — это универсальный фреймворк. Как и всё универсальное, его нужно настраивать, чтобы сделать уникальным. Когда вы настраиваете его, нужно копать глубже, и без прочной основы HTML + CSS это неосуществимо.
Конечно, помимо Bootstrap, есть много других хороших фронтенд-фреймворков. Какой фреймворк использовать — выбор разработчика, но Bootstrap определённо стоит попробовать.
Почемуиспользовать его в вашем проектеиспользовать Bootstrap?
Скачайте и изучите структуру файлов
Вы можетеhttps://github.com/twbs/bootstrap/archive/v3.0.0.zipилиhttps://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zipСкачайте Bootstrap версии 3.0.0. Мы используем первый, а вы также можете использовать второй.
Кроме того, код, который мы предоставляем для скачивания, содержит папку с кодом Bootstrap, скачанную по первой ссылке. Он также включает custom.css, который содержит исходный CSS, использованный для настройки Bootstrap.
После распаковки вы обнаружите, что в корневой папке bootstrap-3.0.0 есть несколько файлов и папок.
Основной CSS-файл — bootstrap.css и его минифицированная версия bootstrap-min.css — находится в папке 'css' внутри папки 'dist' в корневой папке bootstrap-3.0.0.
Внутри 'dist' есть папка 'js', которая содержит основной файл JavaScript bootstrap.js и его минифицированную версию.
В корневой папке есть отдельная папка 'js', которая содержит различные плагины JavaScript в разных файлах.
В папке 'assets' в корневом каталоге вы найдете еще одну папку 'js'. Здесь находится html5shiv.js из HTML5 shim, используемый для поддержки IE8. Также есть файл respond.min.js, используемый для поддержки медиазапросов в IE8. Эта папка также содержит jquery.js, от которого зависят js-плагины Bootstrap.
В той же папке есть папка 'ico', содержащая значок favicon и различные значки для мобильных устройств.
Папка 'css' в том же пути содержит css-файлы для документа.
Папки '_includes' и '_layouts' содержат некоторые файлы структуры макета по умолчанию, которые могут быть полезны для быстрого прототипирования.
Папка 'less' в корневой папке содержит несколько файлов .less. Эти файлы будут полезны, если вы разрабатываете на основе LESS.
В корневой папке есть несколько файлов. Некоторые из них — HTML-файлы для базового прототипирования, а некоторые — bower.json и browserstack.json для компиляции на основе Bower. Кроме того, есть composer.json и YAML-файл _config.yml.
Помимо загрузки по указанной ссылке, вы также можете использовать следующую команду для компиляции всех файлов CSS и JS -
$ bower install bootstrap
Вы можете клонировать Git-репозиторий Bootstrap.
git clone git://github.com/twbs/bootstrap.git
В этом руководстве мы загрузили только Zip-файл и не будем его использовать.
После изучения этого руководства мы рекомендуем установить фреймворк через bower, чтобы понять, как он работает.
NetDNA поддерживает скомпилированные и минифицированные версии Bootstrap CSS, JS и CSS других тем. Вы можете ссылаться на них с помощью следующих инструкций.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Разработка с Bootstrap v3.0.0
Базовый HTML
Ниже представлена базовая структура HTML, которая будет использоваться в нашем проекте.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js.html"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js.html"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js.html"></script>
</body>
</html>
Обратите внимание, что шаблон добавляетhtml5shiv.js и respond.min.js, которые используются для поддержки IE8. Эти файлы были добавлены в Bootstrap версии 3.
Мы поместили папку bootstrap-3.0.0 в папку twitter-bootstrap внутри корневой папки веб-сервера. Все создаваемые HTML-файлы будут размещены внутри twitter-bootstrap. Мы упоминаем об этом, чтобы упростить процесс разработки.
Настройка
Мы будемнастраивать индивидуальный стиль CSS-блока. Поэтому, не нарушая исходные CSS-файлы (расположенные в папке dist из bootstrap-3.0.0), в той же папке мы создадим отдельный CSS-файл с именем custom.css. Затем в HTML-файле мы подключаем этот CSS-файл сразу после исходного CSS-файла. Таким образом, мы можем переопределить стили по умолчанию, которые хотим изменить, но если Bootstrap будет обновлён, исходные CSS-файлы также обновятся без нарушения наших настроек. Мы рекомендуем придерживаться этого подхода во время разработки.
Создание навигации
Чтобы создать навигацию, добавьте следующий код в HTML-файл сразу после открывающего тега body.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png.html"></a></li>
<li class="active"><a href="../index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="../index.html" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
Для навигации Bootstrap использует класс 'navbar' на уровне контейнера. Поэтому он назначается элементу nav, который содержит всю навигацию.
Мы использовали класс 'navbar-inverse', чтобы изменить цвета панели навигации по умолчанию, используя тёмный цвет вместо предыдущего светлого по умолчанию. Класс 'navbar-fixed-top' гарантирует, что панель навигации остаётся зафиксированной сверху при прокрутке HTML-страницы вниз.
В Bootstrap V3.0.0 использование role="navigation" при создании навигации является новым дополнением.Bootstrap рекомендует такое использование, чтобы панель навигациибыла легко доступна.。
На этом этапе мы добавили 'padding-top: 80px;' к body в файле custom.css. Пиксели, которые вы добавляете в качестве верхнего отступа к body, могут различаться, но если вы этого не сделаете, верхняя часть содержимого после панели навигации будет скрыта.
Внутри контейнера nav у нас есть неупорядоченный список с классами 'nav' и 'navbar-nav'. Внутри этого неупорядоченного списка каждый элемент списка содержит ссылку из навигации.
Класс 'navbar-brand' используется для отображения названия бренда. Мы использовали изображение. Поскольку высота изображения превышает базовую высоту navbar, здесь мы выполняем некоторые настройки. Увеличьте свойство 'line-height' для '.navbar-nav>li>a' с исходного значения по умолчанию 20px до 50px, а размер шрифта измените на 16px.
Для самой правой ссылки мы добавили выпадающее меню. Для класса 'dropdown', добавленного к соответствующему li, сразу после него добавьте ссылку с двумя классами 'dropdown-toggle' и 'caret'. Эта ссылка фактически содержит текст ссылки "social" из нашего проекта. Этот li затем содержит неупорядоченный список, и каждый элемент списка, вложенный в список, содержит ссылки, отображаемые в выпадающем меню.
В выпадающем меню мы добавили социальные плагины. Первый li содержит разметку Google Plus, второй li содержит разметку Facebook, а третий li содержит разметку для отображения кнопки Twitter и некоторые JS-скрипты.
Кроме того, вы должны добавить следующую разметку и скрипт после открывающего тега body, чтобы кнопка Facebook работала.
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Чтобы кнопка Twitter работала, мы добавляем следующий скрипт перед закрывающим тегом body.
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Мы используем следующие стили, чтобы добавить дополнительное оформление социальным кнопкам с классом 'socials'.
.socials {
padding: 10px;
}
На этом наша навигация завершена.
Создание слайд-шоу с Carousel
Чтобы создать слайд-шоу под панелью навигации на главной странице проекта, мы будем использовать следующую разметку.
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="../index.html" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="../index.html" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
В Carousel есть четыре раздела. Основной контейнер создается с помощью тега div с классом 'carousel slide'.
Затем идет упорядоченный список с классом 'carousel-indicators'. Каждый элемент списка в ol представляет собой слайд. При загрузке страницы слайд, загружаемый по умолчанию, имеет класс 'active'. При отображении вы увидите их как маленькие кружки под подписью.
Затем каждый слайд (изображение) помещается в тег div с классом 'item'. Каждый элемент вложен в div с классом 'carousel-caption'. carousel-caption содержит некоторую разметку, отображаемую как подпись вместе с изображением. Абзац содержит h1 и кнопку; вы также можете добавить собственную разметку.
Последняя часть предназначена для управления следующим/предыдущим слайдом. Здесь используются классы 'left' и 'carousel-control' для определения предыдущего и классы 'right' и 'carousel-control' для определения следующего.
Классы 'icon-prev' и 'icon-next' используются для значков следующего и предыдущего.
Мывнесли некоторые изменения в карусель по умолчанию.Мы хотим, чтобы подписи, индикаторы и значки следующего/предыдущего отображались на несколько пикселей выше их позиций по умолчанию.
Чтобы добиться этого, мы добавим следующие стили в файл custom.css.
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
Мы также настроили h1, добавив ему нижний отступ в 30 пикселей.
h1 {
margin-bottom: 30px
}
Адаптивные изображения
Возможно, вы заметили, что для каждого изображения в слайд-шоу мы использовали класс 'img-responsive'. Это новая функция в Bootstrap v3.0.0.Используя класс 'img-responsive' в теге img, Bootstrap делает изображение адаптивным.。
Создание сеток
Ниже слайд-шоу мы используем сетку для размещения содержимого. Начните сетку с div, имеющего класс 'container'. Обратите внимание, что мы собираемся разработать адаптивный веб-сайт, и, в отличие от предыдущих версий Bootstrap, здесь у контейнера один класс, и он адаптивен по умолчанию.
Контейнерный div вкладывает несколько div с классом 'row' (три в первом ряду, шесть во втором ряду), чтобы создать строки в сетке Bootstrap.
Каждая строка содержит div с классом 'col-x-y' для создания столбцов. Значение x может быть: xs для мобильных устройств, sm для планшетов, md для ноутбуков и меньших экранов настольных компьютеров, lg для больших экранов настольных компьютеров. Это первый подход. Значение y может быть любым положительным целым числом, но общее количество столбцов в сетке не должно превышать 12. В нашем проекте для простоты мы использовали lg, но поскольку мы так сделали, возможно, вы захотите просмотреть сайт проекта на телефоне или планшете для сравнения.
В одном из следующих уроков у нас будет полный урок по системе сеток Bootstrap, чтобы изучить её увлекательные адаптивные возможности.
В этом примере мы хотим, чтобы три столбца в первой строке имели одинаковую ширину, поэтому мы используем 'col-lg-4' для всех столбцов. Во второй строке мы хотим, чтобы шесть столбцов имели одинаковую ширину, поэтому мы используем 'col-lg-2' для всех столбцов.
Ниже представлена разметка для сетки, содержащей две строки: в первой строке три столбца, а во второй строке шесть столбцов.
<div class="row barone"> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
Мы завершаем сетку элементом hr и нижним колонтитулом (footer) со следующей разметкой.
<hr> <p>Copyright@2013-14 by ToDo App.</p>
Использование таблиц
На странице price.html нашего проекта мы использовали таблицу для представления прайс-листа, с разметкой, показанной ниже.
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Мы используем классы 'table' и 'table-bordered' из оригинального файла Bootstrap CSS. Однако мы настроили его, добавив следующий CSS в файл customize.cssчтобы внести некоторые изменения, чтобы таблица выглядела иначе.
th {
background-color: #428BCA;
color: #EC8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Использование бейджей
Мы используем класс 'badge' для отображения некоторого текста в таблице. У нас есть пользовательский класс badge со следующим CSS.
.badge {
background-color: #428BCA;
color: #fff;
font-size: 22px;
}
Для этой страницы и страницы contact.html мы добавили ещё одно CSS-правило в customize.css.
.container > h1 {
text-align: center;
}
Это выравнивает h1 по центру.
Использование форм
В файле contact.html мы создали три столбца. В первом столбце мы встраиваем форму. Форма использует стили по умолчанию.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Класс 'form-horizontal' сохраняет форму выровненной по горизонтали.Обратите внимание, что мы добавляем role="form" для доступности. Это новая функция в версии 3.0.0.
Чтобы расположить каждый элемент формы, Bootstrap 3.0.0 использует новый класс 'form-group'.
На этой странице во втором столбце сетки мы просто размещаем текст.
Добавление Google Maps
На странице contact.html в третьем столбце сетки мы добавили Google Map. Для этого мы использовали следующую разметку.
<div id="map_canvas"></div> </div>
Следующий js добавлен в раздел head HTML-файла.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
Перед вышеупомянутым js необходимо добавить следующий тег script.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Чтобы карта отображалась правильно, необходимо добавить следующие стили в custom.css.
#map_canvas {
width: 400px;
height: 400px;
}
Итак, вот как создать простой проект на основе Bootstrap V3.0.0. Но мы лишь поверхностно затронули тему; в последующих главах будут даны более подробные объяснения.
Другие расширения