Шаблоны. Документация Bootstrap 3.3.2
Дополнительные шаблоны созданы на основе базового, представленного разделом выше. Также рекомендуем посмотреть советы по Настройке Bootstrap для использования вашего собственного варианта.
Базовый шаблон
Ничего лишнего, кроме основного: CSS, JavaScript и использован контейнер.
Разметка
Несколько примеров разметки сетки Bootstrap с различными уровнями вложенности.
Jumbotron
Основу макета составляет большой экран Jumbotron и базовая система разметки. В панель навигации включены поля формы.
Узкий Jumbotron
Большой экран Jumbotron на основе узкого контейнера. В качестве навигации используются навигационные табы.
Навигационное меню
Базовый шаблон, который включает панель навигации вместе с дополнительным контентом.
Статическое меню
Базовый шаблон, который включает статичесую панель навигации вместе с дополнительным контентом.
Фиксированное меню
Базовый шаблон, который включает зафиксированную панель навигации вместе с дополнительным контентом.
Тема Bootstrap
Основная тема Bootstrap-3 с популярными элементами визуального оформления.
Блог
Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.
Обложка
Одностраничный шаблон, растянутый на весь экран, для построения простых и красивых сайтов.
Слайдер
В слайдере можно использовать изображения и текст. В контенте страницы добавлены некоторые новые компоненты.
Панель администратора
Шаблон базовой структуры панели администратора с фиксированным боковым меню и панелью навигации.
Страница входа на сайт
Простой шаблон страницы входа на сайт.
Прижатый футер
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Когда заходит речь о выборе фреймворка для разработки сайта, первое, что приходит на ум — Twitter Bootstrap. Это очень популярный инструмент для прототипирования и разработки пользовательского интерфейса. Как и jQuery, он позволяет быстро создать адаптивный Bootstrap шаблон, который можно использовать для решения различных задач.
Лично я считаю Bootstrap выдающимся фреймворком. Я использовал его в подавляющем большинстве своих проектов, потому что:
- он стабильный и проверенный временем
- имеет большое сообщество пользователей и множество плагинов от сторонних разработчиков
- содержит LESS файлы для быстрого включения/отключения различных элементов
- имеет мощную систему разметки с плавающей либо фиксированной шириной столбцов
- содержит компоненты и java-скрипты практически для всех задач, с которыми приходится сталкиваться разработчику
- В общем, используя этот фрэймворк, Вы сэкономите уйму времени и сил.
А если, при этом, у Вас нет желания заниматься нудным кодированием, то этот пост как раз для Вас. Потому что далее я познакомлю Вас с некоторыми Bootstrap-конструкторами, которые позволяют создать стильный и современный сайт, не углубляясь в «синтаксические дебри». И самое главное — все эти инструменты совершенно бесплатны.
Mobirise Bootstrap Builder
Основная задача Mobirise — кардинально сократить время разработки сайта, используя технологию drag-and-drop. Просто выбираете из списка нужный блок — меню, заголовки, таблицы, кнопки соцсетей, карты и многое другое — и перетаскиваете их на страницу. Все блоки идеально взаимодействуют между собой, так что в результате Вы получаете профессионально сверстанный сайт. При этом сохраняется возможность доработать любой элемент в соответствии с концепцией и цветовым стилем Вашего сайта.
Следуя основной задаче, Mobirise заботится еще и о публикации Вашего сайта. Он позволяет легко разместить сайт как на локальном диске или FTP, так и на популярных хостингах: Amazon S3, Google Drive, Github.
Подведем итог: Mobirise — мощный и дружественный к разработчику конструктор, позволяющий за короткое время создать модный и современный сайт с адаптивным интерфейсом.
Script Den Bootstrap Builder
Script Den Bootstrap Builder очень похож на Mobirise. Имеется набор готовых элементов интерфейса, элементы которого можно перетащить на страницу и получить готовый макет сайта.
Pikock Bootstrap Magic
Pikock не является полноценным конструктором сайтов. Это редактор тем Bootstrap. С его помощью можно изменить цвет или шрифт любого элемента, редактировать значение любой переменной Bootstrap и сохранить сделанные настройки в виде собственной темы.
Layout It
Layout It представляет собой, по существу, инструмент для быстрого прототипирования. Он предоставляет разработчику возможность быстро создать макет и разместить основные элементы при помощи простых операций drag-and-drop. Однако, возможность точных настроек и изменения цветовых схем отсутствует.
Bootply
Bootply это своего рода «песочница» для разработчиков, использующих Bootstrap. Он является не только редактором и конструктором сайтов, но и включает в себя репозиторий кода различных расширений. Предоставляет возможность «набросать» интерфейс, перетащив мышкой стандартные компоненты, а затем доработать код под свои нужды.
Shoelace
На самом деле это не совсем конструктор сайтов, но это инструмент, который стоит упомянуть. Shoelace — это генератор сетки Bootstrap. Он очень прост в использовании и позволяет увидеть, как будет выглядеть конечный результат на экране смартфона, планшета или настольного компьютера.
Смотрите также:
Генераторы модульных сеток PSD и CSS
Примеры сайтов, созданных на Bootstrap
Bootstrap — бесплатный фреймворк, включающий в себя набор инструментов для создания сайтов и приложений. Для работы с ним требуется знание HTML и CSS на хорошем уровне.
Bootstrap используется для упрощения разработки, предлагая набор файлов с написанным кодом, который веб-мастер может менять для решения своих задач. Чтобы оценить универсальность фреймворка, изучим несколько сайтов, созданных на его основе.
№1. Пример сайта автосервиса «АС-Авто»
Ac-avto161.ru — сайт автотехцентра с главной страницей, сделанной в формате посадочной страницы, и адаптивным дизайном. Одинаково удобен для посетителей при просмотре на десктопе и экране мобильного устройства, чтобы обычно для проектов, сделанных на Bootstrap. На главной в основном размещена информация о предоставляемых услугах; есть также отзывы и масштабируемая карта с отметкой о местоположении. Для общения с менеджером посетители могут использовать онлайн-чат от Jivosite. Для каждой услуги создана отдельная страница, ссылка на которую есть в одном из разделов основного меню или на главной. Объём представленной информации сильно различается: где-то написаны подробные материалы, а где-то указано только краткое перечисление основных возможностей.
№2. Салон красоты и гармонии «Visandra»
Visandra.com.ua — лендинг салона красоты. В меню навигации закреплены ссылки на основные разделы страницы. При нажатии на кнопку «Подробнее» в блоке с услугами появляется окно с описанием и расценками. Есть два раздела с фотографиями, собранными в галерею. По умолчанию отображаются только миниатюры, при нажатии открывается полное изображение. С адаптивностью никаких проблем нет: контент одинаково хорошо отображается на мониторе компьютера и экране телефона. В самом низу страницы есть блок с новостями, который ведёт в раздел «Блог» со ссылками на другие посты.
№3. Пример интернет-магазина женского белья «Дикая Орхидея»
Shop.wildorchid.ru — онлайн-магазин женского белья. В основном меню у него есть не только постоянные страницы, но и ссылки для временных разделов — например, распродаж. На первом экране размещён слайдер с автоматической сменой баннеров. Здесь не хватает возможности ручного управления, которые Bootstrap позволяет добавить. Без них если пропустишь сообщение об акции, придётся ждать, пока оно снова появится. На главной странице есть раздел «Самое популярное», в котором закреплены ссылки на распродажи, программу лояльности и новинки. С функциональностью интернет-магазина всё в порядке: есть фильтры по категориям и назначению, в карточке товара можно выбрать цвет, размер, подобрать комплект, просмотреть рекомендации и воспользоваться скидкой. Поддерживается онлайн-оплата с помощью банковской карты через защищённую страницу банка «Русский стандарт».
№4. Элитная стоматология «French Dental Clinic»
Fdc-vip.ru — сайт клиники элитной стоматологии с версиями на трёх языках: русском, английском и французском. Тоже начинает знакомство с посетителями с помощью слайдера, в котором есть информация об акциях, преимуществах и создателях компании. Кроме обычной галереи на главной странице есть блок, в котором отображаются посты из профиля клиники в Instagram. Все услуги скрыты в отдельное меню, которое нужно раскрывать нажатием даже на десктопе. Есть возможность записаться на приём онлайн, используя простую форму обратной связи с минимальным количеством обязательных для заполнения полей.
№5. Сайт компании производителя светопрозрачных конструкций «Саберс»
Sabersgroup.com — сайт компании, производящей светопрозрачные алюминиевые конструкции. На главной странице есть слайдер, в котором баннеры меняются по таймеру, но если навести на них курсор, то отсчёт времени останавливается. Кроме того, есть элементы ручного управления, которые позволяют быстро переключать изображения. В меню навигации расположены ссылки на список услуг, каталог продукции, портфолио и блог. Всё сделано очень аккуратно: единый стиль оформления, хорошие шрифты, адаптивность под разные экраны — сайтом приятно пользоваться.
Подведём итоги
Bootstrap — фреймворк для опытных разработчиков, которые знакомы с основами HTML и CSS и готовы учиться дальше. Начинающим веб-мастерам может быть сложно создать сайт с нуля, несмотря на то, что система предлагает готовый набор файлов.
В принципе, в качестве обучения можно редактировать проекты других разработчиков, но всё равно погружение в особенности работы фреймворка требует намного больше времени, чем освоение бесплатной CMS или конструктора сайтов.
370+ Большой набор Bootstrap элементов на сайт
Здесь мы собрали большой набор готовых элементов для bootstrap 3 и bootstrap 4, включающий в себя более 370 готовых решений, которые подойдут каждому. Скачав и разместив код того или иного элемента на своём сайте, можно сэкономить реально кучу времени, не собирая ничего с нуля.
Обязательно добавляйте данную страницу в закладки, чтобы нужные элементы из bootstrap были всегда под рукой.
Эта сборка bootstrap элементов включает следующий функционал
- Виджеты bootstrap
- Чарты, статистики, граффики bootstrap
- Навигация bootstrap
- Оформление для личного кабинета bootstrap
- Готовые якоря bootstrap для landing page
- Toggle меню bootstrap
- Мобильное меню bootstrap
- Оформление карточки товаров bootstrap
- Фотогалерея bootstrap
- Оформление статей для блога
- bootstrap инфографика
- Резюме на базе bootstrap
- Форма логин-пароль для bootstrap
- Форма регистрации на сайте bootstrap
- Иконки bootstrap
- Блок поделиться в соц сетях
- Интересные анимации и различные переходы
- Кнопка меню гамбургер, открывающая целый блок
- Табы bootstrap
- Галерея изображений с переворотом фото к описанию
- Адаптивная bootstrap таблица
- Карточка с ценами для сайта
- Плавно всплывающие блоки с описанием
- Статусы посещений и различной статистикой
- Дизайн блоки чтобы сайт выглядел более современно
- bootstrap календарь событий
- bootstrap меню с бесконечным списком пунктов
- Блок наша команда с анимациями и описаниями
- Красивые адабптивные виджеты соцсетей bootstrap
- Красиво оформленные текстовые блоки
- Тени box-shadow bootstrap
- Виджет погоды
- Свадебные приглашения
- Граффики для фондовых бирж
- Списки множественного выбора bootstrap
- Функция уведомлений на сайте
- Текстовый редактор на bootstrap
- bootstrap эмулятор смартфона
- Оформление страницы с ценами сайта
- Функциональная корзина, с возможностью редактирования количества товаров
- Табы навигации bootstrap
- Различные кнопки для сайта button
- Загрузчик файлов на сервер bootstrap
- Различные выпадающие меню dropdown-menu
- Прогресс бар bootstrap
- Виджет поста на сайт
- Таймлайн для описания деятельности по месяцам/годам
- Фильтр товаров на bootstrap
- Кнопка отправить на печать bootstrap
- Факты о нас в цифрах
- Адаптивная таблица сравнения товаров
- Формы обратной связи для сайта
- Установка рейтинга для чего либо на bootstrap
- Форма заполнения для кредитных карт
- Планировщик задач на bootstrap
- Оформление и дизайн купонов
- Тема продажи приложений
- Блок отзывов на сайте
- Блок отзывов каруселью для сайта
- Записи для оформления блога
- Виджет музыкального плеера bootstrap
- Галерея с возможностью открыть фото во весь экран
- Красивое разделение блоков dividers
И это не весь список элементов которые присутствуют в данной сборке. Вы можете самостоятельно открать и опробывать каждый элемент
Скачать
Вот собственно и все! будем надеяться что данный набор элементов и графики сильно поможет вам в быстрой разработке ваших сайтов на bootstrap
Благодаря популярности CSS фреймворка Bootstrap, для него разработали массу различных дополнений. Даже сейчас вы можете использовать Bootstrap практически для любой задачи при разработке и оформлении вебсайта.
Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».
Наборы компонентов
Fuel UX
Отличный набор дополнительных контролов, которые зачастую не хватает при работе с Bootstrap. В него входят такие модули как деревья, шаблоны, датапикеры, визарды и т. п.
Website
Github
X-editable
Думаю, это незаменимый набор компонентов для инлайн-редактирования. Поддерживает различные версии Bootstrap и отлично работает без него (на jQuery).
Website
Github
Jasny
Небольшой набор дополнительных элементов к Bootstrap. В него включены как боковое меню, функциональные кнопки, маски для инпутов и т. п.
Website
Github
Bootstrap Form Helper
Еще один интересный набор элементов. В премиум версию входят такие элементы, как инпуты для выбора валют, стран, временных зон, языков и т. п.
Website
Github
Leapstrap
Набор элементов для поддержки плагина Leapstrap контроллера. Это довольно-таки необычная вещица, поэтому включаю ее в этот список.
Website
Github
Отдельные компоненты
jQuery Bootpag
Дополнительный компонент, которого зачастую не хватает в стандартном комплекте Bootstrap — Pagination. Особенностью является возможность динамической обработки.
Website
Github
Tocify
Компонент для отслеживания содержания страницы. Очень часто не хватает именно этого компонента для создания современных вебсайтов.
Website
Github
Bootstrap Link Preview
Небольшой и очень простой в использовании компонент для предпросмотра контента по ссылке (наподобие Facebook-предпросмотра).
Website
Github
Flippant.js
Небольшой скрипт для создания «двусторонних» блоков. Идеально для создания форм, карточек портфолио и т. п.
Website
Github
Bootstrap Tour
Отличное дополнение к Bootstrap, которое позволяет создавать пошаговый тур для новых посетителей вашего сайта.
http://bootstraptour.com/
https://github.com/sorich87/bootstrap-tour
Bootstro.js
Вариант предыдущего инструмента. Предназначен также для создания пошагового тура для вашего сайта или веб приложения.
Website
GitHub
Yet Another MegaMenu (YAMM)
Компонент, необходимый практически любому современного сайта. Позволяет создать главное меню навигации практически любой сложности.
Website
GitHub
Dropdown Menus Enhancement
Дополнение к стандартному меню Bootstrap. Включает такие возможности, как позиционирование меню, вывод в меню радио- и чекбокс-инпутов и многое другое.
Website
Github
Bootstrap Tree View
Простое решение для отображения древовидной структуры. Данный компонент поддерживает стандартные Glyph-иконки.
Github
GTreeTable
Еще одно дополнение, позволяющее создавать древовидную структуру. Отличается обилием функционала: Drag&Drop, редактирование и т. п.
Website
Github
Bootstrap Star Rating
Компонент для простого создания рейтинга, легко кастомизируется. По опыту могу сказать: очень часто приходится искать подобный компонент.
Website
Github
Gridmanager.js
Редактор контента, основанный на строках и колонках Bootstrap-фреймворка. Пока не нашел, как применить на практике. Выложил больше, как пример реализации.
Website
GitHub
Компоненты Для Форм
Bootstrap Tags
Компонент для простого создания тегов. Очень прост в использовании и тоже легко кастомизируется. Работает со всеми версиями Bootstrap.
Website
Github
Bootstrap Switch
Компонент для создания аккуратных переключателей. Подойдет для любого дизайна сайта, к тому же тут легко настраиваются все параметры: размеры, анимация, цвет и т. п.
Website
Github
Bootstrap Maxlength
Неплохой «ограничитель» для текстовых полей ввода. Прост в использовании, иногда бывает просто незаменимым дополнением.
Website
Github
Bootstrap Select
Очень легкий компонент, позволяющий значительно расширить функционал обычного списка. Пройдите по ссылке ниже, чтобы увидеть все примеры использования.
Website
Github
Chosen
Очень простой скрипт для значительного улучшения поля со списком. Поддерживает множество опций и вариаций для использования этого поля.
Website
Github
Bootstrap Multiselect
Еще один вариант расширения поля списка. Данный скрипт обрабатывает события при открытии / закрытии / выборе и т. п. Никогда ведь не знаешь, что попросит клиент…
Website
Github
Bootstrap Validator
Незаменимый компонент при работе с формами в Bootstrap-фреймворке. Экономит очень много времени: кроме проверки, содержит уже готовое оформление полей формы.
Website
Github
jqBootstrapValidation
Еще один компонент (вариант) для валидации форм на Bootstrap-фреймворке. Содержит большое количество опций для создания проверки введенных пользователем данных.
Website
Github
jQuery File Upload
Неплохой компонент, позволяющий значительно сэкономить время, если необходимо добавить поле для загрузки файлов. Поддерживает множество серверных платформ.
Websit
Github
Bootstrap Tag Autocomplete
Компонент для простого создания автодополнения. Очень простой в использовании и легкий (по весу) скрипт. Думаю, заслуживает добавления в копилку инструментов.
Website
Github
Tag Manager
Готовый скрипт (компонент) для создания тегов. Очень много опций и, соответственно, возможностей использования.
Website
Github
Typeahead
Компонент для авто дополнения с текстовом поле. Используются два скрипта (для поиска и отображения), которые можно использовать и вместе, и отдельно.
Website
Github
Slider for Bootstrap
Еще один элемент, помогающий пользователю сэкономить кучу времени. Вместо ввода данных вручную — просто перетянуть слайдер. Много опций, полностью стилизируется.
Website
Tokenfield for Bootstrap
Компонент для простого создания тегов. Полностью стилизирован, имеет много опций. Поддерживает ввод и с клавиатуры, и из буфера обмена.
Website
Github
Label in Place
Легкий скрипт для создания необычного эффекта объединения label-элемента с полем ввода. Имеет множество опций. Иногда даже может пригодиться :).
Website
Github
Strength Meter
Компонент для определения сложности введенного пароля. Простое решение для распространенной проблемы. Включает много опций и готовое оформление.
Website
Github
Bootstrap File Input
Компонент для загрузки файлов. Поддерживает мультизагрузку и предпросмотр иллюстраций. Пройдите по ссылке ниже, чтобы увидеть примеры реализации.
Website
Github
Ladda UI for Bootstrap 3
Довольно интересная задумка с использованием индикаторов загрузки прямо на кнопках.
Website
Github
Дополнений к Twitter Bootstrap фреймворку действительно очень много. Даже во время написания статьи я продолжал находить интересные аддоны, которые значительно помогут в той или иной ситуации.
Date & Time Pickers
Daterangepicker
Website
Github
Bootstrap Timepicker
Website
Github
Clockface
Website
Github
Bootstrap Datetime
Website
Github
Bic_Calendar
Website
Github
Сolor Pickers
Pick a Color
Website
Github
Colorpicker for Bootstrap
Website
Github
Color Palette
Website
Github
Editors
Bootstrap Markdown
Website
Github
Bootstrap WYSIHTML5
Website
Github
Summernote
Website
Github
Tables
Tablecloth
Website
Github
Bootstrap Table
Website
Github
Media & Galleries
Bootstrap Lightbox
Website
Github
Bootstrap Image Gallery
Website
Github
Bootstrap Icon Picker
Website
Github
Dialogs & Notifications
Bootbox.js
Website
Github
Bootstrap Modal
Website
Github
Bootstrap Notify
Website
Github
Bootstrap Confirmation
Website
Github
Bootstrap Growl
Website
Github
На данный момент эти дополнения мне показались наиболее полезными в работе с Bootstrap-фреймворком. Они помогут значительно сэкономить время в том или ином проекте.
Надеюсь, вам понравилась моя коллекция. Если пользуетесь другими дополнениями и хотели бы включить их в этот список, опишите их в комментариях, мне (и, думаю, большинству читателей) они тоже могут оказаться полезны.
Дмитрий Кабаков
WordPress Developer
C чего начать · Bootstrap на русском
Bootstrap (текущая v3.3.7) есть несколько простых способов быстро приступить к работе, каждый из которых привлекателен для разного уровня квалификации и целью применения. Читайте ниже, чтобы увидеть, что соответствует вашим потребностям.
Bootstrap
Компилированый и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.
Скачать Bootstrap
Bootstrap CDN
Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.
<!-- Последняя компиляция и сжатый CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
<!-- Дополнение к теме -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Последняя компиляция и сжатый JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Установка с помощью Bower
Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:
$ bower install bootstrap
Установить с помощью npm
Вы также можете установить Bootstrap используя npm:
$ npm install [email protected]
require('bootstrap')
загрузит все Bootstrap’ы jQuery плагины на объект jQuery. На bootstrap
сам модуль ничего не экспортирует. Вы можете вручную загрузить Bootstrap’ы jQuery плагины индивидуально загрузки /js/*.js
файлы верхнего уровня пакета каталог.
Bootstrap’ы package.json
содержит некоторые дополнительные метаданные в следующих разделах:
less
— путь к Bootstrap’ы основным источником Less файлstyle
— путь к Bootstrap’ы не сжатый CSS, который был предварительно скомпилированные с использованием стандартных настроек (нет настройки)
Установить с помощью Composer
Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript, и шрифты, используя Composer:
$ composer require twbs/bootstrap
Autoprefixer необходимых для Less/Sass
Bootstrap использует Autoprefixer заниматься CSS вендорных префиксов. Если вы компилируете Bootstrap от Less/Sass источник а не через наш Gruntfile, Вам необходимо интегрировать Autoprefixer в процессе построения себя. Если вы используете предварительно скомпилированные Bootstrap или через наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрированы в Gruntfile.
Bootstrap доступен в двух формах, в которых вы найдете логично сгруппированные каталоги и файлы, представленные в собранном и минимизированном варианте.
Сборник кода Bootstrap 3
После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Это является наиболее базовая форма Bootstrap: собранные файлы, для их быстрой вставки в любой веб-проект. Мы предоставляем сборник CSS и JS (bootstrap.*
), а также ее минимизированный вариант (bootstrap.min.*
). CSS карты источника (bootstrap.*.map
) are available for use with certain browsers’ developer tools. Как дополнительные опции тем Bootstrap — также предоставляются шрифты с Glyphicons.
Исходный код Bootstrap
Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/
, js/
, и fonts/
вашего исходного CSS, JS, и иконки (соответственно). Папкаdist/
включает в себя все перечисленные предкомпилированные загрузки, что в разделе выше. Папка docs/
включает в себя исходный код для нашей документации, и examples/
использования Bootstrap. Кроме того, любой другой включенный файл обеспечивает поддержку для пакетов, информацию о лицензиях и развитии.
Bootstrap использует Grunt для сборки его системы, с удобными методами работы в рамках. Так мы собираем наш код, запускаем тесты, и многое другое.
Установка Grunt
Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.
Then, from the command line:
- Установите
grunt-cli
в глобальном масштабеnpm install -g grunt-cli
. - Передите в главный
/bootstrap/
каталог, а затем запуститеnpm install
. npm посмотрите наpackage.json
файл и автоматически установите необходимые местные зависимости, перечисленные в нем.
После завершения, у вас будет возможность запускать различные Grunt команды, предлагаемые из командной строки.
Доступные команды Grunt
grunt dist
(Просто собрать CSS и JavaScript)
Регенерирует каталог /dist/
с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.
grunt watch
(Счетчик)
Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.
grunt test
(Выполнить тесты)
Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.
grunt docs
(сборка и проверка документов активов)
Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через bundle exec jekyll serve
.
grunt
(Построить абсолютно все и запустить тесты)
Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.
Поиск и устранение неисправностей
Если у вас возникли проблемы с установкой зависимостей или запуска команд Grunt, сначала удалить /node_modules/
каталог сгенерированный npm. Затем, повторите npm install
.
Начните с базовым HTML шаблоном, или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.
Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Верхние 3 мета-тега *должны* быть указаны в первую очередь в head; любой другой контент в head должен быть указан *после* этих тегов -->
<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 -->
<!-- Предупреждение: Respond.js не работает при просмотре страницы через файл:// -->
<!--[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>
<h2>Hello, world!</h2>
<!-- на jQuery (необходим для Bootstrap - х JavaScript плагины) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Включают все скомпилированные плагины (ниже), или включать отдельные файлы по мере необходимости -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.
Получить исходный код для каждого примера ниже загрузив Bootstrap хранилище. Примеры можно найти в docs/examples/
каталога.
Использование фреймворка
Стартовый шаблон
Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.
Темы Bootstrap
Настройте темы Bootstrap чтобы разнообразить вид страниц.
Разметки
Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.
Jumbotron
Создание вокруг большого экрана навигационной панели и нескольких колонок, используя базовую систему разметки.
Узкий Jumbotron
Создание более персонализированных страниц через сужение контейнера по умолчанию и большого экрана.
Навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Статическое навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Фиксированное навигационное меню
Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.
Пользовательские компоненты
Крышка
Одностраничный шаблон для построения простых и красивых домашних страниц.
Карусель
Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.
Блог
Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.
Панель приборов
Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.
Страница входа
Шаблон пользовательской формы настроен для простого входа на сайт.
Выровненное нав. меню
Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.
Фиксированный Нижний колонтитул
Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама собой не делает этого.
Липкий Нижний колонтитул навигации
Прикреплено колонтитул в нижнюю часть браузера, с нав. меню в верхней части.
Эксперименты
Off-холст
Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.
Bootlint — это официальный Bootstrap на 1 инструмент. Он автоматически проверяет для нескольких распространенных ошибок HTML на веб-страницах, использующих Bootstrap в достаточно «ванильным» образом. Ванильный Bootstrap — х компонентов/виджетов требуют от своих частей DOM соответствуют определенные структуры. Bootlint проверяет экземпляры Bootstrap компоненты правильно структурированный HTML. Попробуйте добавить Bootlint на Bootstrap веб-разработки компиляторов, так что ни одна из распространенных ошибок, замедлить развитие проекта.
Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.
- Прочитайте и подпишитесь на Официальный Bootstrap Блог.
- Общайтесь с другими Bootstrapperами с помощью IRC в
irc.freenode.net
сервер, на ##bootstrap канала. - Для получения справки по использованию Bootstrap, спросите на Сайте stackoverflow, используя тег
twitter-bootstrap-3
. - Разработчики должны использовать ключевое слово
bootstrap
на пакеты, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичных механизмов доставки для максимального обнаружения. - Найти вдохновляющие примеры людей, строящих с Bootstrap на Bootstrap Экспо.
Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.
Bootstrap автоматически адаптирует страницы для различных размеров экрана.
Вот как можно отключить эту функцию и страница работает как этом нечувствительном шаблоне.
Шаги для блокировки адаптивного просмотра
- Опустите просмотр
<meta>
как об этом сказано в документах CSS - Переопределить
width
на.container
Для каждого грид уровня, с одной ширины, напримерwidth: 970px !important;
быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать!important
с медиа запросы или какой-селектор-фу. - Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
- Для макета разметки используйте классы
.col-xs-*
как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.
Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны).
Это отключает «мобильный сайт» аспекта Bootstrap.
Шаблон Bootstrap с заблокированной адаптивностью
Эти шаги мы применили для примера. Просмотрите исходный код, чтобы увидеть специфические отличия.
Просмотреть пример неадаптивного шаблона
Bootstrap спроектирован для лучшей работы в новых браузерах, то есть старые браузеры не всегда могут правильно отображать стили, хотя полностью функциональны в визуализации определенных компонентов
Поддержка браузерами
В частности, мы поддерживаем последние версии из следующих браузеров и платформ.
Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.
Мобильных устройств
Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.
Chrome | В Firefox | Safari | |
---|---|---|---|
Android | Supported | Supported | N/A |
iOS | Supported | Supported | Supported |
Браузеры для ПК
Аналогично, последние версии самых десктопные браузеры поддерживаются.
Chrome | В Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Supported | Supported | N/A | Supported | Supported |
Windows | Supported | Supported | Supported | Supported | Not supported |
В Windows мы поддерживаем Internet Explorer 8-11.
Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.
Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также интернет Эксплорер 7, а также Microsoft края, хотя они официально не поддерживаются.
Список некоторых ошибок в брузере, с чем Bootstrap может столкнуться, смотрите наш Баги в браузере.
Internet Explorer 8 и 9
Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Интернет Эксплорер 8 требует использования Respond.js для включения медиа поддержки запросов.
Свойство | Интернет Эксплорер 8 | Интернет Эксплорер 9 |
---|---|---|
border-radius |
Not supported | Supported |
box-shadow |
Not supported | Supported |
transform |
Not supported | Supported, with -ms prefix |
transition |
Not supported | |
placeholder |
Not supported |
Посетите Могу ли я использовать… для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.
Internet Explorer 8 и Respond.js
Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.
Respond.js и кросс-доменный CSS
Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.
Respond.js и file://
Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file://
(например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.
Respond.js и @import
Respond.js не работает с CSS, на которые ссылаются как @import
. В частности, некоторые конфигурации Drupal, как известно, используют @import
. Ознакомьтесь с документацией Respond.js для уточнений.
Internet Explorer 8 и box-sizing
IE8 не в полной мере поддерживает box-sizing: border-box;
при комбинировании с min-width
, max-width
, min-height
или max-height
. По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width
, .container
.
Internet Explorer 8 и @font-face
IE8 имеет некоторые проблемы с @font-face
в сочетании с :before
. Bootstrap использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.
Режим совместимости с IE
Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег <meta>
на вашей странице:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».
Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.
Просмотрите эти вопросы на StackOverflow для уточнений.
Internet Explorer 10 на Windows 8 и Windows Phone 8
Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:
@-ms-viewport { width: device-width; }
Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
// Авторских 2014-2015 Twitter, Вкл.
// Лицензированных в соответствии с MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.
Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.
Процентное округления в Safari
Движок для отображения версий Safari до версии v7.1 для OS X и Safari для iOS В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем .col-*-1
грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:
- Добавить
.pull-right
в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю. - Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)
Переполнение и прокрутка
Поддержка overflow: hidden
на <body>
элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в <body>
контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.
текстовых полей iOS и прокрутки
Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста <input>
или <textarea>
В <body>
содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.
Виртуальная клавиатура
Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute
, или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.
Меню Навигации
Элемент .dropdown-backdrop
не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).
Браузерное масштабирование
При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документов. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать нет ли аналогичных запросов). Но как правило мы игнорируем их, поскольку они часто не имеют решения, кроме создания обходных путей в виде хаков (hacky).
Липкий :hover
/:focus
на мобильном
Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover
«Липким». Другими словами, :hover
стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover
из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus
липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.
Печать
Даже в некоторых современных браузерах, для обеспечения печати приходится изловчиться.
В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:
- Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
- Настройка значения
@screen-*
Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small. - Добавить Пользовательское медиа запросы изменение грид Размер точки останова для печати медиа только.
Также, как Сафари и v8.0, фиксированной ширины .container
может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:
@media print {
.container {
width: auto;
}
}
Заводские Android браузеры
Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.
Меню выбора
На <select>
элементе, в Android браузере не будет отображаться элементы управления если есть border-radius
и/или border
. (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать <select>
элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Хотите увидеть пример? Проверьте это JS Bin demo.
Валидаторы
Для того, чтобы обеспечить наилучшие впечатления для старый и глючит браузеры, Bootstrap использует CSS хаки браузер в нескольких местах особые CSS на определенные версии браузеров, чтобы обойти ошибки в самих браузерах. Эти писаки понятно дело CSS валидаторы жаловаться на то, что они являются недействительными. В пару мест, мы также применяем ультрасовременные CSS функций, которые еще не полностью стандартизирована, но они используются исключительно для постепенного улучшения.
Эти предупреждения не имеют значения в практике, поскольку не вымышленная часть нашей CSS делает полной проверки и богатство порциями не препятствовать нормальному функционированию, не ломаные части, поэтому мы намеренно игнорируют эти предупреждения.
Наш HTML-документы также имеют некоторые тривиальным и несущественным HTML проверка предупреждения, в связи с наличие решения ошибок в Firefox.
Примеры. Документация · Bootstrap. Версия v4.0.0
Пользовательские компоненты
Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.
Прайслист
Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.
Checkout
Пользовательская форма заказа, показывающая компоненты формы и функции проверки.
Продукт
Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Слайдер
Навигационная панель, карусель и новые компоненты.
Блог
Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.
Прижатый футер
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Фреймворк
Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.
Разметка
Несколько примеров макетов сетки с различными уровнями вложенности.
Jumbotron
Макет jumbotron с навигационной панели и базовая система разметки.
Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.
Статическое меню
Супер базовый шаблон со статической навигационной панелью и дополнительным контентом.
Фиксированное меню
Супер базовый шаблон с фиксированной верхней навигационной панелью и дополнительным контентом.
Эксперименты
Примеры, которые ориентированы на будущие функции или методы.
Скользящее меню
Превратите расширяемую навигационную панель в скользящем меню.
Примеры · Bootstrap
Пользовательские компоненты
Новые компоненты и шаблоны, помогающие людям быстро начать работу с Bootstrap и демонстрирующие лучшие практики для добавления в среду.
Альбом
Простой одностраничный шаблон для фотогалерей, портфолио и многого другого.
Цены
Пример страницы с ценами, созданной с использованием карточек, с настраиваемым верхним и нижним колонтитулами.
Оформить заказ
Индивидуальная форма оформления заказа с указанием наших компонентов формы и их функций проверки.
Продукт
Lean-ориентированная на продукт маркетинговая страница с обширной сеткой и имиджевой работой.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Карусель
Настройте панель навигации и карусель, затем добавьте несколько новых компонентов.
Блог
Журнал, как шаблон блога с заголовком, навигацией, избранным контентом.
Панель приборов
Основная оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.
Войти в систему
Индивидуальная форма и дизайн формы для простого входа в форму.
Липкий нижний колонтитул
Прикрепите нижний колонтитул к нижней части области просмотра, если содержимое страницы короткое.
Framework
Примеры, которые фокусируются на реализации использования встроенных компонентов, предоставляемых Bootstrap.
Сетка
Множество примеров макетов сетки со всеми четырьмя уровнями, вложенностью и многим другим.
Jumbotron
Постройте вокруг jumbotron с помощью панели навигации и некоторых основных столбцов сетки.
Взяв компонент navbar по умолчанию и показывая, как его можно перемещать, размещать и расширять.
Демонстрация всех адаптивных и контейнерных опций для панели навигации.
Один пример навигационной панели со статической верхней панелью навигации вместе с дополнительным контентом.
Навбар исправлен
Пример одиночной навигационной панели с фиксированной верхней навигационной панелью и некоторым дополнительным контентом.
Навбар дно
Пример с отдельной панелью навигации с нижней панелью навигации и дополнительным контентом.
Эксперименты
Примеры, которые ориентированы на будущие функции или методы.
Плавающие этикетки
Красиво простые формы с плавающими надписями на ваших входах.
Offcanvas
Превратите свою расширяемую навигационную панель в скользящее меню без канвы.
,
Начало работы · Bootstrap
Bootstrap (в настоящее время v3.3.7) имеет несколько простых способов быстрого начала работы, каждый из которых обращается к разному уровню навыков и сценарию использования. Прочитайте, чтобы увидеть, что соответствует вашим конкретным потребностям.
Bootstrap
Скомпилированные и минимизированные CSS, JavaScript и шрифты. Никакие документы или оригинальные исходные файлы не включены.
Скачать Bootstrap
Исходный код
Source Less, JavaScript и файлы шрифтов, а также наши документы. Требуется компилятор Less и некоторые настройки.
Скачать исходный код
Bootstrap CDN
Люди в MaxCDN любезно предоставляют поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.