Bootstrap: Быстрое создание современных сайтов. Тимур Машнин
Чтение книги онлайн.

Читать онлайн книгу Bootstrap: Быстрое создание современных сайтов - Тимур Машнин страница 1

СКАЧАТЬ я быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном» – сайты, которые одинаково хорошо выглядят на всех типах устройств, от небольших телефонов до настольных компьютеров.

      Bootstrap был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

      Bootstrap можно загрузить на сайте getbootstrap.com или включить как ссылку на хранилище CDN (Content Delivery Network):

      <! – Latest compiled and minified CSS – >

      <link rel=«stylesheet» href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

      <! – jQuery library – >

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

      <! – Latest compiled JavaScript – >

      <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

      Использование Bootstrap требует включения элементов и атрибутов! DOCTYPE, lang и charset:

      <!DOCTYPE html>

      <html lang=«en»>

      <head>

      <meta charset=«utf-8»>

      </head>

      </html>

      Разработка сайта с «отзывчивым дизайном» всегда начинается с создания дизайна для мобильного телефона, а затем уже для планшета и далее для настольного компьютера – это называется принципом mobile-first. Поэтому подгоним ширину веб страницы под ширину экрана мобильного устройства, чтобы пользователь не елозил по странице в поисках контента, с помощью мета тега viewport:

      <meta name=«viewport» content=«width=device-width, initial-scale=1»>

      Два Bootstrap класса. container и. container-fluid обеспечивают контейнер для контента.

      <div class=«container»>

      <h1> My First Bootstrap Page </h1>

      <p> This is some text. </p>

      </div>

      Или

      <div class=«container-fluid»>

      <h1> My First Bootstrap Page </h1>

      <p> This is some text. </p>

      </div>

      Класс. container имеет фиксированную ширину для трех типов экранов:

      .container {

      padding-right: 15px;

      padding-left: 15px;

      margin-right: auto;

      margin-left: auto;

      }

      @media (min-width: 768px) {

      .container {

      width: 750px;

      }

      }

      @media (min-width: 992px) {

      .container {

      width: 970px;

      }

      }

      @media (min-width: 1200px) {

      .container {

      width: 1170px;

      }

      }

      Класс. container-fluid охватывает всю ширину viewport:

      .container-fluid {

      padding-right: 15px;

      padding-left: 15px;

      margin-right: auto;

      margin-left: auto;

      }

      Bootstrap Grid System

      Bootstrap табличная система позволяет создать до 12 столбцов на странице.

      Если вы хотите использовать меньшее количество столбцов, можно группировать столбцы вместе, чтобы создавать более широкие столбцы:

      Столбцы Bootstrap Grid System будут перестраиваться автоматически в зависимости от размера экрана.

      Для создания строки со столбцами нужно создать контейнер с классом. row, например, <div class=«row»>, в который включить столбцы:

      <div class=«row»>

      <div class=«col-*-*"> </div>

      <div class=«col-*-*"> </div>

      <div class=«col-*-*"> </div>

      </div>

      Выглядеть это будет следующим образом:

      Вместо первой звездочки можно поставить один из четырех классов:

      xs – для телефонов

      sm – СКАЧАТЬ