Подключение bootstrap

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

  • текстовый редактор для работы с кодом («Блокнот», «Brackets», «Notepad++» или др.);
  • браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами. Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации.

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье.


Наиболее просто выполнить загрузку – это воспользоваться ссылкой. На сайте Bootstrap присутствуют 2 ссылки.

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

Скачать Bootstrap 3.4.0 Скачать Bootstrap 4.2.1

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

Исходные коды Bootstrap 3.4.0 Исходные коды Bootstrap 4.2.1

Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.0):

  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  

В каталоге css
находятся стили фреймворка Bootstrap, а в js — плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).

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

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

Кроме этих файлов, в данный архив ещё входит иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Скачать Glyphicons (Bootstrap 3.4.0)

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


Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3. Основное его отличие в том, что он не содержит шрифт «Glyphicons». Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome, Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией.

Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css. Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.

Первый файл (bootstrap-grid.css) содержит сетку Bootstrap, а второй (bootstrap-reboot.css) — нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

  1. Bootstrap CSS (bootstrap.min.css);
  2. Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);
  3. Bootstrap JavaScript (bootstrap.min.js).

Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (</body>), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.

Подключение фреймворка Bootstrap 4 осуществляется так:

Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

CDN Bootstrap 3.4.0:

Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.

Скачать пример

itchief.ru

Скачиваем и подключаем Bootstrap.

На то, чтобы написать сайт с нуля уходит масса времени (свой первый одностраничник, например, автор этих строк писал полтора месяца. ОДНОСТРАНИЧНИК, КАРЛ!!!), причем львиная доля этого времени уходит на работу с CSS и JavaScript – оно и понятно, ведь стили и скрипты даже по объему занимают значительную часть сайта – таблицы стилей в 1500 – 2000 строк на современных сайтах не редкость, как и масса всевозможных JS скриптов примерно такого же объема. Даже неплохо зная HTML-5, CSS-3 и JavaScript, при таком объеме немудрено запутаться, да и веб-дизайнер – это все же больше художник, чем программист …

Прекрасный подарок своим коллегам сделали дизайнеры компании Twitter (да-да, той самой соцсети с сообщениями в 140 знаков!) – они создали Bootstrap — фреймворк (проще говоря – набор готовых стилевых решений, напоминающий конструктор Lego), оформленный в виде нескольких CSS таблиц и скриптов, и содержащий уже готовые стили как для целых страниц и блоков, так и для заголовков, кнопок, таблиц, и прочих элементов сайта. Верстка сайта с нуля как таковая отменяется!


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

Перед тем как скачать Bootstrap, его нужно настроить – ведь полный его архив весит не много не мало 546 Кб., и все компоненты этой воистину гигантской библиотеки вам могут попросту не понадобится. На странице загрузки нужно просто отметить нужные вам компоненты флажками.

bootstrap-download

Common CSS.

В левой колонке (Common CSS) мы видим базовые стили  Bootstrap – они всегда могут пригодиться, и эти флажки я бы не стал снимать никогда. В базовые стили входят:

  • Print media styles – стили, используемые в версии страницы для печати.
  • Typography – Заголовки, отступы, абзацы и многое другое.

  • Code – если вам понадобится отображать программный код в тексте, вы можете использовать эти стили.
  • Grid system – свойства блоков, то, что позволяет настроить за несколько минут тот самый адаптивный дизайн, позволяющий сделать ваш сайт читабельным на экране планшета или смартфона.
  • Tables – стили таблиц, делающие их очень красивыми и информативными.
  • Forms – стили для форм.
  • Buttons – кнопки в Bootstrap реализованы просто чудесно (о них мы еще поговорим).
  • Responsive utilities – эти стили так же нужны для адаптивного дизайна – можно скрывать и отображать элементы в зависимости от размеров дисплея.

Components.

Следующая колонка – компоненты Bootstrap. Вот что туда входит:

  • Glyphicons – иконочный шрифт, использующийся в Bootstrap. Не самый лучший, а весит много, поэтому, если вы планируете использовать другой набор иконок, например, Font Awesome или Themify Icons – смело отключайте эту опцию.
  • Button groups – объединение кнопок в блоки и группы.
  • Input groups – текстовые поля.
  • Navs – вкладки, работающие на JavaScript.
  • Navbar – навигация в футере (главное меню)
  • Breadcrumbs – «хлебные крошки», небольшое меню, показывающее путь от главной до текущей страницы.
  • Pagination – навигация по страницам.
  • Pager – кнопки для перемещения назад и вперед
  • Labels – стиль оформления текста, похожий на кнопки шести видов.

  • Badges – еще один похожий на кнопки стиль – значки.
  • Jumbotron – большой блок с крупным текстом, обычно такое располагают сразу под заголовком сайта в качестве приветствия или краткого описания проекта.
  • Thumbnails – уменьшенные копии (превью) картинок.
  • Alerts – уведомления.
  • Progress bars – полоса прогресса с анимацией.
  • Media items – блоки с комментами, твитами и прочим.
  • List groups – различные опции оформления списков (например список, состоящий из кнопок).
  • Panels – блоки, состоящие из заголовка, основного текста и подвала.
  • Responsive embed – для отображения встроенного видео на дисплеях различных устройств – необходимо для адаптивного дизайна.
  • Wells – различное оформление цитат и подсказок.
  • Close icon.

jQuery plugins.

В правой колонке – компоненты Bootstrap,  добавляющие анимацию и прочие динамические функции. Чтобы их использовать, нужно подключить jQuery. Чаще всего приходится пользоваться такими элементами:

  • Advanced buttons – дополнительные функции для кнопок.
  • Dropdowns – дропдаун, он и в бутстрапе дропдаун – хорошее выпадающее меню без этого компонента не сделаешь.
  • Alert dismissal – уведомления (успех – отказ, например).
  • Carousel functionality – очень эффектный слайдер.
  • Modals – всплывающие окна.
  • Collapse – раскрывающиеся блоки.
  • Tooltips – всплывающие подсказки.
  • Popovers – более продвинутый вариант всплывающих подсказок – они могут состоять из заголовка и основного содержимого, например.

После того, как отмечены необходимые для нашего проекта компоненты, нам остается лишь нажать на кнопку Compile and download внизу страницы, и дождаться окончания загрузки. Распаковав архив, нужно помесить имеющиеся в нем папки в папку с нашим пректом, и подключить файл bootstrap.min.css  (или более функциональный bootstrap.css), а так же (при необходимости) — bootstrap-theme.css, и если будете использовать jQuery plugins – подключите jquery-2.1.4.js и bootstrap.js. Код html-страницы со подключенным Bootstrap будет выглядеть примерно так:

Наш «Hello, World!» на бутстрапе готов. В следующей статье я расскажу о таблицах и кнопках в Bootstrap.

www.riddicksitemake.com

  • Главная
  • Курсы
  • Основы CSS
  • Подключение и использование Bootstrap урок — курс Основы CSS от Devionity

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


Подключение. Для подключения фреймворка необходимо либо скачать пакет файлов и подключить их в теге <head>, либо подключить их удаленно — там же. Например,

<head> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

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

Например, для устройств среднего размера (medium devices), возможно определить столбцы следующим образом:


что будет означать два столбца, в первый из которых имеет условную длину 8, а второй — 4 из 12. В сумме эти значения, очевидно, дают также 12. Фактически ширина столбца задается пропорционально. Другой пример:

<div class="row"> 
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
  <div class="col-md-4" style='border:1px solid black'>.col-md-4</div>
</div>

означает, что будет 3 столбца одинаковой ширины. Или же

<div class="row"> 
  <div class="col-md-12">.col-md-12</div>
</div>

Означает 1 столбец растянутый по всей ширине экрана.

Очевидно, что на мобильном устройстве не вместится макет, предназначенный для ПК. Описанные выше макеты на мобильном устройстве будут отображены не в виде столбцов, а один под другим — поскольку им не хватит места по горизонтали. В фреймворке были разработаны специальные классы для работы с мобильными устройствами. Эти классы можно указывать для альтернативного макета в случае мобильного устройства (xs — mobile devices, sm — small devices). Например,

<div class="row"> 
  <div class="col-xs-2 col-md-8">1</div>
  <div class="col-xs-10 col-md-4">2</div>
</div>

означает, что в макете две ячейки, но пропорция их ширины будет разной при отображении на ПК или на мобильном устройстве: 8 и 4 на ПК в одну строку, или 2 и 10 на мобильном устройстве. В сумме обе пары значений дают 12, потому будут размещены в одной строке.

Создание меню. Для создания меню используют класс nav (в блок этого класса помещают кнопки или ссылки) и класс navbar в который помещают готовую навигацию. Например,

<ul class="nav nav-pills"> 
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

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

devionity.com

Компилированные CSS и JS

Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:

  • Компилированные и «облегченные» бандлы (Смотрите Сравнение файлов CSS)
  • Компилированные и «облегченные» плагины JS.

Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.

Скачать

Исходные файлы

Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:

  • Компилятор Sass (поддерживаются: Libsass или Ruby Sass) для компиляции ваших CSS.
  • Постпроцессоры для создания своих нестандартных свойств CSS. (-webkit-, -moz-, -o-, и т.д.)

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

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

Bootstrap CDN

Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Если вы пользуетесь нашим компилированным JS, не забудьте подключить наши CDN версии jQuery и Popper.js перед вашими JS-файлами.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)

Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.

npm

Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:

npm install bootstrap

require('bootstrap') ) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загружая файлы /js/*.js в корневую папку пакета.

пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:

  • sass — путь к главным исходникам Sass Bootstrap
  • style — путь к полной версии CSS Bootstrap, которая предварительно откомпилирована с помощью установок по умолчанию (без настройки)

RubyGems

Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile:

gem 'bootstrap', '~> 4.0.0'

Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:

gem install bootstrap -v 4.0.0

Смотри gem’s README.

Composer

Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:

composer require twbs/bootstrap:4.0.0

bootstrap-4.ru

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

Если вы не хотите или не можете скачать архив с основными файлами Bootstrap, тогда ваш вариант — подключение файлов через Bootstrap CDN. В этом случае вам необходимо стабильное соединение с Интернетом.

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

Для тех, кто использует npm или  другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на официальном сайте или его русскоязычной версии.

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее — в папках css и js будут представлены следующие файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл bootstrap-grid.min.css.

Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла bootstrap.min.js необходимо подключить jQuery и Popper, а файлы bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлы Разметка Содержание Компоненты Утилиты
Включены Включены Включены Включены
Только Система сеток Не включены Не включены Только flex утилиты
Не включены Только Reboot Не включены Не включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлы Popper jQuery
Включены Не включены
Не включены Не включены

Поддержка Bootstrap 4

4-ая версия Bootstrap построена, в основном, на использовании технологии Flexbox, которая на данный момент поддерживается большинством современных браузеров, в том числе и Internet Explorer версий 10-11 / Microsoft Edge. Для поддержки младших версий IE необходимо использовать Botstrap 3. Существует ряд нюансов, связанный с нормальным отображением ряда элементов в мобильных браузерах на платформах iOS и Android, которые необходимо рассмотреть в документации BS4.

Шаблон страницы Bootstrap 4

При верстке страницы на основе Bootstrap 4 следует указывать Doctype стандарта HTML5 и meta-тег veiwport, чтобы страницы адаптировались к разрешениям экрана на различных устройствах. Также в нижней части страницы необходимо подключить jQuery и Popper, и уже после них bootstrap.js. Сделать это можно 2-мя основными способами: указав относительный путь к файлам, скачанным на ваш компьютер или используя файлы Bootstrap CDN.

Шаблон на основе Bootstrap CDN

Шаблон на основе файлов из папки скомпилированных файлов Bootstrap 4

Скачать оба варианта можно по ссылке.

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

Reboot — это комплекс css-стилей, не использующий классов, а основанный на стилизации элементов для единого их отображения в различных браузерах. Он основан на  normalize.css,  который уже давно используется для унификации стилей основных элементов. Reboot также переводит все единицы измерения в remвместо em, устанавливает значение свойства box-sizing как border-box для всех элементов, а также псевдоэлементов  :*::before и *::after.

Эти css-стили входят в bootstrap.css и минифицированный bootstrap.min.css, поэтому подключать его отдельно не нужно.

Полезные ссылки:

  • Быстрый старт
  • Reboot

Метки: Bootstrap-4 Шаблон

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector