Скрипты

ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...
wowonder-v-1-3-социальная-сетевая-платформа WoWonder - это PHP-скрипт социальной сети, WoWonder это лучший способ чтобы начать создание собственного сайта социальной сети. Этот скрипт имеет все...

Для 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)

There are no comments posted here yet

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

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

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

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

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

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