Создаём адаптивный сайт с помощью Bootstrap

В данном уроке мы создадим сайт на базе bootstrap. Данная статья является переводом, взятого с сайта script-tutorials.com.

Если вы никогда не слышали о bootstrap, то я вам рекомендую присмотреться к данному фреймворку. Он является отличным выбором для тех, кто ценит удобство и скорость загрузки сайта. Сегодня я вам расскажу о том, как создать адаптивный, отзывчивый шаблон с помощью Bootstrap 3.

Шаблон будет иметь два навигационных меню, слайдер, рекламный блок, различные блоки с контентом, элементы формы и нижнюю часть сайта – footer. Обратите внимание, что мы не будем использовать изображения, так как наша конечная цель будет создание сайта с быстрой загрузкой страниц.

Что означает отзывчивый веб-дизайн сайта?

Отзывчивый веб-дизайн означает направление в разработке сайта, когда основное внимание в проектирование сайта отдается качеству просмотра: простое чтение, удобная навигация, панорамирование и прокрутка ( скролинг) – в широком спектре устройств ( с мобильных телефонов и  настольных компьютерных мониторов )

Сайт на основе отзывчивого веб-дизайна адаптирует макет с помощью fluid, пропорций, гибких изображений, CSS3 Media запросов и тд.

Fluid grid concept требует того, чтобы размеры страниц были в относительных единицах, как проценты.

Гибкие изображения подразумевают размер в относительных единицах, с тем чтобы не допустить их отображения вне их содержащего элемента.

Media запросы позволяют использовать различные CSS стили, основанных на характеристиках устройств, так чтобы сайт отображался во всю ширину браузера.

В результате урока мы получим следующее:

bootstrap сайт

Демо-версия

Скачать файлы урока

Прежде чем начать экспериментировать с Bootstrap нужно создать базовую HTML модель:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<meta name="description" content="Responsive Websites Using BootStrap - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Responsive Websites Using BootStrap | Script Tutorials</title>

<!-- css stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>

<!-- BODY PAGE CONTENT -->

<!-- add javascripts -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

В заголовке мы включили все важные мета-теги и два CSS файлы, прежде чем закрыть body, мы добавили: JQuery и bootstrap javascripts. Это ускоряет загрузку страницы.
Теперь мы можем создавать шаблон с любого элемента страницы.

Верхнее навигационное меню

Фиксированное навигационное меню располагается вверху и имеет следующую разметку:

<!-- fixed navigation bar -->
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap website</a>
</div>
<div class="collapse navbar-collapse" id="b-menu-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
</ul>
</div> <!-- /.nav-collapse -->
</div> <!-- /.container -->
</div> <!-- /.navbar -->

Как правило, меню состоит из трех частей: скрытая кнопка (для мобильных устройств, чтобы открыть меню), Navbar-бренд (бренд / название) элемент, и UL-LI выпадающее меню.

Слайдер

Ниже верхнего меню располагается слайдер, имеющий следующую разметку:

<!-- slider -->
<div id="slider" class="carousel slide" data-ride="carousel">
<!-- controls -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- slides -->
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-default" href="#" role="button">Button 1</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Button 2</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Button 3</a></p>
</div>
</div>
</div>
</div>
<!-- left-right controls -->
<a class="left carousel-control" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

Код вверху очень прост и содержит обычные элементы такие, как способность переключения слайдов (индикаторов), кнопки вперед-назад, и сами слайды.

Второе навигационное меню

Наконец мы подошли к самому главному – главный контейнер, который состоит из второго навигационного меню, сноске и дополнительных блоков контента. Второе меню не фиксируется, оно похоже на меню UL-LI основе, самый правый элемент вызывает предварительно сделанное модальный окно:

<!-- second menu bar -->
<nav class="navbar navbar-default navbar-static">
  <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#b-menu-2">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.script-tutorials.com/responsive-website-using-bootstrap/">Bootstrap website</a>
  </div>

  <!-- submenu elements for #b-menu-2 -->
  <div class="collapse navbar-collapse" id="b-menu-2">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"></span> About</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Other <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Submenu 1</a></li>
          <li><a href="#">Submenu 2</a></li>
          <li><a href="#">Submenu 3</a></li>
          <li><a href="#">Submenu 4</a></li>
          <li class="divider"></li>
          <li><a href="#">Submenu 5</a></li>
          <li><a href="#">Submenu 6</a></li>
          <li class="divider"></li>
          <li><a href="#">Submenu 7</a></li>
        </ul>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li data-toggle="modal" data-target="#my-modal-box"><a href="#"><span class="glyphicon glyphicon-share"></span> Share popup</a></li>
    </ul>
  </div><!-- /.nav-collapse -->
</nav>

Модальное окно

Модальные коробки являются важной частью пользовательского интерфейса, поэтому мы создадим одно модальное окно:

<!-- modal box -->
<div class="modal fade" id="my-modal-box" tabindex="-1" role="dialog" aria-labelledby="my-modal-box-l" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="modal-title" id="my-modal-box-l">
          <h3>Share it</h3>
        </div>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <p>Share it box content</p>
        <!-- You may add AddThis code here -->
      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Двухколончатый макет с блоками

В этом разделе довольно огромен, но просто, так как блоки повторяются. Обратите внимание на мои комментарии:

<!-- 2-column layout -->
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">

<!-- jumbotron -->
<div class="jumbotron">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a role="button" href="#" class="btn btn-lg btn-success">Sign up today</a></p>
</div>

<div class="row">

<!-- column 1 -->
<div class="col-sm-6">

<!-- box 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>

<!-- box 2 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 2 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>
</div> <!-- /column 1 -->

<!-- column 2 -->
<div class="col-sm-6">

<!-- box 3 -->
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 3 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>

<!-- box 4 -->
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel 4 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>
</div> <!-- /column 2 -->

</div><!--/row-->
</div><!--/span-->

<!-- column 3 (sidebar) -->
<div class="col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group" role="navigation">
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>

<!-- box 5 -->
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Form elements</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="emailField">Email address</label>
<input type="email" class="form-control" id="emailField" placeholder="Enter email">
</div>
<div class="form-group">
<label for="selectField">Type</label>
<select class="form-control" id="selectField">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span class="sr-only">30% Complete</span></div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>

<!-- box 6 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 6 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>

</div><!-- /column 3 (sidebar) -->

</div><!--/row-->

В начале, вся схема разделена на две колонки, первый столбец разделен на другие две колонки. В первой колонке, есть “Jumbotron’ элемент, который вы можете использовать, чтобы внедрить что-либо. Как я отметил раньше – все блоки очень похожи, вот разметка основного блока:

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
</div>
</div>

Для того чтобы изменить его цвет, вы можете изменить свой ​​класс (panel-default) для одной из следующих: panel-primary, panel-success, panel-info, panel-warning или panel-danger.

Низ страницы – Footer

Далее разметка footer:

<footer>
  <nav class="navbar navbar-default navbar-static-bottom" role="navigation">
  <p class="navbar-text">&copy Copyright 2013</p>
  <p class="navbar-text navbar-right"><a href="http://www.script-tutorials.com/">Script Tutorials</a></p>
  </nav>
</footer>

Шаг 2 – CSS

По большому счету – все то, что мы создали – не требует специальных стилей. Большинство возможных элементов уже определены в начальном файле стилей (bootstrap.min.css). Тем не менее, у нас есть только один настраиваемый элемент – слайдер (карусель):

css/style.css

.carousel {
height: 300px;
margin-bottom: 50px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: rgba(0, 0, 0, 0.8);
height: 300px;
}

Итог

На этом урок заканчивается. В принципе, мы только подготовили необходимую разметку страницы, все остальное сделал за нас готовые рамки bootstrap. Замечательный, не так ли? Всем спасибо за чтение, до следующих уроков.
Источник урока: http://www.script-tutorials.com/responsive-website-using-bootstrap