Основы Bootstrap


Bootstrap
Bootstrap – это наиболее популярный фреймворк HTML, CSS и JS для разработки в первую очередь мобильных проектов в интернете.

Предназначен для всех, и везде.

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

 

sass-lessПрепроцессоры

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

devicesОдна структура, на все устройство.

Bootstrap легко и эффективно масштабирует свои веб-сайты и приложения с одной кодовой базы, от телефонов до планшетов для настольных компьютеров с запросами CSS СМИ.

componentsПолный набор функций

С Bootstrap, вы получите обширную и красивую документацию для общих HTML элементов, десятки пользовательских HTML и CSS компонентов, а также удивительные плагинов JQuery.

Bootstrap с открытым исходным кодом.
Фрейморк размещается, развиваться и поддерживаться на GitHub.

Перейти на GitHub

Загрузка

Существует несколько способов начать работу с Bootstrap, каждый из которых интересен в зависимости от уровня опыта и конкретной потребности использования. Посмотрите что лучше всего подходит именно вам.

Bootstrap 3

Минимизированный код CSS, JavaScript и шрифты. Без документации и исходных файлов.

Скачать Bootstrap 3

Исходный код

Исходный код Less, JavaScript, файлы шрифтов и документация. Требуется компилятор Less и другие настройки.

Скачать исходники

Sass

Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.

Скачать Sass

Текущая версия v3.3.2.

Bootstrap CDN

Сайт MaxCDN любезно предоставил Bootstrap возможность пользоваться услугами CDN для распространения файлов CSS и JavaScript. Чтобы воспользоваться этой возможностью, поменяйте локальные настройки на ссылки для Bootstrap CDNприведенные ниже:


rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">


Установка с помощью Bower

Для управления исходными файлами Bootstrap's Less, CSS, JavaScript, шрифтов и локальными копиями документов используйте Bower.

$ bower install bootstrap

Установка с помощью npm

You can also install Bootstrap using npm:

Copy
$ npm install bootstrap@3

require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.

Bootstrap's package.json contains some additional metadata under the following keys:

  • less - path to Bootstrap's main Less source file
  • style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

Установка с помощью  Composer

You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer:

Copy
$ composer require twbs/bootstrap

Autoprefixer required for Less/Sass

Bootstrap uses Autoprefixer to deal with CSS vendor prefixes. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.

Что включено

Bootstrap доступен в двух версиях. Одна из них содержит скомпилированный вариант, а другая минимизированный (уменьшенный по объему). В обоих случаях каталоги и файлы логически сгруппировны.

Требуется jQuery

Обратите внимание, что всем JavaScript плагинам необходима библиотека jQuery. jQuery необходимо подключить как показано в базовом шаблоне. Чтобы посмотреть какие версии jQuery поддерживаются обратитесь к bower.json.

Файловая структура Bootstrap 3

После загрузки, разархивируйте файлы. Вы увидите нечто похожее на это:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
            

Это основная форма Bootstrap: скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/
            

less/, js/, шрифты/ с иконками . Папкаdist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Compiling CSS and JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:

  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Available Grunt commands

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

grunt watch (Watch)

Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

grunt test (Run tests)

Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

grunt (Build absolutely everything and run tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Basic template / Основной шаблон

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Скопируйте HTML-код, приведенный ниже, чтобы начать работу с минимизированным документом Bootstrap.


<html lang="en">
  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    Bootstrap 101 Template

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    
    
  
  
    

Hello, world!

    
    
    
    
  

ExamplesПримеры

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

Tools

Bootlint

Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

Community / Сообщество

Следите за обновлениями Bootstrap и вливайтесь в наше сообщество с помощью следующих ресурсов.

Вы также можете подписаться на @twbootstrap в Twitter, чтобы получать самые свежие новости и смотреть замечательные видеоклипы.

Disabling responsivenessБлокировка адаптивности

Bootstrap автоматически адаптирует просмотр страниц под разное разрешение мониторов. Можно заблокировать такую возможность, чтобы страницы отображались как в этом шаблоне.

Шаги для блокировки адаптивного просмотра

  1. Не создавайте с именем viewport как об этом сказано в описании CSS
  2. Отмените width, .container для каждого уровня разметки определенной ширины, например так :width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать !important с медиа-запросами или со специальным селектором.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Разметка с классом xs (extra small) масштабируется для всех размеров мониторов.

Вам понадобится Respond.js для IE8 (поскольку существуют медиа-запросы и они должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

Эти шаги мы применили для примера. Просмотрите исходный код, чтобы увидеть отличия.

Просмотреть пример неадаптивного шаблона

Переход с v2.x на v3.x

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу.

Browser and device support / Браузеры и поддержка устройств

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

Поддержка третьих сторон

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

Размерность блоков

Некоторое стороннее программное обеспечение, включая Google Maps и Google Custom Search Engine, конфликтуют с Bootstrap через * { box-sizing: border-box; }, то есть правило, которое создает padding (отступы) в итоге не влияет на ширину элемента. Узнайте больше об этом: box model sizing and at CSS Tricks.

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Доступность

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT.

Пропуск навигации

Если ваше навигационное меню имеет много линков и находится перед главным содержанием в DOM, добавьте линкПерейти к главному содержимому непосредственно после тега . (прочитайте почему)


  <a href="#content" class="sr-only">Skip to main content
  <div class="container" id="content">
    The main page content.
  

Вложенные заголовки

При вложении заголовков (

-

), ваш основное заглавие документа должен быть

. Следующие заголовки должны логически вибудовуватись используя

-

, чтобы программа, которая считывает заголовки, могла сконструировать содержание страницы.Узнайте больше о HTML CodeSniffer и Penn state's AccessAbility.

Дополнительные ресурсы

Лицензия FAQs

Bootstrap выпущено под лицензией MIT и имеет авторское право 2014 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.

Она требует:

  • Включите лицензию и уведомление об авторских правах в ваших работах

Она позволяет:

  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии

Она запрещает:

  • Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter

Она не требует:

  • Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Настройка Bootstrap и Переводы

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

Overview / Обзор

Получите подробную информацию о ключевых элементах инфраструктуры Bootstrap, в том числе о нашем подходе к созданию более качественных, быстрых и мощных веб-приложений.

Документ HTML5

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



 ...

Для мобильных устройств

В Bootstrap 2 мы внедряли возможности адаптирования сайтов для мобильных устройств. Приложение Bootstrap 3 изначально рассчитано на работу с мобильными устройствами. Вместо того чтобы добавлять дополнительные шаблоны для мобильных устройств, мы встроили их в ядро программы. Bootstrap в первую очередь рассчитан на мобильные устройства. Макеты для мобильных устройств хранятся в библиотеке, а не отдельными файлами.

Для правильного отображения и сенсорного масштабирования добавьте метатег страницы в сегмент своего проекта.

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

Вы можете отключить масштабирование на мобильных устройствах, добавив сегмент user-scalable=no в метатег страницы. Так вы отключите масштабирование, и пользователи смогут только прокручивать его, в результате чего ваш сайт будет больше похож на собственное приложение. В общем, мы не рекомендуем использовать эту функцию на всех сайтах, будьте внимательны!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap устанавливает основные стили отображения, печати и ссылок. В частности, мы:

  • Устанавливаем background-color: #fff; на body
  • Используем атрибуты @font-family-base,@font-size-base и @line-height-base в качестве основных параметров печати
  • Устанавливаем общий цвет ссылок с помощью @link-color и применяем подчеркивание ссылок только на :hover

Эти стили находятся в scaffolding.less.

Normalize.css

Для оптимизации работы с различными интернет-браузерами мы используем Normalize.css, проект Николаса Галлахера (Nicolas Gallagher) и Джонатана Нила (Jonathan Neal).

Контейнеры

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

...

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

...

Grid systemСетка

Bootstrap включает в себя изменяющуюся резиновую сетку(разметка) ориентированную на мобильные устройства, которая изменяет свой масштаб разделяя сь соответственно на части (до 12 колонок) при уменьшении размеров окна(экрана). Bootstrap включаетпредопределенные классы для простого выбора разметки(макета), а так же мощные примеси(элементы) для создания семантических разметок.

Code / Код

Поместите встроенные участки кода с .

For example,

should be wrapped as inline.

For example, <section> should be wrapped as inline.

Пользовательский ввод

Используйте чтобы указать ввод, который как правило вводится с клавиатуры.

To switch directories, type cd followed by the name of the directory.
  To switch directories, type cd followed by the name of the directory.

Основной блок

Используйте


для нескольких строк кода. Будьте уверены, чтобы избежать любые угловые скобки в коде для правильного отображения.

Sample text here...


<p>Sample text here...</p>

Вы можете по желанию добавить .pre-scrollable класса, в котором будут определена максимальная высота 350пкс и обеспечена ось У для полосы прокрутки.

Responsive utilitiesАдаптивные утилиты

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

Using Sass / Использование Sass

Использование Sass

В то время как Bootstrap построен на Less, он также имеет официальный Sass порт. Мы поддерживаем его в отдельном репозиторий GitHub и обновляем через скрипт преобразования.

Что включено

Поскольку порт Sass имеет отдельный репо и служит несколько иной аудитории, содержимое проекта сильно отличаться от основного проекта Bootstrap. Это гарантирует, что порт Sass является совместимым с мнгоими Sass-системами.

Путь Описание
lib/ Ruby gem код (Sass конфигурация, Rails и Compass интеграция)
tasks/ Скрипты конвертеры (turning upstream Less to Sass)
test/ Тесты компиляции
templates/ Compass пакет манифеста
vendor/assets/ Sass, JavaScript, и файлы шрифтов
Rakefile Внутренние задачи, такие как rake и convert

Посетите Sass порты GitHub репозитория чтобы увидеть эти файлы в действии.

Установка

Для получения информации о том, как установить и использовать Bootstrap для Sass, обратитесь GitHub репозиторий readme. Это наиболее современный источник, он включает в себя информацию для использования с Rails, Compass, и типовым проектам Sass.

Bootstrap для Sass

GlyphiconsГлифа иконки

Доступные глифы

Набор включает в себя 200 значков в формате шрифта из набора Glyphicon Halflings. Glyphicons Halflings обычно доступны за дополнительную плату, но их создатель разрешил использовать их в Bootstrap абсолютно бесплатно. В качестве благодарности мы просим вас указывать ссылку на Glyphicons там, где это возможно.

DropdownsВыпадающие меню

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Button groups / Группы кнопок 

Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).

Подсказки и информеры в группе кнопок требуют специальных настроек

При использовании подсказок или информеров (popovers) в пределах .btn-group, необходимо определить параметрcontainer: 'body', чтобы избежать нежелательных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Button dropdowns / Кнопка выпадающего меню

Используйте любую кнопку для выпадающего меню разместив ее в .btn-group, и обеспечив ее правильно-размеченным меню.

Зависимость плагина

Кнопка выпадающего меню требует включения в вашу версию Bootstrap плагина для выпадающего меню.

Input groupsГруппы формы ввода

Разверните элементы управления формы добавив текст или кнопки до, после, с обеих сторон любого текстового поля формы. Используйте .input-group с.input-group-addon в начало или конец для одного элемента .form-control.

Кросс-браузерная совместимость

В данном случае избегайте использования элементов , поскольку они в полной мере не могут стилізуватись в WebKit браузерах.

Подсказки и информеры в группе введение требуют специальных настроек

Когда используете подсказки или информеры (popovers) на элементах в пределах .input-group, вам необходимо определить параметр container: 'body', для избежания нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Не смешивайте с другими компонентами

Не смешивайте группы форм или классы столбцов разметки непосредственно с группами ввода. Вместо этого, внедрите группу ввода внутри группы формы или связанной разметки с элементом.

NavsНавигация

Доступна в Bootstrap навигация имеет общую разметку, начиная с базового класса.nav, и вплоть до совместных состояний. Осуществляется обмен модификаторами доступа для переключения между каждым стилем.

BreadcrumbsНавигационный маршрут

Установите текущую страницу расположение в пределах навигационной иерархии.

Разделители автоматически добавляются в CSS через :before и content.

Главная

Главная / Библиотека

Главная / Библиотека / Данные

<ol class="breadcrumb">
  
  • <a
 href="#">Главная
  
  • <a
 href="#">Библиотека
  <li class="active">Данные

PaginationНумерация страниц

Добавьте ссылки постраничного разделения для вашего сайта с многостраничным компонентом, или простой альтернатива листания.

Постраничное разделение по умолчанию

Простая нумерация inspired by Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, легко масштабируется, предоставляет большие кнопки.

Labels / Метки

Пример

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый
Пример заголовка Новый

Пример заголовка <span class="label label-default">Новый

Доступные варианты

Добавте любой из перечисленных ниже модификаторов классов, чтобы изменить внешний вид меткии.

Default Primary Success Info Warning Danger
<span class="label label-default">Default
<span class="label label-primary">Primary
<span class="label label-success">Success
<span class="label label-info">Info
<span class="label label-warning">Warning
<span class="label label-danger">Danger

Badges / Значки

Легко подсветить новые или непрочитанные записи добавив к ссылкам, Bootstrap навигацию, и другое.

<a href="#">Inbox <span class="badge">42

Самосвертывание

Когда нет новых или непрочитанных записей, значки будут просто свернуты (через CSS селектор :empty), при условии отсутствия внутри содержимого.

Кросс-браузерная совместимость

Значки не будут самозгортатись в Internet Explorer 8, потому что ему не хватает поддержки селектора :empty.

Адаптация под активные состояния

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

<ul class="nav nav-pills nav-stacked">
  <li class="active">
        <a href="#">
          <span class="badge pull-right">42
          Главная
     
        
  ...

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Copy
<div class="jumbotron">
  

Hello, world!
  

 

...
  

<a

 class="btn btn-primary btn-lg" href="#" role="button">Learn more

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .containerwithin.

Copy
<div class="jumbotron">
  <div class="container">
    ...
  

Page header / Заголовок страницы

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default smallelement, as well as most other components (with additional styles).

Copy
<div class="page-header">
  

Example page header Subtext for header

ThumbnailsЭскизы

Расширьте систему сетки Bootstrap с помощью компонента эскиза для легкого создания сетки с изображениями, видео, текстом, и так далее.

Alerts / Уведомления

Предоставьте контекстные интерактивные замечания для типовых действий пользователей. Чтобы была возможность закрытия таких замечаний, используйтеплагин уведомлений jQuery.

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to s as we override that for you.

 

Copy

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



<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="...">

Wells / Ячейки

Default well

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
Copy
<div class="well">...

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a large well!
Copy
<div class="well well-lg">...
Look, I'm in a small well!
Copy
<div class="well well-sm">...

Overview / Обзор

Индивидуально или сборником

Плагины могут подключаться отдельно (используя отдельные файлы Bootstrap *.js), или все за один раз (используяbootstrap.js или минимизированы bootstrap.min.js).

Используя скомпилированный JavaScript

bootstrap.js и bootstrap.min.js оба содержат все плагины в одном файле. Подключать только один.

Компоненты и атрибуты данных

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

Зависимость плагина

Некоторые плагины и CSS и их компоненты имеют зависимость от других плагинов. Если вы включаете плагины отдельно, просмотрите их документацию, чтобы убедиться, что вы учли их зависимость. Также заметьте, что все плагины зависят от jQuery (это означает, что jQuery должен подключаться перед файлами плагинов). Просмотрите наш файлbower.json, чтобы узнать какая версия jQuery поддерживается.

Атрибуты данных

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

Тем не менее, в некоторых ситуациях может быть желанным отключения этой функции. Таким образом, мы также предоставляем возможность отключить API-атрибуты, через отвязке всех событий в пространстве имен (namespaced) документа, при помощи data api. Это выглядит примерно так:

$(document).off('.data-api')

Также вы можете направить выстрела на определенный плагин, просто включив имя плагина рядом с пространством имен data api, как в примере:

$(document).off('.alert.data-api')

Программный API

Мы также считаем, что вы должны иметь возможность использовать все плагины Bootstrap чисто на JavaScript API. Все публичные API являются одиночными, но их методы могут последовательно связываться и возвращать готовый набор для применения.

$('.btn.danger').button('toggle').addClass('fat')

Все методы должны принимать в качестве необязательного параметра или объект, или строка, который нацелен на конкретный метод, или ничего (и таким образом просто инициализировать плагин с поведением по умолчанию):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Каждый плагин также публикует свой собственный конструктор в свойства Constructor: $.fn.popover.Constructor. Если вы хотите получить конкретный экземпляр плагина, загружайте его непосредственно из элемента:$('[rel=popover]').data('popover').

Без конфликта

Иногда необходимо использовать плагины Bootstrap с другими UI фрейморками. В таком случае иногда могут пересекаться их пространства имен. Если такое случается, вы можете вызвать .noConflict в том плагине, который должен вернуть прежнее значение.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

События

Bootstrap предоставляет пользовательские события для большинства уникальных действий плагина. Как правило, они идут в форме инфинитива или причастия - причем инфинитив (например, show) срабатывает в начале события, а форма причастия (например, shown) срабатывает по завершению действия.

По состоянию на 3.0.0, все события Bootstrap с именованными пространствами.

Все события в інфінітиві предоставляют preventDefault функциональность. Это дает возможность останавливать выполнение действий перед стартом.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Библиотеки третьих сторон

Bootstrap неофициально поддерживает библиотеки JavaScript третьих сторон, такие как Prototype или jQuery UI. Несмотря на то, что мы предоставляем .noConflict и события с именованными пространствами, все равно могут быть проблемы совместимости, которые вам придется исправлять собственноручно.

Transitions /Переходы transition.js

О переходах

Для простых эффектов перехода, включите transition.js рядом с другими файлами JS. Но если вы используете общую сборку bootstrap.js (или ее минимизированный вариант), этот файл нет необходимости подключать—код уже включен.

Что внутри

Transition.js является базовым помощником для событий transitionEnd, и для эмулятора переходов CSS. Он используется другими плагинами для проверки поддержки переходов CSS и для восстановления висячих переходов.

ModalsМодальные окна modal.js

Примеры

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

Перекрытия модали не поддерживается

Убедитесь, что вы не открываете модали в то время, когда другая модаль все еще видимая. Отображение более, чем одной модали одновременно, требует пользовательского кода.

Модальные размещения разметки

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

Оговорки в отношении мобильных устройств

Есть определенные предостережения относительно использования модальных окон на мобильных устройствах.Просмотрите наши документы относительно поддержки браузеров для уточнений.

DropdownsВыпадающее меню dropdown.js

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

ScrollSpyОтслеживание прокрукти scrollspy.js

Пример с навигационной панелью

Плагин ScrollSpy (переводится как Отслеживание Прокрутки) предназначен для автоматического обновления навигационного нахождения, которое базируется на позиции прокрутки страницы. В нижнем примере прокрутите область под навигационной панелью и проспостерігайте за переходом активного класса между ее пунктами. Подпункты в ниспадающем меню также будут подсвечены при прокрутке.

Togglable tabs /Переход по вкладкам tab.js

Пример вкладок

Добавьте быструю, динамичную функциональность для перехода по вкладкам локального содержимого, в том числе с помощью выпадающего меню.

TooltipsПодсказки tooltip.js

Примеры

Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame; Подсказки является обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

PopoversИнформеры popover.js

Примеры

Добавьте небольшие накладки содержания, вроде тех, которые показываются в iPad, в любых элементов, для размещения дополнительной информации.

Зависимость от плагинов

Информеры требуют подключения плагина подсказок в вашей версии Bootstrap.

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

Информеры в группах кнопок и группах ввода требуют специальных настроек

При использовании информеров внутри элементов .btn-group или .input-group, вы должны указывать параметрыcontainer: 'body' (документация ниже), чтобы избежать нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов, при вызове информеров).

Информеры на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled, вставьте элемент внутрь

и примените подсказку именно к этому

.

Popovers on disabled elements require wrapper elements

To add a popover to a disabled or .disabled element, put the element inside of a

and apply the popover to that

instead.

Multiple-line links

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

Alert messagesУведомления alert.js

Пример уведомлений

Добавьте возможность закрывать все уведомления с данным плагином.

ButtonsКнопки button.js

Пример использования

Настройте дополнительно кнопки. Контролируйте состояния кнопок, или создавайте группы кнопок увеличивая количество компонентов, как в панели инструментов.

CollapseСворачивание collapse.js

Ознакомление

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

Зависимость от плагинов

Сворачивание нуждается подключенного в вашей версии Bootstrap плагина transitions.

Пример свертывания

CarouselКарусель carousel.js

Внизу показ слайдов обеспечивает общий плагин и компонент для циклов через элемент, похожий на карусель.

AffixПозиционирование Affix affix.js

Пример

Субнавигация справа является живым примером работы плагина affix.


Использование

Используйте плагин affix с помощью атрибутов данных, или напишите свой собственный JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования содержимого.

Позиционирование через CSS

Less files / Компоненты Less

Выберите из файлов Less которые будут включены в вашу собственную сборку Bootstrap. Не уверены, какие файлы использовать? Ознакомьтесь с документацией по CSS и Компонентам.

Common CSS / Общие CSS

Components / Компоненты

JavaScript components / Компоненты JavaScript

Утилиты

jQuery plugins / jQuery плагины

Выберите из jQuery плагинов которые должны включаться в вашу собственную сборку файлов JavaScript. Не уверены что именно включать? Прочитайте документацию относительно JavaScript.

Связанные компоненты

Magic

  • Производит два файла

    Все отмеченные плагины будут собраны в читабельный bootstrap.js и минимизированный bootstrap.min.js. Мы рекомендуем использовать минимизированную версию для рабочих (production) версий.

  • Требуется jQuery

Все плагины требуют подключения последней версии jQuery.

Less variables / Less переменные

Настроить Less переменные, чтобы определить цвет, размер и другое внутри ваших пользовательских CSS стилей.

Colors / Цвета

Gray and brand colors for use across Bootstrap.

Scaffolding

Settings for some of the most global styles.

Background color for .

Global text color on .

Typography /Типография

Font, line-height, and color for body text, headings, and more.

Default monospace fonts for , , and


.

Unit-less line-height for use in components like buttons.

Computed "line-height" (font-size * line-height) for use with margin, padding, etc.

By default, this inherits from the .

Components / Компоненты

Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

Global color for active items (e.g., navs or dropdowns).

Global background color for active items (e.g., navs or dropdowns).

Width of the border for generating carets that indicate dropdowns.

Carets increase slightly in size for larger components.

Tables / Таблицы

Customizes the .table component with basic values, each used across all table variations.

Padding for  s and  s.

Padding for cells in .table-condensed.

Default background color used for all tables.

Background color used for .table-striped.

Background color used for .table-hover.

Border color for table and cell borders.

Buttons /Кнопки

For each of Bootstrap's buttons, define text, background and border color.

Forms / Формы

background color

background color

Text color for s

border color

Default .form-control border radius

Large .form-control border radius

Small .form-control border radius

Border color for inputs on focus

Placeholder text color

Default .form-control height

Large .form-control height

Small .form-control height

.form-group margin

Background color for textual input addons

Border color for textual input addons

Disabled cursor for form controls and buttons.

Dropdown menu container and contents.

Background for the dropdown menu.

Dropdown menu border-color.

Dropdown menu border-color for IE8.

Divider color for between dropdown items.

Text color for headers within dropdown menus.

Deprecated @dropdown-caret-color as of v3.1.0

Media queries breakpoints / Медиа запросы точки прерывания

Define the breakpoints at which your layout will change, adapting to different screen sizes.

Deprecated @screen-xs as of v3.0.1

Deprecated @screen-xs-min as of v3.2.0

Deprecated @screen-phone as of v3.0.1

Deprecated @screen-sm as of v3.0.1

Deprecated @screen-tablet as of v3.0.1

Deprecated @screen-md as of v3.0.1

Deprecated @screen-desktop as of v3.0.1

Deprecated @screen-lg as of v3.0.1

Deprecated @screen-lg-desktop as of v3.0.1

Grid system / Система разметки

Define your custom responsive grid.

Number of columns in the grid.

Padding between columns. Gets divided in half for the left and right.

Point at which the navbar becomes uncollapsed.

Point at which the navbar begins collapsing.

Container sizes / Размеры контейнера

Define the maximum width of .container for different screen sizes.

For @screen-sm-min and up.

For @screen-md-min and up.

For @screen-lg-min and up.

Nverted Navbar / Навигация

Shared nav styles

Tabs

Pills

Pagination / Нумерация

Pager / Листание

Jumbotron / Большой экран

Form states and alerts / Состояние формы и уведомления

Define colors for form feedback states and, by default, alerts.

Tooltips / Подсказки

Tooltip max width

Tooltip text color

Tooltip background color

Tooltip arrow width

Tooltip arrow color

Popovers / Информеры

Popover body background color

Popover maximum width

Popover border color

Popover fallback border color

Popover title background color

Popover arrow width

Popover arrow color

Popover outer arrow width

Popover outer arrow color

Popover outer arrow fallback color

Labels / Ярлыки

Default label background color

Primary label background color

Success label background color

Info label background color

Warning label background color

Danger label background color

Default label text color

Modals / Модали

Padding applied to the modal body

Padding applied to the modal title

Modal title line-height

Background color of modal content area

Modal content border color

Modal content border color for IE8

Modal backdrop background color

Modal backdrop opacity

Modal header border color

Alerts / Уведомления

Define alert colors, border radius, and padding.

Progress bars / Индикатор выполнения

Background color of the whole progress component

Progress bar text color

Variable for setting rounded corners on progress bar.

Default progress bar color

Success progress bar color

Warning progress bar color

Danger progress bar color

Info progress bar color

List group / Список группы

Background color on .list-group-item

.list-group-item border color

List group border radius

Background color of single list items on hover

Text color of active list items

Background color of active list items

Border color of active list elements

Text color for content within active list items

Text color of disabled list items

Background color of disabled list items

Text color for content within disabled list items

Panels / Панели

Border color for elements within panels

Thumbnails / Эскизы

Padding around the thumbnail image

Thumbnail background color

Thumbnail border color

Thumbnail border radius

Custom text color for thumbnail captions

Padding around the thumbnail caption

Wells / Ячейки

Badges / Значки

Badge text color in active nav link

Badge background color in active nav link

Breadcrumb background color

Breadcrumb text color

Text color of current page in the breadcrumb

Textual separator for between breadcrumb elements

Close / Кнопка закрытия

Code / Код

Type / Тип

Horizontal offset for forms and lists.

Text muted color

Abbreviations and acronyms border color

Headings small color

Blockquote small color

Blockquote font size

Blockquote border color

Page header border color

Width of horizontal description list titles

Point at which .dl-horizontal becomes horizontal

Horizontal line color.

Разное

Цвет горизонтальной линии.

Горизонтальное смещение для форм и списков

Download / Скачать

Ура! Ваша собственная версия Bootstrap готова к сборке. Просто кликните кнопку внизу, чтобы завершить процесс.

Success! Your configuration has been saved to https://gist.github.com/740371b74d4e911169a0580e1e83202b and can be revisited here at http://bootstrap-3.ru/customize.php?id=740371b74d4e911169a0580e1e83202b for further customization.

Курс HTML и CSS. Вводный урок.

Курс HTML и CSS. Урок 1.

Курс HTML и CSS. Урок 2.

Курс HTML и CSS. Урок 3.

Курс HTML и CSS. Урок 4.

Курс HTML и CSS. Урок 5.

Курс HTML и CSS. Урок 6.

Курс HTML и CSS. Урок 7.

Курс HTML и CSS. Урок 8.

Курс HTML и CSS. Урок 9.

Курс HTML и CSS. Урок 10.

Создание сайта на HTML5 и CSS3. Урок 1

Создание сайта на HTML5 и CSS3. Урок 2

Создание сайта на HTML5 и CSS3. Урок 3

Создание сайта на HTML5 и CSS3. Урок 4

Создание сайта на HTML5 и CSS3. Урок 5

Изучаем PHP | Урок №1 - Основы PHP

Изучаем PHP | Урок №2 - Как работать с PHP? Установка Denwer

Изучаем PHP | Урок №3 - Пишем "Hello World!"

Изучаем PHP | Урок №4 - Комментарии в PHP

Изучаем PHP | Урок №5 - Переменные и их типы

Изучаем PHP | Урок №6 - Константы

Изучаем PHP | Урок №7 - Арифметические операции

Изучаем PHP | Урок №8 - Строковые операции

Изучаем PHP | Урок №9 - Логические операции

Изучаем PHP | Урок №10 - Оператор эквивалентности

Изучаем PHP | Урок №11 - Условные операторы

Изучаем PHP | Урок №12 - Оператор Switch () case

Изучаем PHP | Урок №13 - Циклы For, While и Do While

Изучаем PHP | Урок №14 - Функции

Изучаем PHP | Урок №15 - Массивы элементов

Изучаем PHP | Урок №16 - Двумерные массивы

Изучаем PHP | Урок №17 - Область видимости переменных

Изучаем PHP | Урок №18 - Подключение файлов

Изучаем PHP | Урок №19 - Обработка форм

Изучаем PHP | Урок №20 - Функции для работы с типами переменных

Изучаем PHP | Урок №21 - Математические функции

Изучаем PHP | Урок №22 - Строковые функции

Изучаем PHP | Урок №23 - Функции для работы с массивами

Изучаем PHP | Урок №24 - Функции даты

Изучаем PHP | Урок №25 - Работа с файлами

Изучаем PHP | Урок №26 - Права доступа

Изучаем PHP | Урок №27 - phpinfo() и $_SERVER

Изучаем PHP | Урок №28 - Создание редиректа

Изучаем PHP | Урок №29 - Отправка почты на email

Изучаем PHP | Урок №30 - Работа с куки $_COOKIE

Изучаем PHP | Урок №31 - Работа с сессиями $_SESSION

Изучаем PHP | Урок №32 - Форма обратной связи

Изучаем MySQL | Урок №33 - Начало

Изучаем MySQL | Урок №34 - Что такое БД? Как с ним работать?

Изучаем MySQL | Урок №35 - Создание своей БД

Изучаем MySQL | Урок №36 - Добавление пользователя

Изучаем MySQL | Урок №37 - Структура phpMyAdmin

Изучаем MySQL | Урок №38 - Подключение к БД

Изучаем MySQL | Урок №39 - Добавление записей в БД с помощью кода

Изучаем MySQL | Урок №40 - Выборка записей из БД

Изучаем MySQL | Урок №41 - Заключительный урок

Video Lesson 1-8 / Видео Уроки 1-8 - Bootstrap 3

Фреймворк Bootstrap. УРОК №1. CSS фреймворки. Установка.

Фреймворк Bootstrap. УРОК №2. Верстка навигационной панели

Фреймворк Bootstrap. УРОК №3. Оформление навигационной панели.

Фреймворк Bootstrap. УРОК №4. Оформление навигационной панели.

Фреймворк Bootstrap. УРОК №5. Оформление навигационной панели.

Фреймворк Bootstrap. УРОК №6. Верстка контентной части.

Фреймворк Bootstrap. УРОК №7. Оформление контентной части.

Фреймворк Bootstrap. УРОК №8. Верстка и оформление футера.

Фреймворк Bootstrap. УРОКИ №- - 22. Bootstrap 3:

Уроки по Bootstrap 3 | #1 Установка фрэймворка

Уроки по Bootstrap 3 |#2 Система сеток (Grid)

Уроки по Bootstrap 3 | #3 Настройка сетки

Уроки по Bootstrap 3 | #4 Адаптивная навигация

Уроки по Bootstrap 3 | #5 Положение меню и выпадающее меню

Уроки по Bootstrap 3 | #6 Слайдер контента

Уроки по Bootstrap 3 | #7 Шрифтовые иконки Glyphicons и Font Awesome

Уроки по Bootstrap 3 | #8 Классы кнопок

Уроки по Bootstrap 3 | #9 Группы кнопок

Уроки по Bootstrap 3 | #10 Кнопки с выпадающим меню (dropdown)

Уроки по Bootstrap 3 | #11 Создание вкладок (tabs)

Уроки по Bootstrap 3 | #12 Создание спойлера

Уроки по Bootstrap 3 | #13 Создание аккордеона

Уроки по Bootstrap 3 | #14 Создаем модальное окно

Уроки по Bootstrap 3 | #15 Форма авторизации в навигации

Уроки по Bootstrap 3 | #16 Индикаторы прогресса

Уроки по Bootstrap 3 | #17 Создание страницы записей

Уроки по Bootstrap 3 | #18 Создание сетки masonry

Уроки по Bootstrap 3 | #19 Постраничная навигация

Уроки по Bootstrap 3 | #20 Хлебные крошки и футер

Уроки по Bootstrap 3 | #21 Подсказки и всплывающие окна

Уроки по Bootstrap 3 | #22 Окна оповещений и ошибок (Alert)

.Препроцессор LESS. Как быстро писать CSS код. Молниеносная верстка
Фреймворк Bootstrap 4. УРОК №1-6
SublimeText 3
Sublime Text - установка плагина LiveReload. Плагин Live Reload
HTML/CSS #1: Установка и настройка Sublime Text
10 плагинов для Sublime Text 3

Translate »