Скрипты

coincompare-v1-4-мониторинг-статистики-криптовалют CoinCompare - это веб-приложение PHP, которое отображает общую информацию, интерактивные исторические диаграммы для более чем 1700 криптовариантов. Он...
josh-шаблон-для-разработки-на-laravel Josh Admin - это шаблон для разработчика, основанный на Laravel 5. Создайте ваш следующий проект на Laravel. Используйте эту тему и сохраните свое...
social-network-система-социальных-сетей Социальная сеть - PHP Social Networking System - мощный PHP-скрипт, разработанный, чтобы позволить вам создать свою собственную социальную сеть! Он...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Адаптивный дизайн сайта с использованием BootStrap

Адаптивный дизайн сайта с использованием BootStrap

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

DEMO

Что означает «отзывчивость» в дизайне сайта?

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

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

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

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

Медиа-запросы позволяют на странице использовать разные правила стилей CSS, основываясь на характеристиках устройства.

Bootstarp 3 img 2

 

Шаг-1 HTML

Прежде чем начать экспериментировать с Bootstarp Framework? Необходимо создать базовую модель HTML.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <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>Адаптивный дизайн сайта с использованием BootStrap</title>

    <!-- таблицы стилей CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>

     <!-- ТЕЛО СОДЕРЖИМОГО СТРАНИЦЫ --

     <!-- добавить скрипты -->
    <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, это ускоряет загрузку страницы.

Топ меню навигации.

Это меню находиться в самом верху, это фиксированная панель навигации.
Далее разметка.

Спойлер - Топ меню навигации
<!-- фиксированная панель навигации -->
<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 -->

Слайдер.

Сразу после верхнего меню расположен слайдер, это обычно стандартное его расположение в веб-дизайне и содержит привычные элементы, это переключатели между слайдами, кнопки вперед-назад и сами слайды.

Спойлер - Слайдер
<!-- слайдер -->
<div id="slider" class="carousel slide" data-ride="carousel">
 <!-- управление -->
  <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">
    <!-- слайды -->
    <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>
   <!-- влево-вправо управление -->
  <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><!-- /.карусель -->

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

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

Спойлер - Модальное окно
<!-- 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 -->

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

Наконец мы подходим к главному — основной контейнер, который состоит из второго меню навигации, футера и блоков дополнительного контента. Второе меню не фиксированное, оно тоже на основе 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="https://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>

Две колонки с блоками.

Это довольно большой раздел, но всё достаточно просто ведь блоки повторяются. Просто обращайте внимание на комментарии в коде.

Спойлер - Две колонки с блоками
<!-- 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-primary, panel-success, panel-info, panel-warning or panel-danger.

Нижний колонтитул.

Есть только один необъяснимый элемент – Нижний колонтитул

Спойлер - Footer
<footer>
  <nav class="navbar navbar-default navbar-static-bottom" role="navigation">
  <p class="navbar-text">&copy Copyright 2015</p>
  <p class="navbar-text navbar-right"><a href="https://www.domen.ru/">Footer</a></p>
  </nav>
</footer>

Шаг-2 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 можно завершить, как вы видели нам нужно только подготовить необходимую разметку, всё остальное framework сделал сам! Замечательно, не правда ли!

В заключении:
В интерент магазине «ТВ-Снаб», вы можете приобрести качественные сетевые фильтры, удлинители, тройники для розеток, от ведущих производителей по доступным ценам.

 

  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...