Фреймворк Bootstrap - Начало

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

CSS фреймворк Twitter Bootstrap 4

Twitter Bootstrap - это открытый и бесплатный CSS фреймворк, который используется для быстрого создания современных дизайнов сайтов. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Twitter Bootstrap является самым популярным. Основное назначение данной платформы – это разработка адаптивных интерфейсов веб-страниц (веб-сайтов) посредством складывания его из "готовых" блоков. Под "готовыми" блоками Bootstrap понимаются завершённые куски HTML кода (компоненты), классы CSS и плагины jQuery (динамические компоненты). Это означает то, что не надо иметь хорошее знание языка разметки HTML, таблиц стилей CSS и языка сценариев JavaScript с jQuery, для того чтобы вам приступить к проектированию макета сайта. Достаточно просто найти необходимый компонент и встроить его в определённое место на странице. Это основный принцип использование CSS фреймворка Bootstrap.

Элементы (кирпичики) Bootstrap

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

  • блоки для создания адаптивной сетки (проектирование сетки осуществляется с помощью блоков div и специальных классов Bootstrap);
  • классы CSS (используются для придания элементам определённого оформления);
  • компоненты (готовые блоки интерфейса: меню, хлебные крошки, пагинация, модальное окно, карусель и др.).

Начало работы с Bootstrap

Многие начинающие разработчики задаются вопросом: "Как начать работать с Bootstrap?". На самом деле создавать макеты страниц с помощью Bootstrap очень просто. Первое что вам необходимо - это скачать и подключить Bootstrap к странице. Как это выполнить рассмотрено на уроке Установка платформы Bootstrap. Следующий шаг - это создание сетки. Этот этап является наиболее сложным, особенно для тех, кто первый раз начинает использовать фреймворк Bootstrap. Поэтому на данном этапе стоит остановиться более подробно и разобраться с тем как она (сетка) работает. Понять основные принципы работы с сеткой вам поможет урок Сетка Bootstrap. Заключительный этап - это наполнение ячеек сетки различными HTML элементами и компонентами Bootstrap. Это основные шаги по созданию сайта на Bootstrap с нуля.

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

Если взглянуть на платформу с другой стороны, то можно обнаружить что она состоит из CSS файла (bootstrap.css), плагина JavaScript (bootstrap.js) и каталога fonts, в котором расположены иконки в формате шрифта.

Теперь перейдём к рассмотрению основных преимуществ Bootstrap.

Если вы всё ещё находитесь в некотором сомнении, стоит или нет использовать Bootstrap для разработки дизайна сайта, то прочитайте их и попробуйте определиться со своим выбором.

Преимущества Bootstrap

Использование фреймворка Bootstrap предоставляет веб-разработчикам следующие преимущества:

  • Быстрое создание адаптивных интерфейсов (высокая скорость и качество (для начинающих) разработки front-end составляющей сайта по сравнению с её созданием на "чистом" CSS и JavaScript). Осуществляется это посредством применения блоков сетки, классов CSS и компонентов Bootstrap.
  • Стильный дизайн. HTML элементы, оформленные посредством CSS классов, и компоненты в Bootstrap имеют единый дизайн. Это означает то, что страница будет выглядеть в браузере привлекательно и стильно.
  • Не требует хороших (глубоких) знаний технологий HTML, CSS, языка JavaScript и библиотеки jQuery. Другими словами, вам необходимо иметь только базовые знания этих технологий. Это связано с тем, что ваша задача в основном будет сводиться только в копировании и настройки готовых кусков HTML кода Bootstrap. Понимание скриптового языка JavaScript и библиотеки jQuery, написанной на этом языке, может не потребоваться, т.к. настройку компонентов в Bootstrap можно осуществить с помощью атрибутов data.
  • Кроссбраузерность и кроссплатформенность. Данный фреймворк работает и адаптирован для всех популярных операционных систем и браузеров (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera), работающих в этих системах.
  • Открытость и бесплатность фреймворка. Платформа Bootstrap – это проект с открытым исходным кодом, доступным на github. Она имеет лицензию MIT, которая означает то, что данный фреймворк можно применять бесплатно как для личного, так и для коммерческого использования.

Необходимо отметить, что в старых версиях браузера Internet Explorer 6 – 8 некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии не поддерживают свойства CSS3, посредством которых это реализовано в фреймворке.

Кроме этого Bootstrap 4 вообще не поддерживает браузер Internet Explorer версии 8 и ниже. Если вам все ещё нужна поддержка старых браузеров, то в этом случае вам стоит использовать Bootstrap 3.


Следующий урок: Подключение CSS фреймворка Bootstrap к странице.



   Bootstrap 0    20711 0

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

  1. Лора # 0
    Поломались ссылки на странице?

    "… Как это выполнить рассмотрено на уроке Установка платформы Bootstrap"
    у данной ссылки идет адрес itchief.ru/[[~20]]

    и не ведет на страницу с заголовком об установке (

    под статьей
    "… Следующий урок: Подключение CSS фреймворка Bootstrap к странице."

    та же проблема (
    1. Александр Мальцев # 0
      Спасибо, поправил.
      1. Лора # 0
        Александр, огромное спасибо за труд. Отличный сайт, максимальная информация!

        Позвольте общий вопрос, как гуру.

        Что предпочтительнее с точки зрения поддержки последующей и доработок
        а) Настроить под себя и скачать bootstrap
        б) скачать не трогая и подключить свой файл со стилями, где отредактировать или дописать стили под дизайн?

        Заранее спасибо за ответ
        1. Александр Мальцев # 0
          Спасибо.
          Из вариантов с CSS:
          1 вариант лучше, т.к. объём CSS-кода будет меньше. Но его лучше использовать, когда Вы окончательно знаете то, что хотите получить на выходе.
          2 вариант лучше для разработки, т.е. в процессе создания дизайна. Т.к. большинство вещей приходиться дописывать по ходу. К тому же он более прост для обновления. Т.е. когда выйдет новая версия можно будет просто заменить текущие версии файлов фреймворка Bootstrap. Можно использовать этот вариант, и когда дизайн будет полностью готов, вернуться к первому и внести все изменения в саму сборку, например, на странице Customize. Оставшиеся стили вынести в отдельный файл и подключить его.

          Если имеете знания препроцессора LESS, то лучше остановиться на нём. Т.е. управлять платформой Bootstrap с помощью переменных LESS более просто. Также на LESS более просто писать свои стили. В процессе разработки можно, например, подключить скрипт less.js и он будет сам переводить LESS -> CSS. После разработки, например, убрать less.js и перевести LESS в CSS с помощью компилятора. После этого сжать полученный файл CSS и подключить его к странице. В итоге Вы получите на выходе наиболее оптимальный размер файла CSS. А также удобный вариант (LESS) последующей доработки стилей.
          1. Лора # 0
            Большое спасибо за развернутый ответ.

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