Содержание

Фреймворк Twitter Bootstrap — что это такое? — Учимся создавать сайты — персональный блог верстальщика Заура Магомедова

Здравствуйте уважаемые посетители моего блога! На связи вновь с вами ваш покорный слуга и путеводитель в мир веб-разработок Заур Магомедов. Наверняка бродя по просторам интернета, вам встречался такой термин, как Twitter Bootstrap. Когда то, сосем недавно, для меня это было тоже что то новое. Поэтому я пишу данную статью для тех, кто не знает, что такое Twitter Bootstrap и для чего он используется.

Twitter Bootstrap – это фреймворк, созданный разработчиками twitter’a. Вы можете спросить – а что такое фреймворк? Фреймворк (от англ. слова framework) – это каркас, структура программной среды. В данном случае программная среда это наша верстка шаблона — html + css + javaScript. Т.е. говоря простым языком, фреймворк это набор, каких то готовых решений, которые мы можем взять и применить в нашей разработке. В чем же прелесть фреймворка?

Представьте вы верстаете сайт и вам необходимо оформить какую то кнопочку, она имеет фоновый цвет в виде градиента, тени и т.

д. Чтобы реализовать задуманное по современной технологии css3 вам нужно будет написать много строк кода. А теперь представьте, что вы задаете этой же кнопочке просто какой либо класс и она у вас меняет вид – становится стильной и красивой, причем достигается это без применения картинок. Или еще, вам необходимо установить на сайте слайд шоу. Вы начнете искать в интернете подходящий скрипт, далее прикручивать его к сайту и т.д. Зачем? Все уже включено, с помощью Twitter Bootstrap вы можете создать отличное слайд шоу. То же самое – модальные окна, подсказки, выпадающие списки и еще многое другое.

Больше всего, что мне нравится в Twitter Bootstrap это то, что с его помощью можно сверстать адаптивный дизайн. Адаптивный дизайн (это когда сайт подстраивается под различные устройства – ноутбук, планшет, моб. телефон и т.д.) – это современный подход к верстке сайта. Я вообще считаю, что сегодня все дизайны нужно верстать адаптивными, т.к. число пользователей мобильных устройств уже практически догнало число пользователей стационарных компьютеров и ноутбуков.

Да и вообще, нужно идти в ногу со временем, т.е. как можно меньше применять картинки и заменять их кодом на css3.

Я думаю, вы уже примерно представляете себе что такое Twitter Bootstrap.

Вот основные инструменты Twitter Bootstrap:

  • Модульная сетка шаблона – это предустановленные значения ширины столбцов (колонок). Чтобы задать нужную ширину необходимо задать определенный класс: от .span1 до .span12. Ширина колонок может динамически меняться в зависимости от разрешения окна браузера.
  • Тип макета – фиксированный или резиновый.
  • Типографика – оформление заголовков, параграфов, списков, цитат и т.д.
  • Медиа – управление медиа-контентом. Например, картинка может динамически изменять свои размеры в зависимости от разрешения окна браузера.
  • Таблицы – различное оформление таблиц
  • Формы – оформление форм: вариации и варианты расположения.
  • Навигация – оформление вкладок, хлебных крошек, постраничной навигации, меню, панель инструментов
  • Набор javaScript’ов – создание модальных окон, подсказок (tooltip), всплывающих окон, фиксация блока при прокрутке (affix) и др.

Twitter Bootstrap является на сегодняшний день один из наиболее популярных html+css+javaScript-фреймворков. Но, не смотря на его популярность, не каждый верстальщик может с ним справиться. Многие вообще его не применяют. Связано это с тем, что единственная стоящая документация – это официальный сайт Twitter Bootstrap. Чтобы разобраться в данной документации нужно потратить уйму времени. Единственное облегчение это то, что существует полный перевод документации на русский язык.

На момент написания данной статьи последняя версия Twitter Bootstrap – версия 3.0.3. Также существует и вторая версия – 2.3.2. Но если перейти на сайт второй версии мы можем увидеть сообщение о том, что вторая версия уже не поддерживается и разработчики советуют перейти к третьей. Перевод на русский: версия 2.3.2; версия 3.0.3.

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

Например, мы хотим на сайте оформить кнопки и создать модальные окна. Нет смысла качать весь bootstrap, достаточно зайти в раздел Customize и отметить галочками нужные пункты и в самом низу страницы нажать «Customize and Download». Прежде, чем качать архив мы можем также изменить значения LESS для того, чтобы подстроить некоторые параметры такие, как цвет, размер и другое на свое усмотрение. Например, нас не устраивает размер шрифта заголовка первого уровня (h2) по умолчанию, мы задаем свое значение. В созданном архиве данное правило будет применено к данному заголовку. Теперь скачанный архив будет весить намного меньше, чем полная версия всего фреймворка.

Что касается меня, то у меня уже есть опыт создания сайтов с использованием Twitter Bootstrap. Вот, например, можете посмотреть на данный интернет магазин, разработанный с применением фреймворка Twitter Bootstrap 2. До сих пор я использовал версию второй ветки, т.к. 3-я версия была в статусе realize candidate. Теперь выпущена стабильная версия Twitter Bootstrap 3.

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

Ну вот, теперь вы уже знаете что такое Twitter Bootstrap, для чего он нужен и где используется. Ждите еще статей, посвященные Twitter Bootstrap и не забудьте подписаться на обновления блога.

На этом все. Всем удачи! Всем пока!

онлайн, обучение с нуля, для начинающих и продвинутых — Хабр Карьера

Специализация

Выберите специализацию

Ваша квалификация

ЛюбаяСтажёр (Intern)Младший (Junior)Средний (Middle)Старший (Senior)Ведущий (Lead)

Профессиональные навыки

Twitter Bootstrap

Длительность

ЛюбаяДо 3 месяцевОт 3 до 6 месяцевОт 6 до 12 месяцевБолее года

Местоположение Только онлайн

Учреждение

Стоимость до

₽€$₴₸

Только бесплатные

Дополнительно Сертификат об окончании Помощь с трудоустройством

Найдено 8 курсов

WAYUP

Фронтенд разработчик

3 месяца • По факту набора потока

HTML • CSS • JQuery • Twitter Bootstrap • WordPress • Node. js • JavaScript

СертификатОнлайн

Devman

Бэкенд разработчик

13 месяцев • По факту набора потока

Python • Django • Базы данных • Redis • Kubernetes • Docker • Git • API Интерфейсы • SQL • Разработка программного обеспечения • Node.js • HTML • CSS • Twitter Bootstrap

СертификатТрудоустройствоОнлайн

GB (GeekBrains)

Десктоп разработчик

12 месяцев • По факту набора потока

C# • .NET • Visual Studio • XML • Twitter Bootstrap • LESS • MySQLi • ASP.NET MVC • HTML • CSS

СертификатОнлайн

Devman

Фронтенд разработчик

2 месяца • В любой момент

HTML • CSS • Twitter Bootstrap • Python

ТрудоустройствоОнлайн

FructCode

Фронтенд разработчик Для стажёров

3 недели • В любой момент

Twitter Bootstrap • HTML • CSS • JQuery

СертификатОнлайн

FructCode

Фулстек разработчик Для джуниоров

2 месяца • В любой момент

Yii framework • PHP • MySQL • Паттерны проектирования • Composer • Lamp • Twitter Bootstrap • Веб-разработка

СертификатОнлайн

FructCode

Фронтенд разработчик Для стажёров

4 недели • В любой момент

Twitter Bootstrap • HTML • CSS • Адаптивная верстка • Кроссбраузерная верстка • Веб-разработка • Верстка лендингов

СертификатОнлайн

GB (GeekBrains)

Бэкенд разработчик

16 месяцев • По факту набора потока

ООП • Паттерны проектирования • Git • Высоконагруженные системы • HTML • CSS • JavaScript • Twitter Bootstrap • RESTful API • Yii framework • XML • JQuery • PHP • Redmine • MongoDB • Redis • Ajax • MySQL

СертификатОнлайн

База

· Twitter Bootstrap

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

  • Типография
  • Код
  • Таблицы
  • Формы
  • Кнопки
  • Иконки от Glyphicons

Заголовки и основной текст

Типографская шкала

Вся типографская сетка основана на двух переменных Less в нашем файле variable.less: @baseFontSize и @baseLineHeight . Первый — это базовый размер шрифта, используемый повсюду, а второй — базовая высота строки.

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

Пример основного текста

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

х3. Рубрика 2

х4. Рубрика 3

h5. Рубрика 4
h5. Рубрика 5
х6. Рубрика 6

Курсив, адрес и сокращение

Элемент
Использование		 Дополнительно
<сильный> Для выделения фрагмента текста с важным Никто
Для выделения фрагмента текста с помощью ударение Никто
<сокращение> Обтекает сокращения и акронимы, чтобы показать расширенную версию при наведении

Включить необязательный атрибут

заголовка для расширенного текста

Используйте класс . initialism для сокращений в верхнем регистре.
<адрес> Для получения контактной информации его ближайшего предка или всей совокупности работ Сохраните форматирование, завершив все строки кодом
.

Использование акцента

Fusce dapibus, tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Примечание: Не стесняйтесь использовать и в HTML5, но их использование немного изменилось. предназначен для выделения слов или фраз, не придавая им дополнительной важности, в то время как в основном используется для голосовых, технических терминов и т. д.

Примеры адресов

Вот два примера того, как можно использовать тег:

Twitter, Inc.
795 Folsom Ave, Suite 600
Сан-Франциско, Калифорния 94107
Тел.: (123) 456-7890
Полное имя
[email protected]

Примеры сокращений

Сокращения с атрибутом title имеют светлую пунктирную нижнюю границу и курсор подсказки при наведении. Это дает пользователям дополнительную информацию о том, что что-то будет отображаться при наведении.

Добавьте класс initialism к аббревиатуре, чтобы улучшить типографскую гармонию, придав ей немного меньший размер текста.

HTML — лучшее, что есть со времен нарезанного хлеба.

Аббревиатура атрибута слова аттр .

Блок-котировки

Элемент Использование Дополнительно
<цитата> Элемент уровня блока для цитирования контента из другого источника

Добавить атрибут cite для исходного URL

Используйте . pull-left и .pull-right классы для плавающих опционов
<маленький> Необязательный элемент для добавления ссылки на пользователя, обычно автора с названием работы. Поместите вокруг заголовка или имени источника.

Чтобы включить цитату, оберните

вокруг любого HTML как цитата. Для прямых котировок мы рекомендуем

.

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

<цитата>
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число может быть получено заранее.

  Кто-то известный

Пример цитаты

Цитаты по умолчанию имеют следующий стиль:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis.

Кто-то известный в Основная работа

Чтобы переместить цитату вправо, добавьте class="pull-right" :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis.

Кто-то известный в Кузов

Списки

Заказной

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Целое число слов и масса
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Содовый гнойник
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat в
    • Faucibus porta lacus fringilla vel
    • Энеан сит амет эрат нунк
    • Eget porttitor lorem

    Unstyled

      • Lorem ipsum dolor sit amet
      • Consectetur adipiscing elit
      • Целое число слов и масса
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
        • Phasellus iaculis neque
        • Содовый гнойник
        • Vestibulum laoreet porttitor sem
        • Ac tristique libero volutpat в
      • Faucibus porta lacus fringilla vel
      • Энеан сит амет эрат нунк
      • Eget porttitor lorem

      Заказано

        1. Lorem ipsum dolor sit amet
        2. Consectetur adipiscing elit
        3. Целое число слов и масса
        4. Facilisis in pretium nisl aliquet
        5. Nulla volutpat aliquam velit
        6. Faucibus porta lacus fringilla vel
        7. Энеан сит амет эрат нунк
        8. Eget porttitor lorem

        Описание

        Списки описаний
        Список описаний идеально подходит для определения терминов.
        Эуисмод
        Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        Donec id elit non mi porta gravida at eget metus.
        Порт Малесуада
        Etiam porta sem malesuada magna mollis euismod.

        Горизонтальное описание

        Списки описаний
        Список описаний идеально подходит для определения терминов.
        Эуисмод
        Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
        Donec id elit non mi porta gravida at eget metus.
        Порт Малесуада
        Etiam porta sem malesuada magna mollis euismod.

        Встроенный

        Оберните встроенные фрагменты кода с помощью <код> .

        Например, section должен быть заключен как встроенный.

        Базовый блок

        Используйте 

          для нескольких строк кода. Обязательно избегайте угловых скобок в коде для правильного рендеринга. 
         
        Пример текста здесь...
        
 
        <пред>
  <p>Образец текста здесь...</p>

        Примечание: Убедитесь, что код не превышает 

          теги как можно ближе к левому краю; он отобразит все вкладки. 
         
         При желании вы можете добавить класс  .pre-scrollable , который установит максимальную высоту 350 пикселей и предоставит полосу прокрутки по оси Y. 
         
         Google Prettify 
         
         Возьмите тот же элемент  
          и добавьте два необязательных класса для улучшенного рендеринга. 
         
        Пример текста здесь...
        
 
        <пред>
  <p>Образец текста здесь...</p>

         Загрузите google-code-prettify и просмотрите файл readme, чтобы узнать, как его использовать.
         Разметка таблицы 
         ) для маркировки столбцов таблицы) в теле таблицы
         Бирка Описание
          <таблица>  Элемент-обертка для отображения данных в табличном формате
          <заголовок>  Элемент-контейнер для строк заголовка таблицы ( 
         
          <тело>  Элемент-контейнер для строк таблицы (
         
         
          Элемент-контейнер для набора ячеек таблицы (  или  ), который отображается в одной строке.
          <тд>  Ячейка таблицы по умолчанию
          <й>  Специальная ячейка таблицы для меток столбца (или строки, в зависимости от области действия и размещения) 
         Должен использоваться внутри 
         
          <заголовок>  Описание или краткая информация о том, что содержится в таблице, особенно полезно для программ чтения с экрана.
        <таблица>
  
    
      <й>…
      <й>…
    
  
  
    
      <тд>…
      <тд>…
    
  

 
         Варианты стола 
         Имя Класс Описание
         По умолчанию Нет Без стилей, только столбцы и строки
         Базовый  . таблица  Только горизонтальные линии между строками
         С рамкой  .стол с рамкой  Скругляет углы и добавляет внешнюю границу
         Зебра в полоску  .стол-полосатый  Добавляет светло-серый цвет фона в нечетные строки (1, 3, 5 и т. д.)
         Сгущенный  .настольно-уплотненный  Разрезает вертикальные отступы пополам, с 8 пикселей до 4 пикселей, внутри всех  td  и -й  элементы
         Примеры таблиц 
         1. Стили таблиц по умолчанию 
         Таблицы автоматически оформляются с использованием лишь нескольких границ для обеспечения удобочитаемости и сохранения структуры. В версии 2.0 требуется класс  . table .
        <таблица>
  …
 
         # Имя Фамилия Имя пользователя
         1 Марка Отто @mdo
         2 Джейкоб Торнтон @толстый
         3 Ларри Птица @twitter
         2. Полосатый стол 
         Немного пофантазируйте со своими таблицами, добавив чередование зебр — просто добавьте класс  .table-striped .
          Примечание.  Чередующиеся таблицы используют селектор CSS  :nth-child  и недоступен в IE7-IE8.
        <таблица>
  …
 
         # Имя Фамилия Имя пользователя
         1 Знак Отто @mdo
         2 Джейкоб Торнтон @толстый
         3 Ларри Птица @twitter
         3.
         Стол с окантовкой
         Добавьте границы вокруг всей таблицы и закруглите углы для эстетических целей.
        <таблица>
  …
 
         # Имя Фамилия Имя пользователя
         1 Марка Отто @mdo
         Знак Отто @getbootstrap
         2 Джейкоб Торнтон @толстый
         3 Птица Ларри @twitter
         4. Сводный стол 
         Сделайте свои таблицы более компактными, добавив класс  .table-densed , чтобы сократить отступы ячеек таблицы вдвое (с 8 пикселей до 4 пикселей).
        <таблица>
  …
 
         # Имя Фамилия Имя пользователя
         1 Марка Отто @mdo
         2 Джейкоб Торнтон @толстый
         3 Птица Ларри @twitter
         5. Объедините их все! 
         Не стесняйтесь комбинировать любые классы столов, чтобы добиться разного внешнего вида, используя любой из доступных классов.
        <таблица>
  ...
 
         Полное имя
         # Имя Фамилия Имя пользователя
         1 Марка Отто @mdo
         2 Джейкоб Торнтон @толстый
         3 Птица Ларри @twitter
         Гибкий HTML и CSS 
         Самое лучшее в формах в Bootstrap — это то, что все ваши входные данные и элементы управления выглядят великолепно, независимо от того, как вы строите их в своей разметке. Никакого лишнего HTML не требуется, но мы предоставляем шаблоны для тех, кому это нужно.
         Более сложные макеты поставляются с краткими и масштабируемыми классами для простой стилизации и привязки событий, поэтому у вас есть все необходимое на каждом этапе.
         Включены четыре макета 
         Bootstrap поддерживает четыре типа макетов форм:
        •  Вертикальный (по умолчанию)
        •  Поиск
        •  Встроенный
        •  Горизонтальный
         Различные типы макетов форм требуют некоторых изменений в разметке, но сами элементы управления остаются и ведут себя одинаково.
         Состояния элементов управления и многое другое 
         Формы Bootstrap включают стили для всех элементов управления базовой формы, таких как ввод, текстовое поле и выбор, которые вы ожидаете. Но он также поставляется с рядом пользовательских компонентов, таких как добавленные и предшествующие входные данные и поддержка списков флажков.
         Такие состояния, как ошибка, предупреждение и успех, включены для каждого типа элемента управления формы. Также включены стили для отключенных элементов управления.
         Четыре типа бланков 
         Bootstrap предоставляет простую разметку и стили для четырех стилей распространенных веб-форм.
         Имя Класс Описание
         Вертикально (по умолчанию)  .form-vertical  (не требуется) Наклейки с выравниванием по левому краю над элементами управления
         Встроенный  .form-inline  Выровненная по левому краю метка и встроенные элементы управления для компактного стиля
         Поиск  .form-search  Ввод текста со скругленными углами для типичного эстетического поиска
         Горизонтальный  .form-горизонтальный  Плавающие метки, выровненные по левому краю и правому краю, на той же строке, что и элементы управления
         Пример форм 
         с использованием только элементов управления формы, без дополнительной разметки 
         Базовая форма 
         В версии 2. 0 у нас есть более легкие и интеллектуальные значения по умолчанию для стилей форм. Никакой дополнительной разметки, только элементы управления формой.
        <форма>
  
  
  Соответствующий текст справки!
  <метка>
     Проверить меня
  
  

 
         Форма поиска 
         Отражая стили WebKit по умолчанию, просто добавьте  .form-search  для дополнительных полей поиска.
        <форма>
  <тип ввода="текст">
  

 
         Встроенная форма 
         Входные данные для начала являются блочными. Для  .form-inline  и  .form-horizontal  мы используем встроенный блок.
         Запомнить меня
        <форма>
  
  
  <метка>
     Запомнить меня
  
  

 

         Горизонтальные формы 
         Пример разметки 
         Учитывая приведенный выше пример макета формы, вот разметка, связанная с первой группой ввода и управления. Классы  .control-group  ,  .control-label  и  .controls  необходимы для стилизации.
        <форма>
  <набор полей>
    Текст легенды
    <дел>
      
      <дел>
        <тип ввода="текст">
        
        Вспомогательный текст справки