Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Основы верстки на bootstrap или зачем надо учиться верстать сайты на самом популярном фреймворке

Доброго времени суток, мои дорогие подписчики и гости блога. Начиная с сегодняшней вводной публикации, я буду рассказывать вам про основы верстки на Bootstrap. Это популярный и востребованный механизм среди верстальщиков. Его желательно знать каждому специалисту в наши дни, кто хоть как-то связан с веб-разработкой сайтов или приложений.

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

История создания

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

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

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

Однако первое название фреймворка было Twitter Blueprint. Спустя несколько месяцев упорного труда новый продукт был презентован 19 августа в 2011 году и уже с известным нам названием Bootstrap.

twiter bootstrap

На сегодняшний день существует четыре версии Бутстрапа:

  1. Выше я указал дату и предысторию выхода фреймворка;
  2. Вторая версия вышла в конце первого месяца 2013 года (31 января). В нее было внедрено два главных механизма, которые стали весомыми преимуществами: поддержка отзывчивой верстки и сетка из 12 колонок;
  3. Ровно спустя два года после презентации инновации вышла третья версия Bootstrap-а, т.е. 19 августа 2013 года. Важные нововведения – это переход к концепции mobile first, по которой изначальное проектирование сайта происходит для верстки адаптивного дизайна для мобильных устройств, а после – для остальных девайсов, улучшение функции отзывчивости, введение плоского внешнего вида страниц (что также называется Flat Design) по умолчанию.
  4. Спустя еще два года того же 19 августа вышла четвертая версия описываемого фреймворка. Основные улучшения – это оптимизация верстки макетов, внедрение инструмента flexbox, обновление всех плагинов JavaScript в соответствии со стандартом ECMAScript 6 и отказ от пикселей (px) в пользу em и rem.

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

Bootstrap обладает огромным перечнем преимуществ, из-за которых, собственно, он и получил лавровый венок. Для удобства я перечислю их по пунктам в списке ниже.
  • Свободный доступ для скачивания и использования;
  • Прост как ясен день. Для работы с данным фреймворком необходимы только базовые знания таких языков, как html и css. И по сути новичок может сверстать вполне приличный несложный сайт;
  • Поддержка отзывчивой верстки. Разработчик может создать при помощи фреймворка адаптивный дизайн для мобильных устройств, планшетов и компьютеров;
  • А совместимы ли мы с тобой? Bootstrap совместим со всеми современными браузерами. Правда начиная с 4 версии была отменена поддержка Internet Explorer 8;
  • Почти как Флеш! Благодаря готовым базовым шаблонам, написанным по стандартам, сам процесс верстки, а также загрузка элементов значительно ускоряется;
  • Поддержка концепции mobile first, благодаря которой изначально сайт или приложение пишется под мобильные устройства, а после – под все остальные;
  • Пойманный в сети контент. Главное преимущество, за которое любят и используют Bootstrap – это сетки. Благодаря им можно реализовать удобную структуру веб-страниц.

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

Недостатки

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

bootstrap фреймворк

К основным недостаткам можно отнести:

  • Вы с одного конвейера? Даже если вы поменяете множество стилевых правил шаблона, он все равно будет выдавать Bootstrap. Поэтому уникального дизайна получить вы никак не сможете;
  • Аккуратно с именами! Bootstrap заполняет память общими именами, такими как: .table, .left, .dropup и так далее. Поэтому стоит внимательно их отслеживать, чтоб самому не сломать и не переопределить какой-то класс;
  • Почему так много текста? В некоторых шаблонах фреймворка можно найти много избыточного кода, который на самом деле только усложняет разбор программной реализации;
  • Отсутствие врожденной гибкости. Как ни странно, но это так. Пока вы используете стандартные решения, все функционирует прекрасно и легко. Однако если перед вами стоит задача кардинально изменить стилевое оформление, то набирайтесь терпения, включайте усидчивость и отменяйте возможные вспышки психов. Потому что с настройкой стандартных свойств можно сильно намучаться.

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

Подведем итоги

Несмотря на некоторые недостатки, Bootstrap – это удобная штука для верстки веб-сайтов, которая во многих ситуациях помогает разработчикам и облегчает их работу.

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

К тому же знания подобного механизма приветствуется и ценится IT-компаниями. Так что оптимизируйте свои знания, расширяйте горизонты освоенных инструментов и техник, и не забывайте закреплять все на практике.

Обязательно подписывайтесь на мой блог, ведь впереди еще много интересных публикаций, и делитесь ссылкой с друзьями. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 645 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Сергей

    Да, Bootstrap — это хорошая штука. Но она требует глубокого изучения. Всё-таки вёрстка сайтов — не такой уж простой процесс. Нужны тренировки)

    03.10.2016 в 12:44
    • Роман

      Привет, Сергей!

      С некоторой базой и основами верстки можно освоить значительно быстрей. Поэтому начинать новичку надо конечно с изучения html и css.

      03.10.2016 в 21:56