Bootstrap Учебник

Bootstrap - самая популярная структура HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете.

Что такое Bootstrap?

Что такое отзывчивый веб-дизайн / Адаптивная верстка

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


Немного об истории Bootstrap

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


Зачем использовать Bootstrap?

Преимущества Bootstrap:


Где взять Бутстрап?

Существует два способа начать использование Bootstrap на вашем собственном веб-сайте.
Ты можешь:


Загрузка Bootstrap

Если вы хотите загрузить и загрузить Bootstrap самостоятельно, перейдите на сайт getbootstrap.com и следуйте инструкциям.


Загрузочный CDN

Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его из CDN (Network Delivery Network).
MaxCDN предоставляет поддержку CDN для CSS и JavaScript для Bootstrap. Вы также должны включить jQuery:

MaxCDN / Bootstrap:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Одно из преимуществ использования Bootstrap CDN:

многие пользователи уже загрузили Bootstrap из MaxCDN при посещении другого сайта. В результате он будет загружен из кеша при посещении вашего сайта, что приведет к более быстрому времени загрузки. Кроме того, большинство CDN будут следить за тем, чтобы пользователь запросил у него файл, он будет обслуживаться с ближайшего к нему сервера, что также приведет к более быстрому времени загрузки.



JQuery

Bootstrap использует jQuery для плагинов JavaScript (например, модалы, всплывающие подсказки и т. Д.). Однако, если вы просто используете часть CSS Bootstrap, вам не нужен jQuery.


Создание первой веб-страницы с помощью Bootstrap

1. Добавьте документ HTML5
Bootstrap использует HTML-элементы и свойства CSS, для которых требуется тип HTML5.
Всегда указывайте документ типа HTML5 в начале страницы, а также атрибут lang и правильный набор символов:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 является мобильным первым
Bootstrap 3 предназначен для реагирования на мобильные устройства. Первые стили мобильных устройств являются частью основной структуры.
Чтобы обеспечить правильный рендеринг и масштабирование касания, добавьте <meta> в <head> элемент следующий тег :

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

Часть width=device-width задает ширину страницы, чтобы следить за экраном на ширину устройства (который будет варьироваться в зависимости от устройства).
Часть initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы в браузере.

3. Контейнеры
Bootstrap также требует наличия содержащего элемента для обертывания содержимого сайта.
На выбор два класса контейнеров:

  1. Класс container обеспечивает адаптивный контейнер фиксированной ширины
  2. Класс container-fluid предоставляет полный контейнер ширины, охватывающий всю ширину окна просмотра
    Примечание. Контейнеры не связаны (вы не можете поместить контейнер в другой контейнер).

Две базовые загрузочные страницы

В следующем примере показан код базовой страницы Bootstrap (с адаптивным контейнером фиксированной ширины):

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Bootstrap Пример страницы с адаптивным контейнером фиксированной ширины</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Моя Первая Bootatrap Страница</h1>
  <p>Это параграф с текстом.</p>
</div>

</body>
</html>

В следующем примере показан код базовой страницы Bootstrap (с контейнером полной ширины):

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Bootstrap Пример страницы с контейнером полной ширины</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Моя Первая Bootatrap Страница</h1>
  <p>Это параграф с текстом.</p>
</div>

</body>
</html>
Сайт визитка Bootstrap 3

Сайт визитка Bootstrap 3

Bootstrap верстка Начало работы


Эта часть находится внутри .container-fluid класса.

Этот .container-fluid обеспечивает контейнер с полной шириной, охватывающей всю ширину окна или экрана просмотра.

Для показа контента в адаптивном контейнере с фиксированной ширине используйте класс .container в коде для страницы Bootstrap.

Bootstrap верстка Grid Базовая

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

Сетчатые классы

Система сетки Bootstrap имеет четыре класса:

Вышеупомянутые классы могут быть объединены для создания более динамичных и гибких макетов.

Основная структура сетки Bootstrap

Ниже приведена базовая структура сетки Bootstrap:

Пример код HTML — Основная структура сетки Bootstrap

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Три равных столбца

.col-sm-4
.col-sm-4
.col-sm-4

В следующем примере показано, как получить три столбца равной ширины, начиная с таблиц и масштабируя их до больших рабочих столов. На мобильных телефонах столбцы будут автоматически складываться:

Пример код HTML — Три равных столбца сетки Bootstrap

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Два столбца разной ширины

.col-sm-4
.col-sm-8

В следующем примере показано, ка получить два столбца различной ширины, начиная с таблиц и масштабируя их до больших настольных компьютеров:

Пример код HTML — Два столбца разной ширины сетки Bootstrap

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Bootstrap верстка Типография


Настройки загрузки Bootstrap

Глобальный размер шрифта Bootstrap равен 14px с высотой строки 1.428. Это применяется к <body> элементу и ко всем абзацам (<p>). Кроме того. все <p> элементы имеют нижнее поле, равное половине их вычисленной высоты линии (по умолчанию 10 пикселей).


Параметры загрузки Bootstrap vs. Browser

В этой части мы рассмотрим некоторые элементы HTML, которые будут немного отличаться от Bootstrap по сравнению с настройками браузера.


<H1> - <h6>

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

По умолчанию Bootstrap будет создавать заголовки HTML (<h1> до <h6>) следующим образом:

Пример код HTML — <H1> - <h6>

<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>

<Маленький>

h1 заголовок вторичный текст

h2 заголовок вторичный текст

h3 заголовок вторичный текст

h4 заголовок вторичный текст

h5 заголовок вторичный текст
h6 заголовок вторичный текст

В Bootstrap <small> элемент HTML используется для создания более легкого вторичного текста в любом заголовке:

Пример код HTML — Вторичный текст в Заголовке

<h1>h1 заголовок <small>вторичный текст</small></h1>
<h2>h2 заголовок <small>вторичный текст</small></h2>
<h3>h3 заголовок <small>вторичный текст</small></h3>
<h4>h4 заголовок <small>вторичный текст</small></h4>
<h5>h5 заголовок <small>вторичный текст</small></h5>
<h6>h6 заголовок <small>вторичный текст</small></h6>

<Метка>

Используйте элемент метки для важного текста.

Bootstrap будет стилизовать HTML - <mark> элемент следующим образом:

Пример код HTML — Элемент Метки

<p>Используйте элемент метки для <mark>важного</mark> текста.</p>

<abbr>

Эта ВОЗ была основана в 1948 году.

Bootstrap будет стилизовать HTML - <abbr> элемент следующим образом:

Пример код HTML — Элемент <abbr>

<p>Эта <abbr title="Всемирная Организация Здравоохранения">ВОЗ</abbr> была основана в 1948 году.</p>

<BLOCKQUOTE>

В течение 50 лет WWF защищает будущее природы. Ведущая мировая природоохранная организация, WWF работает в 100 странах и поддерживается 1,2 миллионами членов в Соединенных Штатах и ​​близка к 5 миллионам во всем мире.

С веб-сайта WWF

Bootstrap будет стилизовать HTML - <blockquote> элемент следующим образом:

Пример код HTML — Элемент <blockquote>

<blockquote>
  <p>В течение 50 лет WWF защищает будущее природы. Ведущая мировая природоохранная организация, WWF работает в 100 странах и поддерживается 1,2 миллионами членов в Соединенных Штатах и ​​близка к 5 миллионам во всем мире.</p>
  <footer>С веб-сайта WWF</footer>
</blockquote>

Чтобы показать цитату справа, используйте .blockquote-reverse класс:

Пример код HTML — Элемент <blockquote> показать цитату справа

<blockquote class="blockquote-reverse">
  <p>В течение 50 лет WWF защищает будущее природы. Ведущая мировая природоохранная организация, WWF работает в 100 странах и поддерживается 1,2 миллионами членов в Соединенных Штатах и ​​близка к 5 миллионам во всем мире.</p>
  <footer>С веб-сайта WWF</footer>
</blockquote>

В течение 50 лет WWF защищает будущее природы. Ведущая мировая природоохранная организация, WWF работает в 100 странах и поддерживается 1,2 миллионами членов в Соединенных Штатах и ​​близка к 5 миллионам во всем мире.

С веб-сайта WWF

<DL> - Описание Списки

Кофе
- черный горячий напиток
Молоко
- белый холодный напиток

Bootstrap будет стилизовать HTML - <dl> элемент следующим образом:

Пример код HTML — Элемент <dl> - Описание Списки

<dl>
  <dt>Кофе</dt>
  <dd>- черный горячий напиток</dd>
  <dt>Молоко</dt>
  <dd>- белый холодный напиток</dd>
</dl>

<CODE>

Следующие HTML элементы: span, section, и div определяет раздел в документе.

Bootstrap будет стилизовать HTML - <code> элемент следующим образом:

Пример код HTML — Элемент <code>

<p>Следующие HTML элементы: <code>span</code>, <code>section</code>, и <code>div</code> определяет раздел в html документе.</p>

<KBD>

Используйте, ctrl + p чтобы открыть диалоговое окно «Печать».

Bootstrap будет стилизовать HTML - <kbd> элемент следующим образом:

Пример код HTML — Элемент <kbd> показать Входы с клавиатуры

<p>Используйте, <kbd>ctrl + p</kbd> чтобы открыть диалоговое окно «Печать».</p>

<PRE>

			Текст в элементе pre
			отображается в фиксированной ширине
			шрифта, и он сохраняет
			как пространства,     так и
			разрывы строк.
			

Bootstrap будет стилизовать HTML - <pre> элемент следующим образом:

Пример код HTML — Элемент <pre> показать несколько кодовых строк

<pre>
Текст в элементе pre
отображается в фиксированной ширине
шрифта, и он сохраняет
как пространства, так и
разрывы строк.
</pre>

Контекстные цвета и фоны

Bootstrap также имеет некоторые контекстуальные классы, которые могут использоваться для предоставления «значения через цвета». Классы для текстовых цветов: .text-muted, .text-primary, .text-success, .text-info, .text-warning, и .text-danger:

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Пример код HTML — Контекстные цвета и фоны


<p class="text-muted">Этот текст отключен.</p>
<p class="text-primary">Этот текст важен.</p>
<p class="text-success">Этот текст указывает на успех.</p>
<p class="text-info">Этот текст представляет некоторую информацию.</p>
<p class="text-warning">Этот текст представляет собой предупреждение.</p>
<p class="text-danger">Этот текст представляет опасность.</p>

Классы для цвета фона являются: .bg-primary, .bg-success, .bg-info, .bg-warning, и .bg-danger:

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.


<p class="bg-primary">Этот текст важен.</p>
<p class="bg-success">Этот текст указывает на успех.</p>
<p class="bg-info">Этот текст представляет некоторую информацию.</p>
<p class="bg-warning">Этот текст представляет собой предупреждение.</p>
<p class="bg-danger">Этот текст представляет опасность.</p>

Bootstrap верстка Таблицы


Базовая таблица Bootstrap

Базовая таблица Bootstrap имеет легкое строение и только горизонтальные разделительные линии. Класс .table добавляет основные стили к таблице:

Имя Фамилия Email
Иван Петров petrov@example.com
Мария Сидорова sidorova@example.com
Василиса Премудрая premudraya@example.com
<table class="table">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван</td>
      <td>Петров</td>
      <td>petrov@example.com</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>Сидорова</td>
      <td>sidorova@example.com</td>
    </tr>
    <tr>
      <td>Василиса</td>
      <td>Премудрая</td>
      <td>premudraya@example.com</td>
    </tr>
  </tbody>
</table>

Полосатые ряды

Класс .table-striped (<table class="table table-striped">) добавляет полосы зебры к таблице:

Имя Фамилия Email
Иван Петров petrov@example.com
Мария Сидорова sidorova@example.com
Василиса Премудрая premudraya@example.com

Границы для таблицы

Класс .table-bordered (<table class="table table-bordered">) добавляет границы со всех сторон таблицы и клеток:

Имя Фамилия Email
Иван Петров petrov@example.com
Мария Сидорова sidorova@example.com
Василиса Премудрая premudraya@example.com

Строки наведения

Класс .table-hover (<table class="table table-hover">) добавляет эффект парения (серый цвет фона) на строках таблицы:

Имя Фамилия Email
Иван Петров petrov@example.com
Мария Сидорова sidorova@example.com
Василиса Премудрая premudraya@example.com

Сжатая таблица

Класс .table-condensed (<table class="table table-condensed">) делает таблицу более компактной за счет сокращения клеток и отступов пополам:

Имя Фамилия Email
Иван Петров petrov@example.com
Мария Сидорова sidorova@example.com
Василиса Премудрая premudraya@example.com

Контекстуальные классы

Контекстные классы могут использоваться для цветных строк таблицы (<tr>) или ячеек таблицы (<td>). Классы, которые могут быть использованы: .active, .success, .info, .warning, и .danger.

Имя Фамилия Email
По умолчанию Дефаулсон def@example.com
Успех Петров petrov@example.com
Опасность Сидорова sidorova@example.com
Информация Премудрая premudraya@example.com
Предупреждение Бессмертный refs@example.com
Активный Активист activeson@example.com

Адаптивная таблица

Класс .table-responsive, придает отзывчивый адаптивный стиль к таблице. При этом таблица будет прокручиваться горизонтально на небольших устройствах (до 768 пикселей). При просмотре на чем-то более большем, чем 768 пикселей, разницы не будет никакой:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap Изображения


Формы для изображений Bootstrap

Закругленные углы:

Image Rounded

Круг:

Image Circle

Эскиз в рамке:

Image Thumbnail

Закругленные углы

Класс .img-rounded добавляет закругленные углы к изображению (IE8 не поддерживает скругленные углы):

<img src="https://placehold.it/304x236?text=IMAGE-Rounded" class="img-rounded" alt="Image Rounded" width="304" height="236">

Круг

Класс .img-circle оформляет изображение в круг (IE8 не поддерживает эту функцию):

<img src="https://placehold.it/304x236?text=IMAGE-Circle" class="img-circle" alt="Image Circle" width="304" height="236">

Изображение в рамке

Класс .img-thumbnail добавит к уменьшенному изображению рамку:

<img src="https://placehold.it/304x236?text=IMAGE-Thumbnail" class="img-thumbnail" alt="Image Thumbnail" width="304" height="236">


Адаптивные отзывчивые изображения

Изображения бывают разных размеров. Так делают экраны. Адаптивные изображения автоматически настраиваются в соответствии с размером экрана.
Создавайте отзывчивые изображения, добавляя .img-responsive класс в <img> тег. Ваши изображения при этом будут хорошо масштабироваться в соотношении к родительскому элементу.
Класс .img-responsive относится display: block; и max-width: 100%; и height: auto;


Шаблон сайта магазина легко и быстро поможет любому пользователю создать простой интернет-магазин.

Шаблон сайта магазина

Галерея изображений

Вы также можете использовать систему сетки Bootstrap в сочетании с .thumbnail классом для создания галереи изображений.



Реагирующие вложения

Как с Bootstrap масштабировать видео или слайд-шоу должным образов на любом устройстве.
Классы могут применяться непосредственно к элементам <iframe>, <embed>, <video> и <object>.
В следующем примере создается отзывчивое видео, добавляя .embed-responsive-item класс в <iframe> тег (видео будет отлично масштабироваться для родителького элемента). Определение соотношения сторон видео содержится в <div>:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Видео с www.youtube.com: Адаптивный Шаблон сайта HTML5 - САЙТ ГОЛУБОГО ЦВЕТА

Что такое соотношение сторон

Соотношение сторон изображения описывает пропорциональное соотношение между его шириной и высотой. Два общих формата видеоизображения - 4: 3 (универсальный формат видео 20-го века) и 16: 9 (универсальный для телевидения высокой четкости и европейского цифрового телевидения).

Вы можете выбирать между двумя классами соотношения сторон:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>


<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bootstrap Jumbotron и заголовок страницы


Bootstrap Учебник

Bootstrap - самая популярная структура HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете.

Тут расположить можно еще текст.

Это еще один абзац текста.


Создание Jumbotron

Jumbotron указывает на большую коробку, которая требует дополнительного внимания к некоторому специальному контенту или информации.

Jumbotron отображается как серая коробка с закругленными углами. Он также увеличивает размеры шрифта внутри текста.

Совет. Внутри jumbotron вы можете поместить практически любой допустимый HTML, включая другие элементы / классы Bootstrap.

Используйте <div> элемент с классом .jumbotron для создания jumbotron:


Поместите jumbotron внутрь, <div class="container"> если вы хотите, чтобы jumbotron НЕ распространялся до края экрана:

<div class="container">
  <div class="jumbotron">
    <h2>Bootstrap Учебник</h2>
    <p>Bootstrap - самая популярная структура HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете.</p>
  </div>
  <p>Тут расположить можно еще текст.</p>
  <p>Это еще один абзац текста.</p>
</div>

Внешний контейнер Jumbotron

Bootstrap Учебник

Bootstrap - самая популярная структура HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете.

Тут расположить можно еще текст.

Это еще один абзац текста.

Поместите jumbotron за пределы, <div class="container"> если вы хотите, чтобы jumbotron распространился на края экрана:

<div class="jumbotron">
  <h2>Bootstrap Учебник</h2>
  <p>Bootstrap - самая популярная структура HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете.</p>
</div>
<div class="container">
  <p>Тут расположить можно еще текст.</p>
  <p>Это еще один абзац текста.</p>
</div>

Создание заголовка страницы

Заголовок страницы похож на разделитель раздела.
.page-header класс добавляет горизонтальную линию под заголовком (+ добавляет некоторое дополнительное пространство вокруг элемента):

Используйте <div> элемент с классом .page-header для создания заголовка страницы:

<div class="page-header">
  <h2>Пример заголовка страницы</h2>
</div>

Углубления

.well класс добавляет округлую рамку вокруг элемента с серым цветом фона и некоторыми дополнениями:

Базовое Углубление

пример HTML

<div class="well">Базовое Углубление</div>

Размер Углубления

Измените размер углубления, добавив .well-sm класс для небольших колодцев или используйте .well-lg класс для углублений большого размера:

Маленькое Углубление
Нормальное Углубление
Большое Углубление

пример HTML

<div class="well well-sm">Маленькое Углубление</div>
<div class="well">Базовое Углубление</div>
<div class="well well-lg">Большое Углубление</div>

По умолчанию углубления имеют средний размер.


Оповещения

Bootstrap обеспечивает простой способ создания предопределенных предупреждающих сообщений:

Успех! Это поле предупреждения указывает на успешное или положительное действие.
Информация! Это поле предупреждения указывает на нейтральное информативное изменение или действие.
Внимание! Это поле предупреждения указывает на предупреждение, которое может потребовать внимания.
Опасно! Это поле предупреждения указывает на опасное или потенциально негативное действие.

Оповешения создаются с .alert классом, а затем один из четырех контекстных классов .alert-success, .alert-info, .alert-warning или .alert-danger:

пример HTML

<div class="alert alert-success">
  <strong>Успех!</strong> Это поле предупреждения указывает на успешное или положительное действие.
</div>

<div class="alert alert-info">
  <strong>Информация!</strong> Это поле предупреждения указывает на нейтральное информативное изменение или действие.
</div>

<div class="alert alert-warning">
  <strong>Внимание!</strong> Это поле предупреждения указывает на предупреждение, которое может потребовать внимания.
</div>

<div class="alert alert-danger">
  <strong>Опасно!</strong> Это поле предупреждения указывает на опасное или потенциально негативное действие.
</div>

Ссылки оповещения

Добавьте alert-link класс в любые ссылки внутри окна предупреждения, чтобы создать «соответствующие цветные ссылки»:

Успех! Вы должны прочитать это сообщение.
Информация! Вы должны прочитать это сообщение.
Внимание! Вы должны прочитать это сообщение.
Опасно! Вы должны прочитать это сообщение.

пример HTML

<div class="alert alert-success">
  <strong>Успех!</strong> Вы должны <a href="#" class="alert-link">прочитать это сообщение</a>.
</div>

Закрытие предупреждений

Чтобы закрыть предупреждающее сообщение, добавьте alert-link в контейнер оповещений. Затем добавить class="close" и data-dismiss="alert" к ссылке или кнопочному элементу (при нажатии на кнопку в этом контейнере предупреждения, оно закроется).

× Успех! Нажмите на символ «x» справа, чтобы закрыть меня.

пример HTML

<div class="alert alert-success alert-dismissable">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Успех!</strong> Вы должны <a href="#" class="alert-link">прочитать это сообщение</a>.
</div>

Aria- * атрибут и & times; Объяснение

Чтобы улучшить доступность для пользователей, использующих программы чтения с экрана, вы должны включить атрибут aria-label = "закрыть" при создании кнопки закрытия.

&times; (×) - это объект HTML, который является предпочтительным значком для кнопок close-закрыть, а не буквой «x».


Анимированные оповещения

× Опасно! Нажмите на символ «x» справа, чтобы закрыть меня. Я «исчезну».

.fade и .in классы добавляют затухающий эффект при закрытии предупредительного сообщения:

пример HTML

<div class="alert alert-danger alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Опасно!</strong> Нажмите на символ «x» справа, чтобы закрыть меня. Я «исчезну».
</div>

Стиль Кнопок в Bootstrap

Bootstrap предоставляет различные стили кнопок:

Для достижения стилей кнопок выше, Bootstrap имеет следующие классы:

Следующий пример показывает код для различных стилей кнопки:

пример HTML

<button type="button" class="btn">Основной</button>
<button type="button" class="btn btn-default">По умолчанию</button>
<button type="button" class="btn btn-primary">Первичный</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-link">Ссылка</button>

Классы кнопки могут использоваться на условиях <a>, <button> или <input> элемент:

пример HTML Bootsrap 3

<a href="#" class="btn btn-info" role="button">Ссылка Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Почему мы помещаем # в атрибут href ссылки?

Поскольку у нас нет ссылки на страницу, и мы не хотим получать сообщение «404», мы помещаем # в качестве ссылки в наших примерах. Он должен быть настоящим URL-адресом для конкретной страницы.


Размеры кнопок

Bootstrap предоставляет четыре размера кнопок:

Классы, которые определяют разные размеры:

В следующем примере показан код для разных размеров кнопок:

пример HTML Bootsrap 3

<button type="button" class="btn btn-primary btn-lg">Большой</button>
<button type="button" class="btn btn-primary btn-md">Средний</button>
<button type="button" class="btn btn-primary btn-sm">Маленький</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Кнопки уровня блока

Кнопка уровня блока охватывает всю ширину родительского элемента.

Добавить класс .btn-block для создания кнопки уровня блока:

пример HTML Bootsrap 3

<button type="button" class="btn btn-primary btn-block">Кнопка 1</button>
<button type="button" class="btn btn-block">Кнопка 2</button>

Активные / Отключенные кнопки

Кнопка может быть установлена ​​на активную (отображается нажатой) или отключенное (незащищенное) состояние:

Класс .active вызывает нажатие кнопки, и класс .disabled делает кнопку незаметной:

пример HTML Bootsrap 3

<button type="button" class="btn btn-primary active">Активная</button>
<button type="button" class="btn btn-primary disabled">Отключенная</button>

Группы кнопок Bootstrap


Группы кнопок

Bootstrap позволяет группировать ряд кнопок (в одной строке) в группе кнопок:

Используйте <div> элемент с классом .btn-group для создания группы кнопок:

пример HTML Bootsrap 3

<div class="btn-group">
  <button type="button" class="btn btn-primary">Laptop</button>
  <button type="button" class="btn btn-primary">iPad</button>
  <button type="button" class="btn btn-primary">iPhone</button>
</div>

Совет. Вместо того, чтобы вводить размеры кнопок для каждой кнопки в группе, используйте класс .btn-group-lg|sm|xs для сортировки всех кнопок в группе:

пример HTML Bootsrap 3

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Laptop</button>
  <button type="button" class="btn btn-primary">iPad</button>
  <button type="button" class="btn btn-primary">iPhone</button>
</div>

Вертикальные группы кнопок

Bootstrap также поддерживает вертикальные группы кнопок:

Используйте класс .btn-group-vertical для создания группы вертикальных кнопок:

пример HTML Bootsrap 3

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Laptop</button>
  <button type="button" class="btn btn-primary">iPad</button>
  <button type="button" class="btn btn-primary">iPhone</button>
</div>

Обоснованные группы кнопок

Чтобы охватить всю ширину экрана, используйте класс .btn-group-justified:

Laptop iPad iPhone

Пример с <a> элементами:

пример HTML Bootsrap 3

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Laptop</a>
  <a href="#" class="btn btn-primary">iPad</a>
  <a href="#" class="btn btn-primary">iPhone</a>
</div>

Примечание. Для <button> элементов вы должны обернуть каждую кнопку в .btn-group классе:

пример HTML Bootsrap 3

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Laptop</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">iPad</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">iPhone</button>
  </div>
</div>

Группы кнопок вложенности и раскрывающиеся меню

Группы кнопок Nest для создания выпадающих меню:

пример HTML Bootsrap 3

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Android <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Планшеты</a></li>
      <li><a href="#">Смартфоны</a></li>
    </ul>
  </div>
</div>

Разделенные кнопки

пример HTML Bootsrap 3

<div class="btn-group">
  <button type="button" class="btn btn-primary">Android</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Планшеты</a></li>
    <li><a href="#">Смартфоны</a></li>
  </ul>
</div>

Bootstrap 3 Иконки Gliphicon


Glyphicons

Bootstrap предоставляет 260 глификонов из набора иконки Glyphicons Halflings.
Глификон можно использовать в тексте, кнопках, панелях инструментов, навигации, формах и т. д.
Вот некоторые примеры глификонов:

Конверт иконка:

Конверт иконка с переходом по ссылке:

Поиск иконка:

Поиск иконка как кнопка:

Поиск иконка стиль кнопки:

Печать иконка:

Печать иконка стиль кнопка ссылка: Печать


Синтаксис Глификон

Добавлен глификон со следующим синтаксисом:

<span class="glyphicon glyphicon-name"></span>

Часть name в синтаксисе выше должна быть заменена соответствующим именем глификона.


Пример глификона

В следующем примере показаны различные способы использования глификонов:

пример HTML Bootsrap 3

<p>Конверт иконка: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Конверт иконка с переходом по ссылке:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Поиск иконка: <span class="glyphicon glyphicon-search"></span></p>
<p>Поиск иконка как кнопка:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Поиск
  </button>
</p>
<p>Поиск иконка стиль кнопки:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Поиск
  </button>
</p>
<p>Печать иконка: <span class="glyphicon glyphicon-print"></span></p>
<p>Печать иконка стиль кнопка ссылка:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Печать
  </a>
</p>

Значки загрузки и ярлыки загрузки


Значки

Значки - это числовые показатели того, сколько элементов связано со ссылкой:
Новости 5
Комментарии 10
Обновления 2

Значки (5, 10 и 2) являются значками.
Используйте .badge класс внутри <span> элементов для создания значков:

пример

<a href="#">Новости <span class="badge">5</span></a><br>
<a href="#">Комментарии <span class="badge">10</span></a><br>
<a href="#">Обновления <span class="badge">2</span></a>

Значки также могут использоваться внутри других элементов, таких как кнопки:

В следующем примере показано, как добавлять значки к кнопкам:

пример

<button type="button" class="btn btn-primary">Первичный <span class="badge">7</span></button>

Этикетки

Этикетки используются для предоставления дополнительной информации о чем-то:

Этикетки Bootstrap


Примеры HTML5

Используйте .label класс, а затем один из шести контекстуальных классов .label-default, .label-primary, .label-success, .label-info, .label-warning или .label-danger, в пределах <span> элемента, чтобы создать ярлык:

пример

<h4>Этикетки <span class="label label-default">Bootstrap</span></h4>
<h5>Примеры <span class="label label-default">HTML5</span></h5>

В следующем примере показаны все классы контекстной метки:

Базовая Этикетка Primary Этикетка Успех Этикетка Информационная Этикетка Предупреждение Этикетка Опасность на Этикетке

пример

<span class="label label-default">Базовая Этикетка</span>
<span class="label label-primary">Primary Этикетка</span>
<span class="label label-success">Успех Этикетка</span>
<span class="label label-info">Информационная Этикетка</span>
<span class="label label-warning">Предупреждение Этикетка</span>
<span class="label label-danger">Опасность на Этикетке</span>

Bootstrap верстка Полосы Загрузки / Прогресс-Бары


Базовая панель прогресса

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

Bootstrap предоставляет несколько типов индикаторов выполнения.
Строка выполнения по умолчанию в Bootstrap выглядит так:

Чтобы создать индикатор выполнения по умолчанию, добавьте .progress класс к <div> элементу:

пример

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="widht:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Примечание. Полосы прогресса не поддерживаются в Internet Explorer 9 и более ранних версиях (потому что они используют переходы CSS3 и анимации для достижения некоторых из своих эффектов).

Примечание. Чтобы улучшить доступность для пользователей, использующих программы чтения с экрана, вы должны включить атрибуты aria- *.


Панель прогресса с меткой

Индикатор выполнения с меткой выглядит следующим образом:

70%

Удалите .sr-only класс из панели выполнения, чтобы показать видимый процент:

пример

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="widht:70%">
    70%
  </div>
</div>

Цветные прожекторы

Контекстные классы используются для обеспечения «значения через цвета».
Контекстные классы, которые можно использовать с индикаторами выполнения:

40% Полный (успех)
50% Завершить (info)
60% Полное (предупреждение)
70% Полная (опасность)

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

пример

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="widht:40%">
    40% Полный (успех)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="widht:50%">
    50% Завершить (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="widht:60%">
    60% Полное (предупреждение)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="widht:70%">
    70% Полная (опасность)
  </div>
</div>

Полоса пропускания прогресса

Полосы хода также могут быть чересстрочными:

40% Полный (успех)
50% Завершить (info)
60% Полное (предупреждение)
70% Полная (опасность)

Добавьте класс, .progress-bar-striped чтобы добавить полосы в индикаторы выполнения:

пример

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="widht:40%">
    40% Полный (успех)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="widht:50%">
    50% Завершить (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="widht:60%">
    60% Полное (предупреждение)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="widht:70%">
    70% Полная (опасность)
  </div>
</div>

Анимированная панель прогресса

40%

Добавьте класс, .active чтобы анимировать индикатор выполнения:

пример

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="widht:40%">
    40%
  </div>
</div>

Сложенные бары прогресса

Полосы прогресса также могут быть сложены:

Свободное Место
Предупреждение
Опасность

Создайте стековый индикатор выполнения, поставив несколько баров в одно и то же <div class="progress">:

пример

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="widht:40%">
    Свободное Место
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="widht:10%">
    Предупреждение
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="widht:20%">
    Опасность
  </div>
</div>

Bootstrap верстка Переключатель Страниц


Базовая разбивка на страницы Bootstrap

Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то разбивку на страницы на каждую страницу.

Основная разбивка на страницы в Bootstrap выглядит так:

Чтобы создать базовую разбивку на страницы, добавьте .pagination класс к <ul> элементу:

пример

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Активное состояние

Активное состояние показывает, какова текущая страница:

Добавьте класс, .active чтобы сообщить пользователю, на какой странице он находится:

пример

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Состояние инвалидов

Невозможно щелкнуть ссылку с отключенным:

Добавить класс, .disabled если по какой-либо причине ссылка отключена:

пример

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Размер пагинации

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

Добавить класс .pagination-lg для больших блоков или .pagination-sm для меньших блоков:

пример

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Панировочные сухари

Другая форма для разбивки на страницы - это панировочные сухари:

Класс .breadcrumb указывает местоположение текущей страницы в пределах навигационной иерархии:

пример

<ul class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Частное</a></li>
  <li><a href="#">Картинки</a></li>
  <li class="active"><a href="#">Отпуск</a></li>
</ul>

Bootstrap верстка - Загрузочный пейджер


Что такое пейджер?

Пейджер также является формой разбивки на страницы (как описано в предыдущей главе).
Pager предоставляет предыдущие и следующие кнопки (ссылки).
Чтобы создать предыдущие / следующие кнопки, добавьте .pager класс к <ul> элементу:

пример

<ul class="pager">
  <li><a href="#">Предыдущая</a></li>
  <li><a href="#">Следующая</a></li>
</ul>

Результат:


Выровнять кнопки

Используйте .previous и .next классы для выравнивания каждой кнопки по бокам страницы:

пример

<ul class="pager">
  <li class="previous"><a href="#">Предыдущая</a></li>
  <li class="next"><a href="#">Следующая</a></li>
</ul>

Результат:


Bootstrap верстка Списки


Основные группы списков

Самая основная группа списка - неупорядоченный список с пунктами:

Чтобы создать базовую группу списка, используйте <ul> элемент с классом .list-group и <li> элементы с классом .listgroup-item:

пример

<ul class="list-group">
  <li class="list-group-item">Первый пункт</li>
  <li class="list-group-item">Второй пункт</li>
  <li class="list-group-item">Третий пункт</li>
</ul>

Список групп с значками

Вы также можете добавить значки в группу списка. Значки автоматически будут расположены справа:

Чтобы создать значок, сделайте <span> элемент с классом .badge внутри элемента списка:

пример

<ul class="list-group">
  <li class="list-group-item">Новых <span class="badge">12</span></li>
  <li class="list-group-item">Удалено <span class="badge">5</span></li>
  <li class="list-group-item">Предупреждения <span class="badge">3</span></li>
</ul>

Список групп со связанными элементами

Элементы в группе списка также могут быть гиперссылками. Это добавит серый цвет фона при наведении:

Первый элемент Второй элемент Третий элемент

Чтобы создать группу списка со связанными элементами, используйте <div> вместо <ul> и <a> вместо <li>:

пример

<div class="list-group">
  <a href="#" class="list-group-item">Первый элемент</a>
  <a href="#" class="list-group-item">Второй элемент</a>
  <a href="#" class="list-group-item">Третий элемент</a>
</div>

Активное состояние

Первый элемент Второй элемент Третий элемент

Используйте .active класс, чтобы выделить текущий элемент:

пример

<div class="list-group">
  <a href="#" class="list-group-item active">Первый элемент</a>
  <a href="#" class="list-group-item">Второй элемент</a>
  <a href="#" class="list-group-item">Третий элемент</a>
</div>

Отключенный элемент

Следующая группа списка имеет отключенный элемент:

Первый элемент Второй элемент Третий элемент

Используйте .disabled класс, чтобы отключить элемент:

пример

<div class="list-group">
  <a href="#" class="list-group-item disabled">Первый элемент</a>
  <a href="#" class="list-group-item">Второй элемент</a>
  <a href="#" class="list-group-item">Третий элемент</a>
</div>

Контекстуальные классы

Контекстные классы могут использоваться для окраски элементов списка:

Первый элемент Второй элемент Третий элемент Четвертый элемент

Классы для окрашивания элементов списка являются: .list-group-item-success, .list-group-item-info, .list-group-item-warning, и .list-group-item-danger:

пример

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Первый элемент</a>
  <a href="#" class="list-group-item list-group-item-info">Второй элемент</a>
  <a href="#" class="list-group-item list-group-item-warning">Третий элемент</a>
  <a href="#" class="list-group-item list-group-item-danger">Четвертый элемент</a>
</div>

Пользовательское содержимое

Вы можете добавить почти любой HTML-код в элемент списка:

Заголовок Первый элемент группы списка

Список элементов группы элементов

Заголовок Второй элемент группы списка

Список элементов группы элементов

Заголовок Третий элемент группы списка

Список элементов группы элементов

Bootstrap предоставляет классы .list-group-item-heading и .list-group-item-text может использоваться следующим образом:

пример

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Заголовок Первый элемент группы списка</h4>
    <p class="list-group-item-text">Список элементов группы элементов</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Заголовок Второй элемент группы списка</h4>
    <p class="list-group-item-text">Список элементов группы элементов</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Заголовок Третий элемент группы списка</h4>
    <p class="list-group-item-text">Список элементов группы элементов</p>
  </a>
</div>

Bootstrap верстка Панели


Bootstrap верстка Dropdowns


Bootstrap верстка Collapse


Bootstrap верстка Табличные Вставки


Bootstrap верстка Navbar


Bootstrap верстка Формы

Bootstrap верстка Формы-inputs


Bootstrap верстка Формы-inputs2


Bootstrap верстка Формы размеры

Bootstrap верстка Медиа Объекты


Bootstrap верстка Карусель


Bootstrap верстка Модальный диалог


Bootstrap верстка Подсказки


Bootstrap верстка Поповер


Bootstrap верстка Скроллспай


Bootstrap верстка Аффикс



Лендинг пейдж Bootstrap 3

Лендинг пейдж Bootstrap 3

Одностраничник - Адаптивная верстка

Одностраничный сайт Html адаптивная
верстка представляет собой шаблон
веб-сайта с использованием bootstrap
версии 3.3.5. Этот одностраничный
шаблон Html лендинг пейдж
идеально подходит для рекламы товаров и услуг интернет.