Bootstrap ru: Bootstrap · Самая популярная в мире библиотека HTML, CSS и JS.

Содержание

Bootstrap · Самая популярная в мире библиотека HTML, CSS и JS.

Bootstrap

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

Начать Скачать

В настоящее время v5.0.1

Установка

Установите исходные файлы Sass и JavaScript для Bootstrap через npm, Composer или Meteor.

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

Прочтите документацию по установке

npm install bootstrap

gem install bootstrap -v 5. 0.0-alpha1

BootstrapCDN

Когда вам нужно только включить скомпилированный CSS или JS Bootstrap , вы можете использовать BootstrapCDN.

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

Изучить документацию

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap. min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Bootstrap иконки

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

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

Получить Bootstrap иконки

Официальные темы

Поднимите Bootstrap на новый уровень с премиальными темами с официального магазина Bootstrap тем.

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

Обзор тем

С чего начать — Введение · Twitter Bootstrap: на Русском

Перед скачиванием убедитесь что у Вас имеется удобный редактор кода (мы рекомендуем Sublime Text 2), а так же какое-либо понимание и знание технологий HTML и CSS. Здесь мы не дадим описание исходных файлов, но они находятся в свободном доступе на GitHub.

Скачать готовый проект

Быстрый способ начать: скачать скомпилированные и минифицированные файлы CSS, JS, и картинок.

Скачать Bootstrap

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

Оригинальные файлы CSS и JavaScript, с текущей версией Bootstrap можно скачать через GitHub.

Скачать исходный код Bootstrap’а

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

Разархивировав скаченный архив (скомпилированного) Bootstrap’а. Вы увидите следующую структуру:

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
  └── README.md

Это основной вид Bootstrap’а: скомпилированные файлы для начала быстрой работы, просто загрузите на сервер и Вы готовы к работе. Мы предоставили скомпилированные CSS и JS (bootstrap.*), наряду со скомпилированными и минифицированными CSS и JS (bootstrap.min.*) файлами. Картинки были сжаты через ImageOptim, приложение для Mac, позволяющее сжимать PNG-файлы.

Учитывайте что все JavaScript-плагины основаны на jQuery.

Bootstrap заряжен порцией высококачественного HTML, CSS, и JS для любого типа веб-разработки.

Документация

Шаблон

Глобальные стили для элемента body: изменение background’а, ссылки на стили, сетка шаблона и два простых макета.

CSS

Стили основных HTML элементов, оформление и шрифты, код, таблицы, формы и кнопки. Включая Glyphicons — набор иконок.

Компоненты

Основные стили компонентов интерфейса: вкладки и навигационные кнопки, навигационный бар (navbar), сообщения, заголовки страниц и т.п.

Javascript-плагины

Схоже с компонентами, Javascript-плагины оживляют ваш веб-проект, и Компоненты такие как всплывающие подсказки (tooltips), всплывающий контент (popovers), всплывающие окна (modals) и много других вкусностей.

Список компонентов

Вместе Компоненты и Javascript-плагины представляют следующий список элементов интерфейса:

Группы кнопок
Кнопки с выпадающими списками
Элементы навигации: вкладки, кнопки и списки
Навигационный бар (Navbar)
Этикетки
Бейджи
Заголовки страниц и элемент hero

Миниатюры
Сообщения
Индикаторы процесса (прогресса)
Всплывающие окна
Выпадающие списки
Всплывающие подсказки
Всплывающий контент
Стек вкладок
Каруселька
Вспомогательное меню input элемента (Typeahead)

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

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

Затем обратите внимание на стандартный HTML-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Шаблон</title>
  </head>
  <body>
    <h2>Привет! Я Bootstrap...</h2>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

Что бы Забутстреппить эту страничку, просто добавьте линк на CSS и JS файлы:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Шаблон</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h2>Привет! Я Bootstrap...</h2>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min. js"></script>
  </body>
</html>

Все готово! Благодаря этим файлам, вы можете начать разрабатывать ваш сайт или приложение на Bootstrap’е.

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

Основной сайт. Маркетинг.
Основной «Hero» элемент и три дополняющие колонки с информацией.
Плавающая разметка
Данный пример использует все преимущества динамического дизайна с плавающей шириной.
Стартаперский шаблон
Полнофункциональный шаблон, включающий в себя все фичи (HTML/CSS/LESS/JS) от Bootstrap.
Классический для продукта
Простой, легкий маркетинговый шаблон для проектов и команд.
Вход (Логин)
Классическая форма входа.
Подвал
Подвал привязанный к низу страницы.
Каруселька «jumbotron»
Интерактивный, приятный и веселый шаблон, подойдет как для продукта так и для команды.

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

Читать документацию Изменить и скачать Bootstrap

Начало работы с Bootstrap · Bootstrap v5.2

Быстрый старт

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

Создайте новый файл index.html в корне проекта. Включите также тег для правильного реагирования на мобильных устройствах.
```
 

  <голова>
    <мета-кодировка="utf-8">
    
    Демо Bootstrap
  
  <тело>
     Привет, мир! 
  

 
```

Включить CSS и JS Bootstrap. Поместите тег в для нашего CSS и . Узнайте больше о наших ссылках CDN.

 

  <голова>
    <мета-кодировка="utf-8">
    
    Демо Bootstrap
    
  
  <тело>
     Привет, мир!

Вы также можете включить Popper и наш JS отдельно. Если вы не планируете использовать раскрывающиеся списки, всплывающие окна или всплывающие подсказки, сэкономьте несколько килобайт, не включая Popper.

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

В качестве справки, вот наши основные ссылки CDN.

Описание	URL-адрес
СС	`https://cdn. jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Вы также можете использовать CDN для получения любой из наших дополнительных сборок, перечисленных на странице «Содержание».

Следующие шаги

Прочтите немного больше о некоторых важных глобальных настройках среды, которые использует Bootstrap.
Прочтите о том, что включено в Bootstrap, в нашем разделе содержания и списке компонентов, для которых требуется JavaScript ниже.
Нужно немного больше энергии? Подумайте о сборке с помощью Bootstrap, включив исходные файлы через менеджер пакетов.
Хотите использовать Bootstrap в качестве модуля с <тип сценария = "модуль"> ? Пожалуйста, обратитесь к нашему разделу об использовании Bootstrap в качестве модуля.

Компоненты JS

Любопытно, какие компоненты явно требуют нашего JavaScript и Popper? Щелкните ссылку «Показать компоненты» ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.

Показать компоненты, требующие JavaScript

Оповещения об отклонении
Кнопки для переключения состояний и функций флажка/радио
Карусель для всех вариантов поведения слайдов, элементов управления и индикаторов
Свернуть для переключения видимости содержимого
Выпадающие списки для отображения и позиционирования (также требуется Popper)
Модальные окна для отображения, позиционирования и поведения прокрутки
Navbar для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
Navs с подключаемым модулем Tab для переключения панелей содержимого
Offcanvases для отображения, позиционирования и поведения прокрутки
Scrollspy для обновления поведения прокрутки и навигации
Тосты для отображения и закрытия
Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper)

Важные глобальные переменные

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

Тип документа HTML5

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

...

Отзывчивый метатег

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

Вы можете увидеть пример этого в действии в быстром запуске.

Box-sizing

Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.

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

 .selector-for-some-widget {
  box-sizing: контент-бокс;
}

В приведенном выше фрагменте вложенные элементы, включая сгенерированный контент с помощью ::before и ::after , унаследуют указанный box-sizing для этого .selector-for-some-widget .

Узнайте больше о блочной модели и размерах на CSS Tricks.

Перезагрузка

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

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

Читайте и подписывайтесь на официальный блог Bootstrap.
Спрашивайте и изучайте наши обсуждения на GitHub.
Общайтесь с другими загрузчиками в IRC. На сервере irc.libera.chat , в канале #bootstrap .
Справку по реализации можно найти в Stack Overflow (с тегом bootstrap-5 ).
Разработчики должны использовать ключевое слово bootstrap для пакетов, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной возможности обнаружения.

Вы также можете подписаться на @getbootstrap в Твиттере, чтобы быть в курсе последних сплетен и потрясающих музыкальных клипов.

Использование Bootstrap CSS и JS (Symfony Docs)

Изменить эту страницу

В этой статье объясняется, как установить и интегрировать платформу Bootstrap CSS. в вашем приложении Symfony с помощью Webpack Encore. Во-первых, чтобы иметь возможность настраивать вещи дальше, мы установим bootstrap :

Теперь, когда bootstrap находится в каталоге node_modules/, вы можете импортируйте его из любого файла Sass или JavaScript. Например, если у вас уже есть файл global.scss , импортируйте его оттуда:

Вот и все! Это импортирует node_modules/bootstrap/scss/bootstrap.scss файл в global.scss . Вы даже можете сначала настроить переменные Bootstrap!

Кончик

Если вам не нужны все функций Bootstrap, вы можете включить определенные файлы вместо этого в каталоге начальной загрузки - например. ~бутстрап/scss/предупреждение .

Сначала установите зависимости JavaScript, необходимые для версии Bootstrap. используется в вашем приложении:

Теперь требуется загрузка из любого из ваших файлов JavaScript:

Если вы используете загрузку с Turbo Drive, чтобы ваш JavaScript загружался при каждом изменении страницы, оберните инициализацию в turbo:load прослушиватель событий:

Если вам нужно использовать плагины jQuery, которые хорошо работают с jQuery, вам может понадобиться метод autoProvidejQuery() Encore, чтобы эти плагины знают, где найти jQuery. Затем вы можете включить необходимый JavaScript и CSS как обычно:

Эта работа, включая образцы кода, лицензирована Creative Commons BY-SA 3.0 лицензия.

Версия

Версия: 6.3 (разработка) 6,2 (текущий) 5.4 6.

Штирлиц — Сеть печатных салонов в Перми