Учебное пособие по framework Bootstrap

Опубликовано: 25.12.2017

видео Учебное пособие по framework Bootstrap

Material Design: Урок 1. Основные принципы

Приветствую всех гостей моего блога и гиков веб-разработки. Сегодняшняя публикация будет посвящена ознакомлению с таким востребованным фреймворком, как Bootstrap. Прочитав текущую статью, вы узнаете, для чего он был создан, как работать с bootstrap и как его устанавливать, какие инструменты предоставляет данный фреймворк и где его чаще всего применяют, смотрите на сайте Bootstrap. Ну а теперь вперед разбирать новый материал!

Bootstrap – это фреймворк, разработанный специально для верстки фронтенда (внешнего интерфейса) веб-сервисов и приложений.

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

Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown  — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.

С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/. Также с его помощью начиная со второй версии можно создавать отзывчивую верстку .

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

Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.

Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.

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

Самая сложная задача при создании адаптивной темы для WordPress или любого адаптивного сайта в целом заключается в кодировании CSS-файла. Этот файл определяет основное представление темы и устанавливает, будет ли тема адаптивной или нет. Однако можно ведь взять уже готовую таблицу стилей, наполненную всеми основными возможностями, и это заметно упростит дальнейшую работу! Учитывая данный факт, давайте посмотрим, как можно спроектировать готовую тему WordPress на базе адаптивного фреймворка Bootstrap, на сайте Bootstrap. Однако сначала давайте в целом поговорим о нем.

Bootstrap – это open source фреймворк, созданный на базе JavaScript и CSS и оперирующий отдельным языком, представляющим собой расширение каскадных таблиц — LESS. Фреймворк обладает множеством встроенных инструментов, которые могут использоваться вместе с HTML или с любыми системами управления контентом (включая WordPress), поддерживающими внешние стили. Таким образом, его можно применять для создания любых веб-сайтов. Фреймворк содержит в себе определение базовых стилей для всех основных возможностей, применяющихся на сайтах: для аккордеонов, уведомлений, выпадающих списков, групп кнопок, каруселей, лейблов, списков, модальных окон, навигационных панелей, навигационных вкладок, заголовков страниц, прогресс-баров, миниатюр, подсказок и т.д.

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


.NET DevChat: Building Responsive Web Applications With ASP.NET MVC and Bootstrap (live demo)

rss