Bootstrap 3 - Начало работы

На этом уроке Вы научитесь подключать платформу Twitter Bootstrap 3 к сайту, а также узнаете, из каких файлов она состоит.

Для изучения платформы Twitter Bootstrap необходимо иметь:

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

Платформа Twitter Bootstrap 3 поставляется в двух вариантах доступных для загрузки:

  • скомпилированная и минимизированная версия;
  • версия с исходными кодами.

Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта.

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

Перейти на сайт проекта Twitter Bootstrap Скачать Bootstrap 3.3.7

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

Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне.

После загрузки, предварительно скомпилированной и минимизированной версии Bootstrap 3 на компьютер, ее необходимо распаковать с помощью любого архиватора в каталог вашего веб-проекта.

Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов ("CSS", "FONTS" и "JS") и файлов.

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

Файлы платформы представлены в 2 видах:

  • 1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css, bootstrap-theme.css, bootstrap.js)
  • 2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js)

2 вид файлов более предпочтительно использовать для сайта, так как они содержат точно такой же код, как и файлы 1 вида, но в сжатом состоянии. Следовательно, сайты, которые используют 2 вид файлов платформы Twitter Bootstrap 3, загружаются быстрее.

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

Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery.

Итак, мы рассмотрели структуру и назначение файлов платформы Twitter Bootstrap 3. Теперь пришло время подключить данную платформу с помощью скомпилированных и минимизированных файлов к веб-странице. Рассмотрим этот процесс пошагово. В результате наших действий мы хотим получить веб-страницу на HTML 5, к которой подключена платформа Twitter Bootstrap 3. Для демонстрации того что платформа работает, создадим в данной веб-странице кнопку, при нажатии на которую будет показываться всплывающая панель с сообщением.

Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html. Наберите или вставьте в текстовый редактор, следующий код:

<!DOCTYPE html>
<html lang="ru">
  <!-- Заголовок веб-страницы -->
  <head>
    <!-- Кодировка веб-страницы -->
    <meta charset="utf-8">
    <!-- Предназначен для управления режимом отображением веб-страницы в браузерах Internet Explorer --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Включает масштабирование на мобильных устройствах -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Текст заголовка веб-страницы -->
    <title>Basic Bootstrap Template</title>      
  </head>
  <!-- Тело веб-страницы -->
  <body>
    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок всплывающей панели" data-content="Основной текст всплывающей панели">Нажмите на кнопку</button>
  </body>
</html>

Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее:

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

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap Template</title>      
    <!-- 1. Подключаем скомпилированный и минимизированный файл CSS Bootstrap 3 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок всплывающей панели" data-content="Основной текст всплывающей панели">Нажмите на кнопку</button>
    <!-- 2. Подключаем библиотеку jQuery, необходимую для работы скриптов Bootstrap 3 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 3. Подключаем скомпилированный и минимизированный файл JavaScript платформы Bootstrap 3 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Дополнительный сценарий на языке JavaScript, предназначенный для инициализации компонента Bootstrap "Popovers" -->
    <script>
      $(function () {
        $('[data-toggle="popover"]').popover()
      })
    </script>
</body>
</html>

После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: "index.html"). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap "Popovers".

Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть "html". Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением "txt".

Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3:

Структура папок проекта в основу которого положена платформа Twitter Bootstrap 3

Демонстрация работы компонента Bootstrap "Popovers":

Веб-страница, к которой подключена платформа Bootstrap 3

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



   Bootstrap 0    25464 0

Комментарии (23)

  1. Дамир # 0
    Привет, приотличный сайт!
    В новых версиях у bootstrap появился третий файл js (npm.js) для чего он нужен?
    Можешь немного рассказать про grunt и bower для чего нужно и как ими пользоваться?
    Спасибо!
    1. Александр Мальцев # 0
      Привет, Дамир!
      Спасибо, обязательно расскажу про nmp.js, grunt и bower, но в виде отдельной статьи.
    2. Дамир # 0
      круто буду ждать :)
      1. Александр Мальцев # 0
        Как и обещал отдельная статья про способы установки платформы и её сборку с помощью Grunt:
        Установка и сборка платформы Twitter Bootstrap 3
      2. Кирилл # 0
        Добрый день. возможно ли каким то образом определять элементы для которых будет применяться ТОЛЬКО bootstrap.min.css
        Что бы не использовался основной стиль в style.css ТОЛЬКО для выбранных\заданых элементов.

        1. Александр Мальцев # 0
          Добрый день.
          В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap.

          Для того чтобы знать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка «Лупа» -> изучаем содержимое правой панели.

          Просмотр стилей, которые накладываются на элемент
          1. Кирилл # 0
            Спасибо, в том и проблема. Не хочется каждый раз пересматривать что использует какой стиль.
            1. Кирилл # 0
              Может можно оборачивать все в class или id например bootstrap
              1. Александр Мальцев # 0
                Зачем такие трудности, HTML-элементы не будут иметь оформление пока Вы к ним не добавите классы платформы Twitter Bootstrap 3. Например: элемент div () — без оформления, div с классами alert и alert-danger — это элемент, к которому применяются стили Bootstrap в соответствии с этими классами.

                Т.е. элемент не будет иметь оформление Bootstrap без Вашего ведома.

                P.S. Без вашего ведома применяются только некоторые общие стили Bootstrap, которые никакого особого оформления не несут.
          2. Кирилл # 0
            Зачастую разработчики в своих style.css (в WordPress) использую элементы bootstrap c таким же названиями.
            1. Евгений # 0
              Здравствуйте!

              Начал знакомиться с bootstrap 3.3.5
              Пока на базе подключения

              Возникли вопросы:
              1. Почему Вы js подключаете в body, а не в header
              2. Расскажите подробно, как подключить свой css файл (и переопределять файлы bootstrap.css)
              Чтобы при выходе новой версии — обновить без проблем
              3. Распишите подробно пожалуйста о файле bootstrap-theme.css (для чего он нужен, как его подключить и как его использовать)
              4. шрифты как Вы подключаете?

              Я подключил так:
              1. css
              @font-face {
              font-family: 'Glyphicons Halflings';
              src: url('../fonts/glyphicons-halflings-regular.eot');
              src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
              url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
              url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
              url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
              font-weight: normal;
              font-style: normal;
              }
              2. css
              .glyphicon {
              font-family: 'Glyphicons Halflings';
              }
              3. html
              Текст

              На сколько верно это?

              Заранее большое спасибо за развернутые ответы!
              1. Александр Мальцев # 0
                Здравствуйте, Евгений!
                1. В разделе head правильно подключать только те вещи, которые нужны для загрузки самой страницы. Например, стили CSS. А файл bootstrap.min.js для отображения самой страницы не нужен и его желательно помещать в самый конец. Таким образом, пользователь быстрее сможет увидеть Вашу страницу, т.к. скрипты будут грузиться не перед ней, а после неё.
                Давайте по другому… Скрипты обычно выполняют некоторое действия над страницей. А чтобы это осуществить необходимо чтобы страница (DOM-дерево) была загружена. Поэтому нет смысла помещать скрипты в раздел head, когда ещё страница не загружена и мы не можем обратиться к её элементам. Т.е. правильно размещать их перед закрывающем тегом body, т.е. после всей страницы.
                При этом необходимо обратить внимание на очерёдность их подключения: jQuery -> Bootstrap -> Ваши скрипты.
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <!-- Ваши скрипты -->
                <script src="js/my.js"></script>
                
                2. Свой файл CSS необходимо подключать после файла bootstrap.min.css. Это необходимо сделать для того чтобы стили в вашем файле CSS переопределяли Bootstrap. Вот и всё. В некоторых случаях если Ваши стили не применяются, то добавьте к значению !important, для того чтобы указать что это значение более важное чем другие.
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/my.css" rel="stylesheet">
                
                3. Я про него уже где-то писал… Этот файл (bootstrap-theme.css) просто содержит некоторые дополнительные эффекты для компонентов. Его необходимо подключить после основного файла со стилями CSS. После этого работа нескольких компонентов будет сопровождаться эффектами (анимацией). Если Вам эти эффекты нужны, то подключайте данный файл, т.к. больше он не на что не влияет.
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/bootstrap-theme.min.css.css" rel="stylesheet">
                <link href="css/my.css" rel="stylesheet">
                
                4. Иконочные шрифты (glyphicons-halflings) подключать не надо, они и так уже подключены в файле bootstrap.min.css.
                1. Евгений # 0
                  Здравствуйте Александр

                  1.
                  В конец body это классно (в cms работает), но вот в html на компьютере не работает
                  Проверял так:

                  И не пойму, почему он не верно обрабатывает.
                  Есть ли у Вас решение — проверка подлючен js, jQuery, bootstrap

                  2.
                  Тут нужно подробнее, у меня вообще конфликт 2 файлов css
                  В конце пропали шрифты

                  3.
                  Можно ссылку, где подробно расписано

                  4.
                  подробный метод как их использовать? и в своем css изменять цвет и т.д.

                  А с Вами можно связаться по почте (или по скайпу-чат) чтобы передать (заготовку)
                  а Вы сказали, что там не верно… при желания, когда все вопросы разберем, может выпустите статью: Начало 2 (или подключение)

                  Заранее большое спасибо
                  1. Александр Мальцев # 0
                    Здравствуйте, Евгений.
                    1. Скорее всего Вы неправильно указываете пути к файлам. Проверить очень легко, клавиша F12 в браузере (инструменты разработчика). Там есть всё что нужно.
                    2. Что тут можно сказать, Вы что-то неверно прописали в своём файле.
                    Тут всё очень просто. Допустим Вы хотите изменить значение color класса Bootstrap .text-success на красный (red). Открываете свой файл css и прописываете туда:
                    .text-success {
                      color: #ff0000;
                    }
                    
                    3. Там было примерно написано тоже самое, что я и Вам написал. А про него рассказывать то и больше нечего. Просто его подключаете и у Вас некоторые компоненты получают анимацию автоматически. Какие-то задавать явные классы не надо. Просто его подключаете и компоненты Bootstrap типа кнопок, меню, выпадающих списков и многих других получают анимацию или какие-то эффекты.
                    4. Для этого необходимо использовать пустой элемент span или i, к которому необходимо добавить классы. Первый класс glyphicon (он указывает что необходимо использовать шрифт — font-family: 'Glyphicons Halflings'), второй класс за саму иконку (например, звёздочка: glyphicon-star)
                    //эта строчка отобразит звёздочку из шрифта Glyphicons Halflings
                    <span class="glyphicon glyphicon-star"></span>
                    
                    Т.к. это шрифт, то и стили для него как для текста:
                    //большая звёздочка (40px) красного цвета
                    <span class="glyphicon glyphicon-star" style="font-size:40px; color:#ff0000"></span>
                    
                    Если честно как-то не хочется разбираться в чужом коде. Попробуй сначала сам разобраться что у тебя там не получается… Т.к. если Вы найдёте свою ошибку, то в следующий раз её не допустите.
              2. Ануш # 0
                Здравствуйте! Спасибо вам за труд — с помощью вашего сайта я научилась верстать :). У меня 2 вопросы:
                1. Чтобы ускорить скорость загрузки сайта, можно в файле bootstrap.min.css оставить только те стили, которые использую? А остальные удалить?
                2. Обязательно подключить шрифты, если я не использую?
                1. Александр Мальцев # 0
                  Спасибо, Ануш.
                  Да, это очень важный этап, но он необходим только для «боевого» сайта.
                  Наиболее просто это сделать на странице getbootstrap.com/customize/.
                  Данная вещь специально предназначена для создания сборки, в которую будут входить только необходимые стили и скрипты.
                  Для этого в разделе Less files и jQuery plugins оставляем включёнными только необходимые вещи.
                  Создание сборки Bootstrap, в которую будут входить только необходимое

                  Например, если Вам не нужны шрифты, то отключаем Glyphicons. Так проделываем со всем что Вам не нужно…

                  После этого переходим в конец страницы и нажимаем на кнопку «Compile and Download». Получаем сборку платформы Twitter Bootstrap 3 и подключаем её (или заменяем существующие файлы). Размеры файлов Вас приятно удивят :) Т.е. ни чего в ручную делать не надо. Обо всё за Вас уже позаботились разработчики…
                  После этого Ваш сайт должен более быстро загружаться…
                  1. Ануш # 0
                    Огромное спасибо) Потому что оптимизация картинок, подключение кэш и т.п так и не дали ожидаемый результат. Осталось оптимизировать код, но как, не знала...Bootstrap для меня ПОКА темный лес. Спасибо :)
                2. Игорь Денисов # 0
                  Доброго времени суток!
                  У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить jquery-ui.js, никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет?
                  Заранее спасибо за ответ!
                  1. Александр Мальцев # 0
                    Здравствуйте, Игорь.
                    Да, т.к. некоторые компоненты jQuery UI имеют такие же названия, что и компоненты Bootstrap. Например, tooltip и button.
                    Чтобы этого избежать, можно, например, сделать так:
                    <!-- Подключаем jQuery UI -->
                    <script src="jqueryui.js"></script>
                    <!-- Изменяем имена плагинов jQuery UI для того чтобы они не совпадали с Bootstrap -->
                    <script>
                    $.widget.bridge('uitooltip', $.ui.tooltip);
                    $.widget.bridge('uibutton', $.ui.button);
                    </script>
                    <!-- Подключаем Bootstrap -->
                    <script src="bootstrap.min.js"></script>
                    
                    1. Игорь Денисов # 0
                      Спасибо за ответ! Буду знать и в будущем применять.
                      1. Игорь Денисов # 0
                        И, кстати, это единственные два компонента или еще есть совпадающие?
                        1. Александр Мальцев # 0
                          Нет, только этих два.
                          К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты.
                          1. Игорь Денисов # 0
                            Да, спасибо!
                            Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать…
                            Спасибо Вам за отзывчивость. Очень полезный сайт.

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