Справочник DESIGN/HTML/CSS

Мой Справочник | CSS3 | Bootstrap3 - Прочее

Документация: Bootstrap |  Bootstrap по-русски |  Bootstrap-темы
1. Подключение Bootstrap
HTML-код 

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 4
    content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


/* Адаптивность в Bootstrap */ 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

/* или так: */
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

/* Стилизация адаптивности */ 

/* Large "TV-SET" (1200px - +infinity): */
@media (min-width: 1200px) {...}

/* Medium "DESKTOP" (992px - 1199px): */
@media (min-width: 992px) and (max-width: 1199px) {...}

/* Small "TABLET" (768px - 991px): */
@media (min-width: 768px) and (max-width: 991px) {...}

/* Extra-small "MOBILE" (0 - 767px): */
@media (max-width: 767px) {...}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, maiores deserunt non quasi enim earum et nam iure, ipsam beatae. Laborum tempora ducimus illo ea. Odit expedita aperiam quas voluptates aliquid omnis ipsum eligendi consectetur deleniti saepe. Molestiae, illo! Ducimus, nisi, consequatur. Illo necessitatibus, quaerat illum eligendi, expedita iusto et.

 Условные комментарии можно в принципе удалить, поддержка IE8 уже почти не используется

2. Сетки на Bootstrap
КОНТЕЙНЕРЫ <div class="container">
  <div class="row"> <!--Имеет 12 колонок-->

    <div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">     </div>

    <div class="col-lg-6 col-md-7 col-sm-8 col-xs-9">     </div>

  </div>
</div> 		В Bootstrap 12-колоночный тип сеток
ВЛОЖЕННОСТЬ Можно вкладывать .row внутрь .row 
<div class="container">
  <div class="row">
    <div class="col-..."></div>
    <div class="col-...">
      <div class="row">
        <div class="col-..."></div>
        <div class="col-..."></div>
      </div>
    </div>
  </div>
</div>
 		Вложенные .row также будут иметь 12-колоночный тип сеток
КЛАССЫ

КАК РАБОТАТЬ С КЛАССАМИ:

В html-коде присваиваем класс сеток (.col-lg, .col-md и т.д.), а потом добавляем кастомный класс для стилизации (.page-header, .content-box и т.д.) и стилизуем этот класс, либо, не добавляя кастомный класс, редактируем класс бутстрапа, но только в style.css

Не трогаем классы бутстрапа в bootstrap.css !

<div class="main-content  col-lg-12 ..."></div>

.container          - ОСНОВНОЙ контейнер (width: размеру breakpoints;
                      центрирует содержимое)

.container-fluid    - ОСНОВНОЙ контейнер резиновый (width: 100%;)

.row                - СТРОЧНЫЙ подконтейнер, объединяет кол. классы 
.row-fluid          - СТРОЧНЫЙ подконтейнер c (padding: 0 15px;)

.col                - КОЛОНОЧНЫЙ под-контейнер
.col-lg-*           - КОЛОНОЧНЫЙ под-контейнер *-колонок для lg
.col-md-*           - КОЛОНОЧНЫЙ под-контейнер *-колонок для md
.col-sm-*           - КОЛОНОЧНЫЙ под-контейнер *-колонок для sm
.col-xs-*           - КОЛОНОЧНЫЙ под-контейнер *-колонок для xs

.col-lg-offset-*    - Отступ от контейнера вправо на *-колонок для lg (доп. класс)
.col-md-offset-*    - Отступ от контейнера вправо на *-колонок для md (доп. класс)
.col-sm-offset-*    - Отступ от контейнера вправо на *-колонок для sm (доп. класс)
.col-xs-offset-*    - Отступ от контейнера вправо на *-колонок для xs (доп. класс)

.col-md-push-*      - Толкать вправо на *-колонок для md (доп. класс)
.col-md-pull-*      - Толкать влево на *-колонок для md (доп. класс)

.visible-xs         - Будет отображаться при xs
.hidden-xs          - Будет скрыт при xs

.pull-left          - float: left;
.pull-right         - float: right;
.clearfix           - распорка для контейнера
.center-block       - margin: 0 auto;
ПЕРЕМЕННЫЕ 
@grid-columns = 12;             // кол-во колонок по ум*
@grid-gutter-width = 30px;      // расстояние между колонками
@screen-sm = 768px;             // small viewport
@screen-md = 992px;             // middle viewport
@screen-lg = 1200px;            // large viewport
Убрать отступы между колонками (добавить класс): 
.col-xs--p0 { padding: 0; }
.col-xs--pr0 { padding-right: 0; }
.col-xs--pl0 { padding-left: 0; }
ИМПОРТ less-файлов 
@import normalize.less;         // нормализатор
@import scaffolding.less;       // базовые стили
@import type.less;              // нормализатор
@import grid.less;              // сетка
@import tables.less;            // таблицы
@import form.less;              // формы
@import buttons.less;           // кнопки
@import code.less;              // код

@import add.less;               // изменения
 Поменять сетку на inline-block 

.row--inline-blocks { font-size: 0; }
> [class^="col-"] {
  float: none;
  font-size: @font-size-base;
  display: inline-block;
  vertical-inline: top;
}
Использование миксинов bootstrap 
.make-row();                // присвоить класс row
.make-lg-column(8);         // .col-lg-8
.make-lg-column-offset(1);  // .col-lg-offset-1
 файл mixins.less

Значения ширины по умолчанию

bootstrap

3. Навигация
Основные классы навбара

.navbar 
<header>
  <nav class="navbar navbar-default">
    <div class="container">

      <div class="navbar-header">
        ...
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        ...
      </div>

    </div>
  </nav>
</header>
.navbar              - НАВБАР 
.navbar-default      - Основной навбар
.navbar-inverse      - Чёрный цвет (подкласс)
.navbar-fixed-top    - Фиксированный сверху (подкласс)
.navbar-fixed-bottom - Фиксированный снизу (подкласс)
.navbar-static-top   - Статичный сверху (подкласс)

.pull-left           - Сдвинуть влево
.pull-right          - Сдвинуть вправо
Логотип и гамбургер

.navbar-header 
<div class="navbar-header">
  <!--ГАМБУРГЕР-->
  <button type="button" class="navbar-toggle collapsed"
  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="index.html">
    <img src="http://Some-logo.png" alt="logo" width="100" height="100">
  </a>
</div>
.navbar-header       - Контейнер для лого и гамбургера 

.navbar-toggle       - Гамбургер (для тега <butoon>)
.collapsed           - ???
.sr-only             - ???
.icon-bar            - Полоска для гамбургера

.navbar-brand        - Логотип
#id должен совпадать у button и .navbar-collapse
Ссылки и вып. под-меню

.collapse 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <!-- Ссылки меню СЛЕВА-->
  <ul class="nav navbar-nav">
    <!-- Активная ссылка -->
    <li class="active">
      <a href="#">Link1
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <!-- Остальные ссылки -->
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>

    <!-- Выпадающая ссылка -->
    <li class="dropdown">
      <a href="#" class="dropdown-toggle"
      data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link4
        <span class="caret"></span>
      </a>
      <!-- Выпадающее меню этой ссылки-->
      <ul class="dropdown-menu">
        <li><a href="#">Link4-1</a></li>
        <li><a href="#">Link4-2</a></li>
        <li><a href="#">Link4-3</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Link4-4</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Link4-5</a></li>
      </ul>
    </li>
  </ul>

<!-- Ссылки меню СПРАВА или ИКОНКИ-->
  <ul class="nav navbar-nav  navbar-right">
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
    <li><a href="#">Link7</a></li>
  </ul>

</div>
.collapse            - для контейнера списка ссылок
.navbar-collapse     - для контейнера списка ссылок

.nav                 - для списка ссылок
.navbar-nav          - для списка ссылок
.navbar-right        - для списка ссылок справа

.active              - активная ссылка

.dropdown            - элемент списка, с вып. под-меню
.dropdown-toggle     - для ссылки внутри <li> с вып. под-меню
.caret               - иконка вып. под-меню
.dropdown-menu       - список вып. под-меню
.divider             - разделитель

Результат:


4. Текст
Текст 
.lead               - увеличение размера шрифта

.text-left          - выравнивание текста слева
.text-center        - выравнивание текста по центру
.text-right         - выравнивание текста справа
.text-justify       - выравнивание текста по ширине
.text-nowrap        - без переноса на новую строку

.text-lowercase     - все строчные
.text-uppercase     - все заглавные
.text-capitalize    - все первые буквы заглавные

.list-unstyled      - список без маркером 1-го уровня (для тегов <ul>)
.list-inline        - список строкой (для тегов <ul>)

.text-muted         - текст приглушённый
.text-primary       - текст основной
.text-success       - текст (успех)
.text-info          - текст (информация)
.text-warning       - текст (предупреждение)
.text-danger        - текст (опасность)

.bg-primary         - фон основной
.bg-success         - фон (успех)
.bg-info            - фон (информация)
.bg-warning         - фон (предупреждение)
.bg-danger          - фон (опасность)

5. Таблицы
Таблицы 
.container-fluid>.row>.col-lg-8>table.table.table-bordered.table-striped>caption+tr>th*3^tr*3>td*3
/* классы для <table> */
.table               - таблица
.table-striped       - таблица с "полосатыми" строками
.table-bordered      - таблица с границами
.table-hover         - таблица с выделением строк при наведении
.table-responsive    - таблица будет скролиться по горизонтали

/* классы для <tr>, <td> и <th> */
.active              - выделяем цветом ячейку или строку
.success             - выделяем цветом ячейку или строку
.info                - выделяем цветом ячейку или строку
.warning             - выделяем цветом ячейку или строку
.danger              - выделяем цветом ячейку или строку
Table
1 2 3
Text Text Text
Text Text Text

6. Иконки
Иконки
В папке /fonts должен лежать шрифт "Glyphicon" 		<!-- Можно применять тег <span> или <i> -->

<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-fire"></span>
<span class="glyphicon glyphicon-hourglass"></span>

7. Изображения
Изображения
 <img class="img-responsive" src="..." alt="..."> 
.img-circle         - круглое изображение
.img-rounded        - круглые края
.img-thumbnail      - в рамке

.img-responsive     - адаптивное
image

8. Слайдер
Адаптивный слайдер
 
<!--Контейнер-->
<div id="carousel" class="carousel slide">

  <!--Кружочки-переключатели-->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>

  <!--Контейнер-слайдов-->
  <div class="carousel-inner">
    <!--Слайд №1-->
    <div class="item active">
      <img src="slide1.png" alt="slide1">
      <!--Текст в слайде-->
      <div class="carousel-caption">
        <h2>Slide1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam adipisci amet cumque.</p>
      </div>
    </div>
    <!--Слайды №2,3,... (без .active)-->
    <div class="item">...</div>
    <div class="item">...</div>
  </div>

  <!--Стрелки-переключатели-->
  <!--стрелка-влево-->
  <a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>

  <!--стрелка-вправо-->
  <a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>
9. Кнопки
Кнопки
 <a class="btn btn-primary" href="#"> или

<button class="btn btn-primary"> или

<input class="btn btn-primary"> type="submit value="submit">
.btn         - основной класс кнопки

.btn-default - вспомогательный класс
.btn-primary - вспомогательный класс
.btn-success - вспомогательный класс
.btn-warning - вспомогательный класс
.btn-info    - вспомогательный класс
.btn-link    - вспомогательный класс

.active      - нажатая кнопка
.disabled    - отключенная кнопка

.btn-lg      - большой размер
.btn-md      - средний размер (стоит по ум*)
.btn-sm      - маленький размер
.btn-xs      - экстра-маленький размер
.btn-block   - растянуть по всей доступной ширине
.btn .btn-default .btn .btn-primary .btn .btn-success

.btn .btn-warning .btn .btn-info .btn .btn-danger .btn .btn-link
<div class="btn-group">
  <a class="btn btn-primary" href="#">Text</a>
  <a class="btn btn-success" href="#">Text</a>
  <a class="btn btn-info" href="#">Text</a>
</div>

Text Text Text 


.btn-group      - группа кнопок

.btn-group-lg        - класс размера (вспомогательный класс)
.btn-group-md        - класс размера (вспомогательный класс)
.btn-group-sm        - класс размера (вспомогательный класс)
.btn-group-xs        - класс размера (вспомогательный класс)

.btn-toolbar         - объеденять группы кнопок в отдельный контейнер
                       div.btn-toolbar>div.btn-group*2

.btn-group-justified - растянуть кнопки в группе по ширине
.btn-group-vertical  - расположить по вертикали

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021