9.0 KiB
| title | localeTitle |
|---|---|
| Bootstrap | начальная загрузка |
начальная загрузка
Bootstrap - популярная интерфейсная платформа для веб-разработки. Он содержит готовые компоненты и элементы дизайна для создания HTML-контента. Современные браузеры, такие как Chrome, Firefox, Opera, Safari и Internet Explorer, поддерживают Bootstrap.
Bootstrap включает в себя гибкую сетчатую систему для различных макетов. Это отличная отправная точка для создания мобильного сайта для мобильных устройств. Он также включает в себя дополнительные функции JavaScript, такие как складной контент, карусели и модалы.
История версий
Первоначально Twitter разработал структуру Bootstrap как внутренний инструмент. Они выпустили его в качестве проекта с открытым исходным кодом в августе 2011 года.
Bootstrap 2 был выпущен в январе 2012 года. Одной из основных особенностей стало введение 12-ти ответной сетчатой системы. Bootstrap 3 появился в августе 2013 года, переключившись на плоский дизайн и мобильный подход. Bootstrap 4 доступен в бета-версии по состоянию на август 2017 года, а теперь включает Sass и Flexbox.
Bootstrap 4 разрабатывался в течение двух лет до выпуска некоторых бета-версий в течение 2017 года, а первый стабильный релиз вышел в январе 2018 года. Некоторые заметные изменения включают:
- Перемещено от Меньшего до Сасса;
- Перемещено в Flexbox и улучшена сетка;
- Добавлены карты (замена колодцев, миниатюр и панелей);
- И многое другое!
На момент написания последней версии Bootstrap был [4.1.3] (http://blog.getbootstrap.com/2018/07/24/bootstrap-4-1-3/ ). Если вы хотите идти в ногу с новостями об объявлениях, следуйте за ними здесь .
Монтаж
Есть два основных варианта добавления Bootstrap в ваш веб-проект. Вы можете ссылаться на общедоступные источники или загружать фреймворк напрямую.
Связь с другим источником
Вы можете добавить Bootstrap CSS, используя элемент <link> внутри <head> вашей веб-страницы, который ссылается на сеть доставки контента (CDN):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Добавление элементов JavaScript в Bootstrap аналогично элементам <script> которые обычно помещаются внизу вашего ' ' тег. Возможно, вам придется сначала включить некоторые зависимости. Обратите особое внимание на указанный порядок:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Примечание. Это только примеры и могут быть изменены без предварительного уведомления. Пожалуйста, обратитесь к CDN для текущих ссылок, которые будут включены в ваш проект.
Скачать / Установить
Вы можете загружать и устанавливать исходные файлы Bootstrap с помощью Bower, Composer, Meteor или npm. Это позволяет повысить контроль и возможность включать или исключать модули по мере необходимости.
npm install bootstrap
gem 'bootstrap', '~> 4.1.3'
_Примечание: Это только примеры и могут быть изменены без предварительного уведомления. Пожалуйста, обратитесь к сайту _ Bootstrap _ для самых последних ссылок.
Сетевая система Bootstrap
Сетчатая система представляет собой мобильную первую систему flexbox для быстрого построения макетов всех форм и размеров, подходящих для всех устройств. Он основан на раскладке из 12 столбцов и имеет несколько уровней, по одному для каждого диапазона запросов.
Bootstrap поставляется с предопределенными классами сетки для вашего использования в разметке. Более подробную информацию и примеры см. На странице https://getbootstrap.com/docs/4.1/layout/grid/.
Особенности Boostrap
-
Bootstrap 3 поддерживает последние версии Google Chrome, Firefox, Internet Explorer, Opera и Safari (кроме Windows). Он также поддерживает поддержку IE8 и последней версии расширенной поддержки Firefox (ESR). [12]
-
Начиная с версии 2.0, Bootstrap поддерживает гибкий веб-дизайн. Это означает, что макет веб-страниц настраивается динамически, принимая во внимание характеристики используемого устройства (рабочий стол, планшет, мобильный телефон).
-
Начиная с версии 3.0, Bootstrap приняла философию дизайна мобильных устройств, подчеркнув, что дизайн по умолчанию отличается от адаптивного дизайна.
-
Версия 4.0 добавлена поддержка Sass и flexbox
Дополнительная информация:
У Bootstrap есть полная документация со многими примерами и шаблон HTML для начала работы (этот шаблон содержит только скрипт, он не содержит настройки сетки, если это то, что вы ищете).
Кроме того, вы можете найти как бесплатные, так и оплачиваемые темы, которые основываются на структуре Bootstrap, чтобы обеспечить более индивидуальный и стильный внешний вид.
Ресурсы Bootstrap:
Официальный блог Bootstrap Исходное содержание сайта Bootstrap Витрина сайтов, построенных с использованием Bootstrap HTML linter для проектов с использованием Bootstrap Элементы дизайна и фрагменты кода для Bootstrap Код, тема и дополнительные ресурсы для Bootstrap