Содержание

Bootstrap (фреймворк) — Википедия с видео // WIKI 2

У этого термина существуют и другие значения, см. Bootstrap.

Bootstrap (также известен как Twitter Bootstrap[3][4][5]) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров[6].

Энциклопедичный YouTube

  • 1/3

    Просмотров:

    2 011

    4 690

    4 375

  • ✪ Урок 18. CSS фреймворк skeleton

  • ✪ Топ- 5 Frontend фреймворков по версии Github

  • ✪ Адаптивный Дизайн Сайта (Особенности Создания) 2018

Содержание

История

Эта библиотека начала разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint

. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года[7].

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности[8].

Третья версия выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию стал плоским[9].

Работа над четвёртой версией начата 29 октября 2014 года[10]. Альфа-версия вышла 19 августа 2015 года[11]. Первая бета-версия выпущена 10 августа 2017[12]. Вторая бета-версия выпущена 19 октября 2017[13]. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4[14].

Основные инструменты

Основные инструменты Bootstrap:

  • Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например, ширина колонки 140 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа.
  • Шаблоны — фиксированный или резиновый шаблон документа.
  • Типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
  • Медиа — предоставляет некоторое управление изображениями и видео.
  • Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
  • Формы — классы для оформления форм и некоторых событий, происходящих с ними.
  • Навигация — классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов.
  • Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

Bootstrap 4

29 октября 2014 года Марк Отто объявил, что Bootstrap 4 находится в разработке. 6 сентября 2016 года Марк приостановил работу над Bootstrap 3, чтобы высвободить время для работы над Bootstrap 4. На текущий момент было внесено более 4000 изменений к базовому коду Bootstrap 4. Первая стабильная версия вышла 18 января 2018 года.

Bootstrap 4 — это почти полностью переписанный Bootstrap 3. Перечень самых значительных изменений:

  • Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены набором исходных шрифтов для оптимальной отрисовки текста на любом устройстве под любой ОС.
  • Переход от использования Less к Sass.
  • Не поддерживаются IE8, IE9 и iOS 6.
  • Добавлена поддержка Flexbox, а затем отключена поддержка non flexbox.
  • Смена основной единицы измерения с px на rem.
  • Увеличенный глобальный размер шрифта с 14px до 16px.
  • Новый компонент «карточка» обобщающий панели и другие компоненты.
  • Удалён шрифт значков Glyphicons.
  • Удалены компоненты пейджера.
  • Переписаны почти все компоненты, плагины jQuery и документация.

См. также

Примечания

Литература

Книги

  • Jake Spurlock. Bootstrap. Responsive Web-Development. — O’Reilly, 2013. — 128 с. — ISBN 978-1-4493-4460-3.
  • David Cochran, Ian Whitley. Bootstrap Site Blueprints. — Packt, 2014. — 304 с. — ISBN 978-1-78216-453-1.
  • Matt Lambert. Bootstrap Site Blueprints. Volume II. — Packt, 2016. — 328 с. — ISBN 978-1-78528-109-9.
  • Syed Fazle Rahman. Jump Start Bootstrap. — SitePoint, 2014. — 150 с. — ISBN 978-0-9922794-3-1.
  • Aravind Shenoy. Learning Bootstrap. — Packt, 2014. — 204 с. — ISBN 978-1-78216-185-1.
  • Alexandre Magno. Mobile-First Bootstrap. — Packt, 2013. — 92 с. — ISBN 978-1-78328-579-2.
  • Peter Shaw. Twitter Bootstrap Succinctly. — Syncfusion, Inc., 2014. — 114 с.
  • Peter Shaw. Twitter Bootstrap 3 Succinctly. — Syncfusion, Inc, 2014. — 110 с.
  • David Cochran. Twitter Bootstrap Web Development How-To. — Packt (англ.)русск., 2012. — 68 с. — ISBN 978-1-84951-883-3.

Статьи и обзоры

Ссылки

Эта страница в последний раз была отредактирована 19 июля 2020 в 14:01.

Bootstrap 3: на Русском

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

Требуется jQuery

Пожалуйста имейте ввиду что все JavaScript-плагины требуют jQuery для работы, как в примере базовый шаблон. Уточните в bower.json какая версия jQuery поддерживается.

Скомпилированные файлы

После скачивания Вы найдете следующие файлы, логически объединенные в папки, файлы поставляются в минифицированных, и нет версиях. Структура скаченного архива:

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.*) файлы, вместе с минифицированными CSS и JS (bootstrap.min.*) файлами. Шрифт от Glyphicons так же включен в стандартный набор Bootstrap.

Исходный код

Исходный код Bootstrap’а так же включает в себя скомпилированные CSS, JavaScript файлы, и шрифты, но в дополнение Вы получаете исходники в виде LESS-файлов, JavaScript, и документацию. Обычно структура архива с исходным кодом выглядит след. образом:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs-assets/
├── examples/
└── *.html

Папки less/, js/, и fonts/ содержат исходный код для CSS, JS, и шрифтов. Папка dist/

содержит скомпилированный вариант исходного кода. Папки docs-assets/, examples/, и все *.html файлы относятся к документации по Bootstrap 3.

Bootstrap Бутстрап Классы

.active Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении) Tables
.active Добавляет серый цвет фона к активной ссылке по умолчанию навигационной навигации. Добавляет черный фон и белый цвет к текущей ссылке внутри инвертированной навигационной навигации. Navbar
.active Добавление синего цвета фона к элементу активного списка в группе списков List Groups
.active Добавление синего цвета фона для имитации нажатой кнопки Buttons
.active Анимация полосового индикатора выполнения Progress Bars
.active Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке Dropdowns
.active Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) Pagination
.affix Подключаемый модуль позволяет элементу становиться прикрепленным (заблокированным/липким) к области на странице. Включение position:fixed
и отключение
Affix
.alert Создает окно сообщения предупреждения Alerts
.alert-danger Красная коробка тревоги. Указывает на опасное или потенциально отрицательное действие Alerts
.alert-dismissible Вместе с .close классом этот класс используется для закрытия оповещения Alerts
.alert-info Светло-синяя коробка оповещения. Указывает некоторую информацию Alerts
.alert-link Используется на ссылки внутри оповещения, чтобы добавить соответствующие цветные ссылки Alerts
.alert-success Зеленая коробка тревоги. Указывает на успешное или положительное действие Alerts
.alert-warning Желтая коробка оповещения. Указывает на осторожность следует принимать с этим действием Alerts
.badge Создает круглый значок (серый круг-часто используется в качестве числового индикатора) Badges
.bg-danger Добавляет красный цвет фона к элементу. Представляет опасность или отрицательное действие Helpers
.bg-info Добавляет голубой цвет фона к элементу. Представляет некоторую информацию Helpers
.bg-primary Добавляет синий цвет фона к элементу. Представляет что-то важное Helpers
.bg-success Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие

CSS · Twitter Bootstrap: на Русском

Заголовки & основной текст

HTML-заголовки, от <h2> до <h6>:

h3. Заголовок 2

h4. Заголовок 3

h5. Заголовок 4
h5. Заголовок 5
h6. Заголовок 6

Пример основного текста

В Bootstrap по умолчанию font-size равняется 14px, а line-height составляет 20px. Эти правила применяются к элементу <body> и всему тексту. В дополнение, элемент <p> (Параграф) имеет отступ снизу в половину line-height т.е. равен 10px по умолчанию.

Было восемь часов утра — время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай. Иван Андреич Лаевский, молодой человек лег двадцати восьми, худощавый блондин, в фуражке министерства финансов и в туфлях, придя купаться, застал на берегу много знакомых и между ними своего приятеля, военного доктора Самойленко.

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

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера. Если же привезет его пожже, то побейте его по щекам, по профессорски, нечего с этим племенем церемонится. Если доставит пожже то значит в кабак анафема заходил. Обычай ездить к соседям не нами выдуман не нами и окончится, а потому непременно приежжайте с машинками и книгами. Я бы сам к Вам поехал, да конфузлив очень и смелости не хватает..

<p>...</p>

Класс Lead

Выделите параграф добавив класс .lead.

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера.

<p>...</p>

Создано при помощи Less

Оформление основано на двух LESS-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первая задает font-size, вторая устанавливает line-height. Используя простые математические уравнения мы задаем внешние и внутренние отступы элементов, высоту строки и многое другое. Редактируйте их для оптимизации и создания своего персонального Bootstrap’а.


Выделение шрифта

Используйте стандартные HTML-теги для выделения шрифта.

<small>

Для уменьшения значения текста на странице используйте тег small.

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

<p>
  <small>Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай.</small>
</p>

Выделение полужирным

Используется для выделения важного текста

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

<strong>Это полужирный и очень важный текст</strong>

Выделение Курсивом

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

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

<em>Это чья-то речь</em>

Минуту внимания! Используйте тег <b> и <i> в стандарте HTML5. Тег <b> используйте для простого выделения текста, акцентируя на нем внимание, когда как тег <i> используется для выделения речи, технической информации и т.п.

Классы для выделения текста

Передайте дополнительное значение текста используя цветовое решение.

Науки юношей питают

Отраду старым подают

В счастливой жизни украшают

В несчастный случай берегут

В домашних трудностях утеха

<p>Науки юношей питают</p>
<p>Отраду старым подают</p>
<p>В счастливой жизни украшают</p>
<p>В несчастный случай берегут</p>
<p>В домашних трудностях утеха</p>

Аббревиатура

Стилизованное представление стандартного HTML-тега <abbr>. Поместите слово внутрь элемента <abbr> для создания аббревиатуры или акронима — при наведении на который пользователь увидит расшифровку. Аббревиатуры с атрибутом title имеют точечное подчеркивание и курсор справки при наведении.

<abbr>

Используйте для аббревиатур и сокращений; объяснение сокращения отображается при наведении курсора, Вложите дополнительный атрибут title к тегу <abbr title="..."> для объяснительного текста

Аббревиатура «Комплексное Автомобильное Страхование Кроме Ответственности» — КАСКО.

<abbr title="Комплексное Автомобильное Страхование Кроме Ответственности">КАСКО</abbr>

<abbr>

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

html лучшая вещь придуманная человеком после изобретения колеса.

<abbr title="HyperText Markup Language">html</abbr> лучшая вещь придуманная человеком после изобретения колеса.

Адрес

Ниже два примера как тег <address> может быть использован:

При форматировании используйте тег <br /> для переноса строки.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ФИО
E: [email pro

Начало работы · Bootstrap

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

Bootstrap

Скомпилированные и минимизированные CSS, JavaScript и шрифты. Никакая документация или исходные файлы не включены.

Загрузить Bootstrap

Исходный код

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

Загрузить исходный код

Bootstrap CDN

Ребята из MaxCDN любезно предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти ссылки Bootstrap CDN.

  





      
    <[ENDIF] ->
  
  
    

Привет, мир!

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

Получите исходный код для каждого примера ниже, загрузив репозиторий Bootstrap.Примеры можно найти в каталоге docs / examples / .

Использование фреймворка

Стартовый шаблон

Только основы: скомпилированные CSS и JavaScript вместе с контейнером.

Тема Bootstrap

Загрузите дополнительную тему Bootstrap для визуального улучшения работы.

Сетки

Несколько примеров макетов сетки со всеми четырьмя уровнями, вложенностью и т. Д.

Jumbotron

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

Узкий jumbotron

Создайте более настраиваемую страницу, сузив контейнер и jumbotron по умолчанию.

Панель навигации в действии

Панель навигации

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

Статическая верхняя панель навигации

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

Фиксированная панель навигации

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

Пользовательские компоненты

.

Bootstrap Начало работы


Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

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

Пример начальной загрузки


My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!




Столбец 1


Lorem ipsum dolor ..




Колонка 2


Lorem ipsum dolor ..




Колонка 3


Lorem ipsum Dolor..




Попробуй сам "

История начальной загрузки

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

В июне 2014 года Bootstrap был проектом №1 на GitHub!


Зачем нужен Bootstrap?

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

  • Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Подход, ориентированный на мобильные устройства: В Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью базовой структуры
  • Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera)

Где взять Bootstrap?

Есть два способа начать использовать Bootstrap на вашем собственном веб-сайте.

Вы можете:

  • Загрузите Bootstrap с сайта getbootstrap.com
  • Включить бутстрап из CDN

Загрузка Bootstrap

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



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

Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

Макс.CDN:


< ! - Последний скомпилированный JavaScript ->

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

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


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

1.Добавьте тип документа HTML5

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

Всегда указывайте тип документа HTML5 в начале страницу вместе с атрибутом lang и правильным набором символов:






2. Bootstrap 3 предназначен для мобильных устройств

Bootstrap 3 предназначен для работы с мобильными устройствами.Мобильные стили: часть основной структуры.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри элемент:

Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана. устройства (который зависит от устройства).

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

3. Контейнеры

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

Есть два класса контейнеров на выбор:

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

Две основные страницы начальной загрузки

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

Пример




Пример начальной загрузки






Моя первая страница начальной загрузки


Это какой-то текст.



Попробуй сам "

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

Пример




Пример начальной загрузки






Моя первая загрузочная страница


Это текст.



Попробуй сам "
.

CSS · Bootstrap

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

HTML5 doctype

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

  

  ...
  

Первый мобильный

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

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

    

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

    

Типографика и ссылки

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

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

Эти стили можно найти в строительных лесах .менее .

Normalize.css

Для улучшения кроссбраузерного рендеринга мы используем Normalize.css, проект Николаса Галлахера и Джонатана Нила.

Контейнеры

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

Используйте .container для адаптивного контейнера фиксированной ширины.

  
...

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

  
...

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

Введение

Системы

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

  • Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. Меньшее количество миксинов также можно использовать для более семантических макетов.
  • Столбцы создают промежутки (промежутки между содержимым столбца) через заполнение . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
  • Отрицательная маржа - вот почему приведенные ниже примеры неактуальны. Это значит, что содержимое столбцов сетки совмещается с содержимым вне сетки.
  • Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4 .
  • Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одна единица переноситься на новую строку.
  • Классы сетки применяются к устройствам с шириной экрана, большей или равной размеру точки останова, и переопределяют классы сетки, нацеленные на устройства меньшего размера. Следовательно, e.грамм. Применение любого класса .col-md- * к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .col-lg- * отсутствует.

Посмотрите примеры применения этих принципов к вашему коду.

Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек останова в нашей сеточной системе.

  / * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
/ * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /

/ * Маленькие устройства (планшеты, 768 пикселей и выше) * /
@media (min-width: @ screen-sm-min) {...}

/ * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
@media (min-width: @ screen-md-min) {...}

/ * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
@media (min-width: @ screen-lg-min) {...}  

Мы время от времени расширяем эти медиа-запросы, добавляя max-width , чтобы ограничить CSS более узким набором устройств.

  @media (max-width: @ screen-xs-max) {...}
@media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}  

Параметры сети

Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

Очень маленькие устройства Телефоны (<768 пикселей) Маленькие устройства Таблетки (≥768 пикселей) Средние устройства Настольные компьютеры (≥992 пикселей) Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сетки Всегда по горизонтали Свернут для начала, горизонтально над контрольными точками
Ширина контейнера Нет (авто) 750px 970px 1170px
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Кол-во столбцов 12
Ширина колонны Авто ~ 62 пикс. ~ 81 пикс. ~ 97 пикселей
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable Есть
Офсетные Есть
Колонка для заказа Есть

Пример: с накоплением по горизонтали

Используя один набор .col-md- * , вы можете создать базовую сеточную систему, которая начинается на мобильных устройствах и планшетах (от очень малого до небольшого диапазона), а затем становится горизонтальной на настольных (средних) устройствах. Поместите столбцы сетки в любой .row .

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-4

.col-md-4

.col-md-4

  
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
<
.

Bootstrap 3 Учебник


Попробуйте сами Примеры

Это руководство по Bootstrap содержит сотни примеров Bootstrap.

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

Пример начальной загрузки


My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!




Столбец 1


Lorem ipsum Dolor..




Столбец 2


Lorem ipsum dolor ..




Колонка 3


Lorem ipsum dolor ..




Попробуй сам "

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.



Упражнения для начальной загрузки


Тест-тест Bootstrap

Проверьте свои навыки Bootstrap в W3Schools!

Начать тест по начальной загрузке!


Ссылки на Bootstrap

На W3Schools вы найдете полный справочник по Bootstrap для всех классов CSS, Компоненты и плагины JavaScript - все с примерами «Попробуйте сами»:


Bootstrap темы / шаблоны

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


Bootstrap 3 против Bootstrap 4

Bootstrap 4 - новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и платформ. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в Это.

Перейти к Bootstrap 4 »

Знаете ли вы?

W3.CSS - отличная альтернатива Bootstrap.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS Руководство.


.