Подключение и использование Bootstrap онлайн урок. Начало работы с Bootstrap Качаем и устанавливаем bootstrap signed

На этом уроке мы рассмотрим различные варианты, с помощью которых Вы можете установить платформу Twitter Bootstrap 3 в свой веб-проект. Кроме этого познакомимся с процессом сборки платформы Twitter Bootstrap 3 с помощью Grunt.

Устанавливать и управлять платформой Twitter Bootstrap 3 можно различными способами:

• вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. Данный способ является наиболее трудоёмким, так как Вам придётся выполнять все действия связанные с установкой и последующим обновлением платформы вручную.
• с помощью указания файлов, находящихся на серверах CDN. Данный способ имеет некоторые преимущества, перед предыдущим способом, а именно:
• уменьшает нагрузку на Ваш сервер, т.к. загрузка файлов происходит с CDN;
• увеличивает скорость загрузки веб-страницы, т.к. необходимые файлы берутся из кэша браузера. Это происходит только в том случае, если до этого (т.е. на других сайтах) эти файлы загружались аналогичным образом, т.е. из этого же CDN.

Bower - менеджер пакетов, который может использоваться для установки платформы Twitter Bootstrap 3 и сторонних библиотек, которые требуются для работы этой платформы. Он значительно упрощает установку этой платформы и избавляет веб-разработчика от выполнения многих рутинных операций, которые могут быть связаны: с посещением необходимых сайтов для скачивания с них архивов библиотек, с распаковкой этих архивов в директорию проекта, с обновлением версий библиотек и др.

Для установки bower необходимо ввести в "node.js" следующую команду:

Npm install -g bower

Перечень библиотек и файлов, которые необходимо загрузить, находится в файле bower.json. Кроме самих библиотек в этом файле, также содержатся и требования к версиям этих библиотек.

Для установки Twitter Bootstrap 3 Необходимо ввести следующую команду:

Bower install bootstrap

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

Для обновления библиотек достаточно просто ввести команду:

Bower update

Для вывода списка всех установленных пакетов можно воспользоваться командой:

Bower list

Менеджер пакетов npm , также как и Bower, может использоваться для установки платформы Twitter Bootstrap 3 и библиотек, которые требуются для работы данной платформы. Отличается npm от Bower подходом к установке необходимых библиотек. Если Bower загружает всё в одну специальную директорию, то npm раскладывает всё по отдельным директориям в зависимости от зависимостей пакетов (библиотек) между собой.

Для установки Twitter Bootstrap 3 с помощью npm необходимо ввести следующую команду:

Npm install bootstrap

Grunt (http://gruntjs.com) используется для процесса сборки платформы Twitter Bootstrap 3, который включает: компиляцию файлов LESS в CSS, минимизацию (сжатие) файлов CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.

Представляет собой Grunt npm-модуль в "node.js". Задачи, которые он выполняет, также осуществляются с помощью npm модулей.

Перед установкой Grunt Вам сначала необходимо скачать и установить "node.js" (http://nodejs.org/download/), который включает в себя менеджер пакетов npm (node package modules). Данный менеджер будет использоваться как для установки самого Grunt, так и для установки и управления различными модулями, с помощью которых он выполняет свои задачи через "node.js".

Порядок действий при установке Grunt в командной строке:

После завершения, вам будут доступны для запуска из командной строки различные команды Grunt.

grunt dist (компилирует и минимизирует файлы CSS и JavaScript). Эта команда выполняет создание готовых файлов платформы, которые после этого располагаются в папке dist . Т.е. данная команда заново создаёт директорию dist , выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто.

grunt watch (наблюдает за изменениями в less файлах). Данная команда используется для наблюдения за исходными файлами less и запускает задачу на автоматическую компиляцию их в CSS всякий раз, когда Вы сохраняете изменения в этих файлах.

Если у Вас возникли проблемы с установкой зависимостей или запуском команд Grunt, то первым делом удалите директорию /node_modules/ , созданную менеджером пакетов npm . После этого повторно запустить команду: npm install .

Как же установить bootstrap? Для начало нам нужно заполучить дистрибутив на официальном сайте бутсрап . На странице руководства будет предложено несколько вариантов установки:

Скачать версию production (конечный продукт который можно использовать ) и версию development ( содержит все исходники)

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

После того, как мы скачали нужный нам дистрибутив и распаковали его, в нашем случае это production версия, рассмотрим структуру приложения. И так у нас есть три каталога: css, js, и fonts.

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

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

bootstrap.css - это основной файл, в нем можно найти всё что делает bootstrap таким крутым и популярным css фреймвороком.

bootstrap-theme.css - это небольшая тема, которая переопределяет стили основного файла и добавляет новое отображение для некоторых компонентов (хорошей практикой считается не затрагивать исходный код библиотек и фреймворков, это позволит избежать массы проблем, если вдруг мы решим обновиться) так что bootstrap-theme.css можно использовать как хорошую базу.

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

Теперь можно приступить непосредственно к подключению файлов bootstrap. Создадим в корне нашего приложения index.html и зададим базовую разметку, добавив в неё наши файлы:

Bootstrap 101 Template Hello, world!

Перед закрывающимся тегом добавим стили: bootstrap.min.css и bootstrap-theme.min.css (важно! файл со стилями, который будет переопределять стили другого файла, нужно размещать последним, поэтому файл bootstrap-theme.min.css расположен именно в конце) .

Что касается скриптов: если вы заметили, добавлена библиотека jQuery, так как у bootstrap есть жесткая зависимость, и плагины просто не смогут функционировать. Порядок подключения будет следующим: jquery.min.js, bootstrap.min.js Почему именно в таком порядке? Все просто: плагины нуждаются в jquery, как машины в топливе, поэтому сначала нужно заправить авто. Последний нюанс, подключать скрипты лучше всего в конце документа, перед закрывающим тегом , чтобы браузер не тратил время на загрузку и выполнение, а быстро отрисовывал документ.

Вот собственно и все, осталось лишь наполнить сайт и добавить необходимые компоненты, для это используйте

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

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

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

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

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

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

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

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

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

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

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 3 состоит из подключения следующих файлов к HTML 5 странице:

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

...

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

...

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

Скопировано

...

CDN Bootstrap 3.4.1:

Скопировано

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

Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });

Начиная с этой статьи, мы начнем изучение фреймворка Twetter Bootstrap 3, наиболее часто используемого для создания сайтов, админ панелей, лендингов и веб приложений, так как он обеспечивает простоту в разработке, понятную структура и адаптивность страниц.

Для использования средств и методов Bootstrap 3 необходимо перейти по адресу http://getbootstrap.com и скачать архив с папаками css, fonts, js и с соответствующими файлами внутри них.

Если вы не знаете как подключить стили CSS и js скрипты, рекомендую посмотреть эту и эту статью, а в нашем случае стили CSS подключаются в секции

а скрипты перед закрывающим тегом

Также хочется отметить, что использование файлов bootstrap.min.css и bootstrap.min.js принесет пользу вашему сайту, так как эти файлы имеют меньший размер и положительно скажется на скорости загрузки.

Подключение fonts шрифтов можно выполнить двумя способами:

Второй вариант предпочтительней, но какой бы способ вы не выбрали, подключение будет происходить так

@font-face{ font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings-regular.ttf); } h2{ font-family: glyphicons-halflings-regular,sans-serif; }

вернее в теге style для первого способа, а весь текст внутри него вставляем в файл css - для второго.

Для номальной работы Bootstrap 3 понадобится дополнительно скачать с официального сайта jquery.com файл библиотеки jquery по ссылке и поместить в папку js вашего сайта.

Подключение jquery происходит перед закрывающим тегом

Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.

так как jquery должен загружаться раньше, чем bootstrap.

Основой Bootstrap является набор классов, на которых строится 12-ти колоночная сетка (col-) . В переделах сетки поддерживаются 5 типов экранов -xs- -sm- -md- -lg- -xl-.

• -xs- размер экрана менее 575px;
• -sm- размер экрана более 576px и не более 767 px;
• -md- размер экрана более 768px и не более 991 px;
• -lg- размер экрана более 992px и не более 1199 px;
• -xl- размер экрана более 1200px;

Таким образом, div с классом col-lg-12 означает, что на экране с большим размером div колонка будет занимать 12 столбцов или 100% по ширине, аналогично div col-sm-6 на экране смартфона займет 6 столбцов или 50% по ширине.

Основными типами контейнеров для сетки являются классы container и container-fluid.

При использовании внутри container ваша сетка визуально будет занимать треть экрана по центру, все 12 столбцов будут расположены в этой области.

Поместив сетку в класс container-fluid все элементы верстки будут расположены по всему экрану, как резиновый и при уменьшении по ширине будут сдвигаться друг к другу.

Какой то конкретной рекомендации по использованию container и container-fluid нет, так как все зависит от макета дизийна и назначения верстки, впрочем, для админ панели сайта уместно применять container-fluid, а для сайта container.

Кроме того, класс -fluid можно применить не только к классу container, но и к строке row, для расположения элементов в ряд. Однако если вы поместите row-fluid в обычный container, то разницы не заметите. Подобную комбинацию лучше всего использовать вне div.container, например так:

Привет, я шаблон Bootstrap 3

Мой контейнер не fluid!

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

Заголовок 1 Заголовок 2 Заголовок 3

Если уменьшать размер страницы браузера, заголовки выстроятся в вертикальный список из горизонтальной строки.

В системе верстки Bootstrap 3 предусмотрены дополнительные классы для отображения или скрытия элементов на различных устройствах и экранах. Обозначаются они как visible-*-* и hidden-*.

Класс для отображения visible-*-* после первого тире обычно идет идентификатор типа экрана (xs,sm,md,lg,xl), а после второго тире размер столбца(1-12). Например, visible-lg-6 - элемент виден на большом экране, ширина 6 столбцов.

Класс для скрытия hidden-* после тире идет идентификатор типа экрана (xs,sm,md,lg,xl), например, элемент разметки с классом hidden-xs не будет виден на маленьких устройствах(размер экрана менее 575px).

Комбинирование этих элементов позволит отображать или скрывать div контейнеры:

Заголовок 1 Заголовок 2

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

Так же в div контейнере в class указать show или hidden, но в этом случае свойства отображения не будут меняться при смене экрана: если виден, то виден, если скрыть, то только удаление слова hidden из класс позволит увидеть нужный элемент.

Для того, чтобы использовать CSS медиа запросы, в css файле нужно указать специальных символ @media и в скобочках минимальную или/и максимальную ширину экрана. Если в обычной css разметке необходимо писать размеры экрана в пикселях, в bootstrap 3 можно писать такую конструкцию:

@media(min-width: @screen-sm-min){ ... } @media(min-width: @screen-md-min){ ... } @media(min-width: @screen-lg-min){ ... }

Еще один интересные классы, позволяющие выполнять смещение блоков внутри контейнера, класс push сдвинет элемент вправо, а класс pull влево.

При комбинации из в соседних контейнерах, можно менять порядок последних при изменении размеров экрана. В данном примере на большом экране(-lg-) Заголовок 2 расположен слева, а Заголовок 1 справа, при уменьшении ширины экрана до средних размеров(-md-) произойдет смещение элементов и порядок станет последовательным.

Заголовок 1 Заголовок 2

На этом первое знакомство с системой верстки Bootstrap 3 позвольте завершить, вы узнали как установить стили и скрипты шаблона, основные элементы сетки, медиа запросов, типы контейнеров, и т.д. В следующих статьях рассмотрим вспомогательные и дополнительные элементы: меню, кнопки, слайдеры, иконки и многое другое.

Здравствуйте, уважаемые читатели блога сайт. Это первая статья в рамках новой рубрики «Bootstrap». ? Это популярный фреймворк, который позволяет быстро и качественно создавать статичные веб-сайты и веб-приложения. По сути, это бесплатный набор инструментов, позволяющий использовать Html, CSS и JavaScript «крупными мазками».

При этом можно работать с обычным статическим Html с помощью возможностей Бутстрипа, а можно попробовать, например, создать с помощью него уникальный шаблон для своего сайта, работающего на CMS (чуть позже мы поговорим про создание шаблонов для Joomla 3 на основе Bootstrap). При этом каких-то особых знаний Html и CSS от вас не потребуется.

Сейчас вам предлагают скачать Bootstrap 3 , который имеет ряд отличий от предыдущих версий:

В Бутстрапе 3 имеется только одна сеточная система — отзывчивая (раньше было две: отзывчивая и адаптивная. Но ее функционал был существенно расширен за счет большего числа сеток разного размера.

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

Сейчас не достаточно просто иметь сайт, который будет отлично смотреться и функционировать только на больших экранах. Нужно, чтобы он не терял своих качеств и на экранах различных планшетов и смартфонов. Создавать для этих целей отдельный сайт для мобильных дивайсов не будет лучшей идеей (сложность синхронизации информации, сложность узнавания и т.п.).

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

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

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

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

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

Этот фреймворк позволяет простым добавление классов (читайте про ) к элементам Html кода применять к ним очень эффектное оформление . Например, вот так будет выглядеть ваша класса «table table-hover»:

Стили для этого класса прописывать не нужно, ибо они уже прописаны в файлах стилей самого Бутстрапа. Очень удобно и быстро. А так, например, можно в два счета создавать кнопки из обычных или при помощи тегов button, добавляя к ним нужные классы:

Так же можно с помощью классов очень легко создавать на основе тегов Html списков различные меню (элементы навигации), выпадающие списки, пагинацию (нумерацию страниц), всплывающие окна, а так же подсказки и многое другое, что вы можете на этой странице официального сайта:

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

Итак, скачать фреймворк Bootstrap 3 можно будет на официальном сайте — GetBootstrap.com (есть и неофициальное русское зеркало mybootstrap.ru , где можно найти подробное введение в работу с этим фреймворком).

Сразу оговорюсь, что на вкладке «Customize» (в русской версии это «Изменить и скачать») вы можете выбрать, какие именно компоненты и jQuery плагины вам нужны, а также поменять переменные, отвечающие за цвета, шрифты, формы и т.п. вещи. Потом все это можно сохранить и скачать Bootstrap с помощью расположенной внизу кнопки.

Однако, лучшим вариантом, на мой взгляд, будет разобраться в работе этого фреймворка и менять какие-то параметры по ходу работы. Тем более, что мы начинаем изучение с чистого листа, а значит нам понадобится все, что в Бутстрипе есть. Поэтому просто переходим на страницу загрузки стандартного пакета (вкладка «Getting started») и нажимаем на кнопку:

После распаковки архива вы обнаружите в нем три папки: css, fonts и js. И это все, что вам нужно для работы с этим фреймворком. Хотя нет, еще вам понадобится (лично я использую Нотепад++, но у него достаточно много достойных конкурентов, не говоря уже об ).

Давайте посмотрим, . Сейчас там шесть файлов, хотя еще совсем недавно было четыре. На самом деле, это два набора по три файла в каждом. Например, файл bootstrap.css и bootstrap.min.css содержат один и тот же CSS код, но отличаются тем, что код в файле bootstrap.css легко читаем, ибо отформатирован соответствующим образом:

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

Таким образом файл bootstrap.min.css становится на четверть легче файла bootstrap.css без потери функционала. Ну, а файл bootstrap.css.map появился в дистрибутиве Bootstrap 3 совсем недавно. Насколько мне позволяет понять его назначение мой куцый мозг — он позволяет в инструментах для разработчиков (например, встроенных в браузеры Хром или Файерфокс) работать со сжатым CSS кодом так, как будто бы он не был сжат. В общем мутная вещь, которую я пока еще не постиг.

Тоже самое можно сказать и про файлы. Во второй версии Бутстрипа их не было. Дело в том, что Bootstrap 3 идет с так называемым «плоским дизайном» (никаких градиентов, теней и т.п.). Поэтому сюда добавили собственную тему в качестве дополнительных таблиц стилей, которую можно будет подключить отдельно и добавить дополнительных элементов на свой сайт.

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

находятся два джава-скрипт файла bootstrap.js и bootstrap.min.js, которые отличаются только тем, что из последнего удалены все пробелы и переносы строк, из-за чего его код стал практически не читаемый с точки зрения человека, но ничуть не потерял с точки зрения браузера (машины). Ну и, естественно, стал легче. Кроме этого файлика нам при работе с Бутстрапом, скорее всего, придется использовать еще несколько js файликов, но об этом позже.

Вот мы и обозрели все файлы, идущие в комплекте с этим фреймворком. Теперь можно начинать его использовать для создания первой Html странички, чтобы понять всю прелесть данного процесса. Давайте для примера возьмем обычный пустой веб-документ с базовой разметкой (так называемую «рыбу»).

Заголовок страницы

Надеюсь, с этой структурой вы уже сталкивались и понимаете, что помогает браузеру понять, как интерпретировать записанный ниже код, а теги head и body формируют, соответственно, служебную «голову» (то, что не выводится на вебстранице) и «тело» (то, что непосредственно будет отображаться на странице).

Просто скопируйте в новый файлик, созданный в вашем Html редакторе, следующий код, и сохраните полученный результат в папку с Bootstrap 3 с расширение Html и названием index.html . Т.е. он должен лежать на том же уровне, что и папки css, fonts и js:

Теперь в «рыбу» под названием index.html добавьте следующий мета-тег (между тегами head, например, в районе meta charset):

Мета-тег viewport обычно всегда включают при работе с отзывчивым дизайном. Зачем он нужен? Чтобы правильно масштабировать экран. В этом случае не важно будет, с какого именно устройства на ваш сайт зашел пользователь (с большим экраном или маленьким) — вебстраница будет менять размер в зависимости от девайса.

После этого нужно будет из арсенала Bootstrap с помощью тега с указанием в ней до файла (у него размер меньше).

Кроме имеющегося в дистрибутиве Бутстрапа файлика стилей мы создадим еще один с нашими собственными стилями, подключение которого можно будет сразу же и прописать в «шапке» index.html.

Ну и, собственно, стоит создать пустой файлик manual.css и скопировать его в папку CSS нашего фреймворка.

В результате примерно так:

Заголовок страницы

Теперь можно приступать к подключению к нашему вебдокументу джава-скрипт файлов. Они нам нужны, чтобы файл index.html работал с Bootstrap 3. Одним из этих файлов будет js из самого фреймворка, а другим — библиотека jQuery . Давайте начнем с нее. В своем роде это тоже фреймворк, который используют повсеместно (в CMS, фреймворках отзывчивого дизайна и многих сайтах интернета).

Подключить библиотеку jQuery к нашему Html документу можно двумя способами — либо загрузить библиотеку к себе и сослаться на нее, либо использовать сеть доставки библиотеки jQuery (CDN). В первом случае вы получаете гарантию, что пока ваш сайт работает данная библиотека всегда будет подгружена (вы не зависите от внешних источников, которые теоретически могут стать на время недоступными).

Преимущество же подключения jQuery через сеть CDN состоит в том, что у пользователя в кеше браузера уже может храниться файл этой библиотеки. Т.к. jQuery весит очень даже прилично, то это позволит вашему проекту открываться значительно быстрее в браузерах таких пользователей. Сеть доставки библиотеки редко бывает в оффлайне, поэтому вероятность возникновения неприятностей из-за использования способа подключения через CDN крайне низка.

Как все это реализовать на практике? Перейдите на официальную страницу библиотеки jQuery — jquery.com . Итак, если вы хотите скачать эту библиотеку, то кликните по большой кнопке в правой части экрана.

У jQuery есть две версии — 1.x и 2.x. Исходя из поддерживаемых браузеров сейчас, наверное, лучше все же использовать первую версию (она поддерживает IE 8, который все еще довольно часто встречается на компьютерах пользователей сети).

Код вызова джава-скрипт файлов принято вставлять между тегами head. Но это не совсем правильно. Лучше вызов скриптов делать перед закрывающим тегом body . Почему? Дело в том, что, например, вызов файлов стилевой разметки необходимо сделать еще до или одновременно с загрузкой контента, чтобы он правильно отображался. А вот JS файлы отвечают за функциональность страницы, а не за ее внешний вид. Значит до полной загрузки документа этот функционал нам не понадобится, поэтому и нет никакой необходимости пихать вызов джава-скрипт файлов между тегами Head.

Если же вызов JS все-таки вставить в «голову», то придется ждать полной их загрузки, чтобы увидеть страницу. Сложится ощущение медленной загрузки сайта, а это серьезно снижает привлекательность его у посетителей. А вот если вызов jQuery вставить в самом низу документа (перед закрывающим тегом Body), то вся остальная информация загрузится до этой библиотеки. Сложится ощущение более быстрого и отзывчивого сайта.

Универсальный код вызова jQuery (без загрузки этой библиотеки к себе на сервер) с использованием описанной выше сети доставки библиотеки jQuery (CDN) будет выглядеть так:

Чтобы отличать этот код от остального кода, который будет жить внутри тегов Body, можете добавить директиву с поясняющей надписью. Например, так:

Ну, а также нам нужно будет (лучше тот, в котором код сжат с целью уменьшения размера, т.е. со словом min в названии). Будет это дело выглядеть так:

Наверное, понятно, что если вы захотите библиотеку jQuery загружать со своего сервера, то ее нужно будет скачать, поместить в папку JS и прописать для нее точно такой же код вызова, что и для bootstrap.min.js. Но все же советую брать ее из CDN, как было показано чуть выше.

Учтите, что код вызова bootstrap.min.js нужно будет ставить после вызова jQuery, ибо он зависит от этой библиотеки и она обязательно должна загружаться раньше его.

Так, еще нам осталось подключить respond.js . Что это такое? Это скрипт, разработанный для того, чтобы помочь старым версиям Интернет Эксплорера понять Html 5 и решить другие проблемы совместимости с этим «странным» браузером. Скачать этот файлик можно — там опять же есть сжатая и обычная (читаемая глазами) версии.

Просто кликните по respond.min.js и в открывшемся окне скопируйте его код. Сделать это, правда, не так-то просто, ибо он представляет из себя одну длиннющую строку. На мой взгляд, проще будет нажать на кнопку «Raw». В этом случае откроется страница только с кодом файла respond.min.js, который легко можно будет выделить и скопировать, нажав Ctrl+A на клавиатуре:

Помещенный в буфер обмена код нужно вставить в новый файл вашего Html редактора (у меня это Нотепад с двумя плюсиками) и сохранить с названием respond.min.js в папку JS из состава Bootstrap 3.

В файле index.html подключение respond.min.js будет выглядеть как обычно:

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

В результате итоговый файл index.html в папке Bootstrap 3 будет выглядеть примерно так:

Заголовок страницы

Теперь у нас есть все для построения сайта на Бутстрап. У нас есть все нужные джава-скрипты и стили, которые мы подключили. Можно приступать к построению сайта.

Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)

А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного).

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Сеточная система в Bootstrap 3 и пример работы с ней