Изучение bootstrap. Bootstrap — простая адаптивная верстка для новичков. Что такое bootstrap
» мы познакомились с фреймворком, разобрали его преимущества, вкратце рассмотрели его так называемую сетку, теперь пришло время на практике разобрать, как пользоваться Bootstrap.
Скачать Bootstrap можно с официального сайта getbootstrap.com . На главной странице жмем на кнопку «Download Bootstrap ».
После клика нас переносит на страницу, на которой предлагается несколько видов скачивания. В рамках данной статьи мы рассмотрим обычное скачивание полной версии фреймворка.
После скачивания и распаковки архива мы получаем три папки:
- CSS - папка со стилями
- JS - папка с js скриптами
- FONTS - папка с иконочными шрифтами
Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap , в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.
Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js .
Отличие файлов с «.min.» от обычных в том, что файлы с «.min.» оптимизированные, то есть код написан в одну строку без переносов строк и пробелов, поэтому они весят меньше обычных, а содержимое файлов абсолютно одинаковое.
Теперь я создам в своей папке bootstrap папку css , помещу в нее файл bootstrap.min.css и создам папку js , в которую положу bootstrap.min.js . Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.
Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html . Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.
В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery , но если вы делаете не на «бутстраповском » шаблоне, а на каком-то своем, то нужно между тегами подключить файл стилей bootstrap.min.css , а после него созданный style.css .
Затем перед закрывающим тегом сначала подключаем библиотеку jQuery .
А после библиотеки подключаем js скрипт.
В общем, HTML-скелет документа получается вот такой.
Bootstrap
Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.
Как пользоваться документациейДокументация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started », «CSS », «Components », «JavaScript » и «Custimize », на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.
Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap . Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.
Работа с сеткой BootstrapКак я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col , колонок может быть максимум двенадцать. К классу.col добавляются префиксы (lg , md , sm , xs), которые указывают ширину данного столбца на конкретном разрешении экрана.
Оборачиваются ряды со столбцами в блок с классом .container или классом.container-fluid . Различие между ними в том, что у класса.container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS ».
При помощи сетки фреймворка сделаем классическую разметку нашей страницы (шапка, контент, боковая колонка и подвал), для этого создадим три ряда и четыре колонки, получается вот такой код.
HEADER CONTENT SIDEBAR FOOTER
Для разделения блоков я прописал два дополнительных класса: .block , .block2 и добавил в них по паре правил в созданном файле style.css .
Block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }
Добавим иконочный шрифт к нашим заголовкам. В разделе «Components » выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег и вставляем скопированный класс.
HEADER
Теперь не мешало добавить какое-то меню. Для этого в разделе «Components » переходим в «Navbar », выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.
Осталось заполнить «conten t» и «sidebar ». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.
Вот так просто, всего за 5 минут, мы набросали простейший макет страницы, адаптивный под все устройства, при этом практически не писали код самостоятельно. Перейдите по ссылке и посмотрите полученный результат.
На этом я буду заканчивать статью. Мы рассмотрели лишь крохотную часть из функционала фреймворка, но как работать с Bootstrap, думаю, Вы поняли. Следующий шаг — это изменение стилей фреймворка под свои нужды и скачивание только тех компонентов, которые нужны. Все это разберем в статье «
Система сеток в Twitter Bootstrap 3 – это быстрый путь для создания html макета сайта. Как раз это самая основная часть в bootstrap, т.к. благодаря сетки с можно создать адаптивную версию сайта, обеспечивает правильное расположение всех элементов. И начинает разработка макета с css класса container.
Container (контейнер) с фиксированной шириной.Из названия очевидно, что container содержит заданную width, изменения которой происходят в следствии изменении рабочего окна браузера.
Выравнивание происходит по центру с помощью css свойств: .container{ margin-left: auto; margin-right: auto; } Container имеет внутренние отступы: .container{ padding-left: 15px; padding-right: 15px; }
В таблице ниже представлена ширина container, которая зависит от ширины окна веб-клиента пользователя:
Контейнер с резиновой шириной. В отличии от фиксированного container, container-fluid не имеет ширины, и единственное, что у него есть из css классов: .container{ padding-left: 15px; padding-right: 15px; } Ряд внутри контейнера.После того, как вы определились с контейнером нужно переходить к рядам. Ряд принимает такую же ширину, как и контейнер. Имеет отрицательный margin:
Row{ margin-left: -15px; margin-right: -15px; } В итоге наша конструкция уже получает вид (для примера возьму фиксированную ширину):
Применение блоков в Twitter Bootstrap. Как до этого писал css-класс row служит для создания рядов. А внутри этих самых рядов необходимо размещать блоки:Внутри блока размещается контент сайта. Также можно размещать еще одни ряды. Один ряд содержит 12 блоков.
Ширина блока указывается в относительном формате посредством необходимого количества колонок. Стартовая ширина – 1 – соответствует одной колонке Bootstrap, наибольшая ширина – 12 – максимальное количество колонок в одном ряду.
Например: если нам необходимо в одном ряду иметь 4 блока с идентичной шириной, то нам нужно задать width равную 3 (div class ="col-*-3" > ... div >). В сумме выходит 12 (3+3+3+3).
Адаптивная верстка под гаджетыЯ до этого писал, что Twitter Bootstrap 3 знаменит своими сетками, которые подходят под различные пользовательские устройства, будь то телефон, планшет, монитор вашего домашнего/рабочего компьютера). И как раз пришло время до конца разобраться с этим.
В примере выше после слова col я ставил звездочку. И как раз вместо звездочки нужно указывать для какого устройска будет применяться заданный блок:
- – col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
- – col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
- – col-md-* – средних размеры экранов, т.е. нетбуки;
- – col-lg-* – для больших экранов. Если верить яндекс.метрике , то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.
Фиксированный макет (class ="container" ) | Соответствует 100% ширине веб-клиента | 750px | 970px | 1170px |
Резиновый макет (class ="container-fluid" ) | Соответствует 100% ширине экрана веб-клиента | |||
Префикс класса | class ="col-xs-*" | class ="col-sm-*" | class ="col-md-*" | class ="col-lg-*" |
Максимальная ширина колонки Bootstrap для фиксированного макет (class ="container" ) | 62px (750px / 12) | 81px (970px / 12) | 97px (1170px / 12) | |
Максимальная ширина колонки для резинового макета (class ="container-fluid" ) | Ширина веб клиента делится на 12 | |||
Внутренние отступы | 15px по краям |
Но будьте тут внимательнее! Например, если вы используете класс class ="col-sm-*" , то он будет применяться не только к планшетам, но и к нетбукам и большим экранам, но это дейтсвует в том случае, если вы не указали "col-md-*" и "col-lg-*" . Т.е. если у вашем ряду будет один блок для всех экранов, то достаточно написать div class ="col-xs-12" > ... div >, а не div class ="col-xs-12 col-sm-12 col-md-12 col-lg-12" > ... div >.
Пример адаптивной верстки на Twitter Bootstrap 3В теории – вроде как все понятно, и одновременно ни чего не понятно. Чтобы хоть как-то разобраться и закрепить все эти блоки, ряды и понять смысл всей этой сетки рассмотрю небольшой кусок кода, при помощи которого все встанет на свои места.
Я не дизайнер, да и в этом уроке ни чего не нужно выдумывать супер красивого. Для общего представления будет достаточно и схемаческих изображений.
В качестве примера я сверстаю макет, состоящий из трех блоков, которые расположены в одном ряду, но по-разному будут отображаться на пользовательских устройствах. На рисунке ниже как раз все это показано. И, кстати, когда будете заказывать разработку макета , то заранее нужно говорить дизайнеру, что верстка будет делаться под фреймворк Twitter Bootstrap 3, т.к. дизайнер сразу будет изображать элементы в соответствии с сеткой.
Большая ширина экранаСтили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше и равна 1200px. Из картинки видно, что контейнеры занимают все пространство ряда и делят его на три равные части. Выходит, 12 блоков нужно разделить на 3 контейнера (т.к. они все одинаковые), получаем, что в одном таком контейнере 4 блока.
Итог для большой ширины экрана:
Контейнер №1
Контейнер №2
Контейнер №3
Средняя ширина экранаСтили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше или равна 992px и меньше 1200px. Два контейнера расположены горизонтально и занимают ширину в 100% (каждый контейнер занимает 6 блоков), и один расположен с новой строки и также занимает 100% ширины (контейнер №12 занимает 12 блоков). Чтобы четко объяснить браузеру, что контейнер нужно разместить без обтекания к других контейнерам в twitter bootstrap предусмотрен css-класс class ="clearfix" . Но, еще один момент, т.к. этот класс должен распространяться на этот вид экранов нужно добавить еще один класс - class ="visible-md-block" (md – это название экрана, аналогично с классами для блока).
Итог для средней ширины экрана (будьте внимательны , я буду добавлять в уже написанный код новые классы и элементы):
Контейнер №1
Контейнер №2
Контейнер №3
Маленькая ширина экрана и «крошка-экран» По этому же принципу нужно добавить классы и для оставшихся экранов. Не буду расписывать одно и тоже, просто приведу общий итог:Контейнер №1
Контейнер №2
Контейнер №3
Для «крошка-экран» можно опустить css-класс class ="col-xs-12" , т.к. он занимает 100% ширины экрана автоматически и чтобы не загромождать код лишними символами можно их удалить.
Конечный код для этого шаблона будет выглядеть:
Контейнер №1
Контейнер №2
Контейнер №3
Разные элементы на разных экранах До этого я использовал класс class ="visible-md-block" – который отображается на средний экранах. Более подробно о класс "visible" :class ="visible-xs-*" | Этот класс добавляет видимости на «крошка-экран», ширина которого меньше 768px. Если экран больше – элемент не будет виден. |
class ="visible-sm-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), но меньше 992px. Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
class ="visible-md-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), но меньше 1200px. Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
class ="visible-lg-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
class ="visible-*-inline" | display :inline |
class ="visible-*-block" | Часть макета приобретает css-свойство display :block |
class ="visible-*-inline-block" | Часть макета приобретает css-свойство display :inline-block |
Для того, чтобы скрывать элементы предназначен класс class ="hidden"
class ="hidden-xs" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана меньше 768px. На других экранах части макета будут видны. |
class ="hidden-sm" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), и меньше 992px. На других экранах части макета будут видны. |
class ="hidden-md" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), и меньше 1200px. На других экранах части макета будут видны. |
class ="hidden-lg" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). На других экранах части макета будут видны. |
Так же можно одновременно применять к одному элементу несколько классов, например:
Этот элемент не будет отображаться на средних и больших пользовательских экранах
Разработчики Twitter Bootstrap 3 не забыли и про печать документов/веб-страниц и добавили несколько классов как раз предназначенных для этих целей:
Еще один пример Если у вас в одном ряде должен находиться элемент шириной в 6 блоков и по центру, то вам нужно указать смещение на 3 блока:...
...Приветствую всех гостей моего блога и гиков веб-разработки. Сегодняшняя публикация будет посвящена ознакомлению с таким востребованным фреймворком, как Bootstrap. Прочитав текущую статью, вы узнаете, для чего он был создан, как работать с bootstrap и как его устанавливать, какие инструменты предоставляет данный фреймворк и где его чаще всего применяют. Ну а теперь вперед разбирать новый материал!
Что же представляет из себя Bootstrap?Bootstrap – это фреймворк, разработанный специально для верстки фронтенда (внешнего интерфейса) веб-сервисов и приложений.
Он включает в себя стандартные шаблоны, состоящие для типографии, кнопок, форм, различных меню, в том числе и выпадающих меню, таблиц, модальных окон, навигации, слайдеров (обычных и в виде карусели) и других инструментов, и также всевозможные плагины на .
Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.
С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/ . Также с его помощью начиная со второй версии можно создавать отзывчивую верстку.
Несколько слов об историиСчитаю, что вам нужно знать немного истории создания описываемого инструмента, чтобы понимать, что к чему.
Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.
Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.
Наиболее заметной и востребованной на данный момент является Bootstrap 3 . В нем впервые была использована концепция mobile first . Помимо этого, было внедрено множество поправок и улучшений.
Какие плюсы использования Bootstrap?На самом деле, как и во всех технологиях, использование Бутстрапа ведет за собой как положительные аспекты, так и отрицательные. Поэтому никогда не пользуйтесь данным фреймворком бездумно. В одной из статей я подробно описывал преимущества и недостатки работы с Бутстрапом.
А сейчас я хочу обратить все ваше внимание на удобные готовые решения, которые предоставляет Bootstrap, и их положительные стороны.
Итак, при подключении описываемого фреймворка вам предоставляется возможность использовать такие готовые элементы, как:
- Всевозможные компоненты, в которые входят: панели навигации, выпадающие списки, кнопки, индикаторы процесса, разбиения на страницы и другие;
- JavaScript-плагины, среди которых есть переходы, модальные и выпадающие элементы, всплывающие блоки и подсказки, сворачивание, реализация вкладок, слайдеры и другие;
- Шаблоны сеток, в том числе и плавающих;
- Макеты;
- И конечно же реализация отзывчивого дизайна.
Стоит отдельное внимание уделить сеткам или как о них еще говорят верстке макетов. Сейчас будет небольшой спойлер, уж простите меня, ведь я решил посвятить данной теме отдельную статью, но ничего не поделать!
Благодаря данному инструменту Bootstrap очень часто используется для написания сайтов. Потому что это действительно грамотный и мощный механизм для блочной верстки. Создателями фреймворка было предусмотрено максимальное количество колонок – 12. Этого более чем достаточно для установки «каркаса» .
Помимо этого, в некоторых ситуациях использование Бутстрапа не только упрощает код, а и значительно экономит ваше время. При этом не стоит опасаться, что какие-то элементы не будут работать в проблемных браузерах (да-да, я намекаю на IE), потому что Bootstrap полностью совместим со .
Как подключить фреймворк?Существует несколько вариантов подключения данного инструмента. Пожалуй, начну с установки загрузочного файла.
Итак, на официальном сайте по ссылке , можно скачать текущие версии Bootstrap-а. Все очень просто. Просто выбираете подходящий для вас установочный пакет и нажимаете на кнопку «Download». На этом же сайте вы можете скачать альфа-версию Bootstrap 4.
Второй способ – это конечно же использование CDN. Так, чтобы подключить последние версии фреймворка, вам необходимо вставить вот такую ссылку:
Если вам нужно подключить уменьшенную версию JavaScript, то коперните вот эту строчку:
Ну а темы подключаются следующим образом:
На русифицированном веб-сайте можно посмотреть обучающее видео по подключению данного фреймворка (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/ ).
Вот и все, друзья, пришло время прощаться. Не забывайте делиться интересными публикациями с коллегами, а также подписываться на обновления моего блога. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 213 раз
2 голосаПриветствую вас на страницах блога start-luck. Удача начинается здесь. Если вы стремитесь как можно проще создать хороший грамотный сайт, но пока не совсем разбираетесь в программах, всех терминах и коде, то эта статья для вас.
Адаптивная верстка Bootstrap – как это все взаимосвязано? Зачем нужен фреймворк, что это вообще такое, чем он помогает и действительно ли упрощает жизнь. Также я расскажу как использовать программу по максимум не нанося вред будущему проекту, и где найти хорошие уроки. Ну что ж, начнем?
Немного о BootstrapЯ предполагаю, что не все мои читатели хорошо понимают, что такое фреймворк и уже успели скачать и разобраться во всем самостоятельно. Начну с информации именно для них. Недавно я писал про адаптивную верстку и назвал Bootstrap программой. Сделал я это для упрощения восприятия, хотя фреймворк совсем таковой не является.
Это набор приложений, скриптов или плагинов, если так можно выразиться, которые помогают проще создавать , специальные формы на сайте, карусели с изображениями, показывать сайт на мобильных или не делать этого и так далее.
Как вы, наверное, уже знаете, для каждого этого действия программист должен придумать и написать код. Если вы пользуетесь Bootstrap, то вам этого делать не обязательно. Вы просто берете готовый шаблон и меняете его по своему желанию. В итоге время на работу сокращается в разы.
Кроме ускорения к приоритетам этого фреймворка можно отнести еще и снижение требований к веб-мастеру. В идеале сайт создает человек, который очень хорошо разбирается в , JavaScript и может написать все самостоятельно. Если вы работаете с Bootstrap, то знания уже могут быть не столь глубокими. Базового уровня будет вполне достаточно.
ВозможностиПосмотреть на что способен Bootstrap 3 вы можете на сайте с русской документацией в разделах css, JavaScript и компоненты. После нажатия на нужную вкладку справа появляется очень удобное меню, которое позволяет перейти в нужное место документа.
На конкретных примерах здесь показано как выглядит часть кода, отвечающая за то или иное действие, а также результат. Вы можете настроить видимость контента для любых мобильных устройств. Разрешения и прочие настройки уже выполнены.
Сам же курс «Практика от А до Я » длится около 17 часов. За это время вы получаете важные теоретические знания, а затем отрабатываете на практике как использовать те или иные элементы правильно: какие элементы удалить из кода, что понадобится, чтобы сайт работал быстрее, что такое и многое другое.
Ну и еще один бонусный курс, ТОП-4 дополнения для Bootstrap, которые помогут фреймворку работать эффективнее.
Ну вот, кажется, и все. Подписывайтесь на рассылку и узнавайте больше о простых решениях сложных задач и верном подходе при работе с не совсем правильными продуктами.
На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.
Набор инструментов для изучения BootstrapМинимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:
- текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
- браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).
Создание веб-проекта, в основу дизайна которого положен фреймворк 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).
Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье .
Архив фреймворка 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 странице:
Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.
...
Подключение фреймворка Bootstrap 4 осуществляется так:
...
Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):
Скопировано
...
CDN Bootstrap 3.4.0:
Скопировано
Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.
Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });