training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

Как делать шаблоны для сайтов на Bootstrap

Создано: 04 января 2019Автор: bit.ly769 просмотровСложность: легкий

Bootstrap - это HTML фронтенд-фреймворк для ускоренной вёрстки веб-страниц сайтов. Он не накладывает ограничений на дизайн, но всё же желательно что бы сайт имел колоносную структуру. У него есть несколько преимуществ:

  1. Адаптивность. При правильном использовании вы будете иметь сразу адаптивный шаблон, его не придётся делать отдельно.
  2. Бибилиотека элементов. Содержит кнопки, формы, иконки, табы для страниц и многое другое другое.
  3. Расширяемость. Хотите добавить свои стили? Сделать кнопку не округлой, а квадратной? Нет проблем! У вас почти отстутствуют ограничения!

Именно поэтому огромное количество веб-мастеров сегодня выбирают именно этот фреймворк.

Есть несколько особенностей работы с Bootstrap:

  1. В Bootstrap применяют только современные наработки из области HTML и CSS, поддержка старых устройств есть, но не очень большая. Поэтому необходимо внимательно отнестись к поддержке очень старых старых браузеров.
  2. Bootstrap в целом не требователен к навыку верстальщиков, работающих с ними, но если вы недавно начали работать с HTML то рекомендуем сначала пройти импровизированное собеседование по HTML, например здесь что бы понять свой уровень, и, если это необходимо, подтянуть его.

Главные инструменты:

  1. Шаблон – это фиксированный или не фиксированный шаблон документа.
  2. Сетки – это установленные заранее размеры колонок. Использовать их можно сразу. К примеру, колонка с шириной 140 px будет отнесена к типу span2. Этот класс можно применять в описании CSS документов.
  3. Медиа – с помощью этого инструмента осуществляется управление видео и изображениями.
  4. Типографика – это шрифты и их описание, а также определение кодов, цитат и прочих классов шрифтов.
  5. Формы – с их помощью можно оформить не только сами формы, но и некоторые элементы, которые с ними связаны.
  6. Таблицы – инструмент для оформления таблиц. Сюда входит сортировка таблиц и добавление их функциональности.
  7. Алерты – работа с диалоговыми окнами, подсказками и всплывающими окнами;
  8. Навигация – это оформление вкладок, табов, меню, страниц, а также тулбара.

Шаблоны бутстрап построены на 12-колонной динамической сетке, которая может иметь фиксированную или плавающую ширину. Это незаменимые шаблоны для создания сайтов на основе всемирно известного фреймворка Bootstrap от Twitter.

В bootstrap применяются CSS свойства и HTML элементы, при работе с которыми нужен HTML 5 doctype. Этот шаблон предъявляет глобальные и основные значения для ссылок, шрифтов и бекграунда. Во второй версии шаблона (bootstrap 2) обычный сброс браузерных дефолтов осуществляется благодаря Normalize. В третьей и четвёртой версии от этого отказались. Для большей совместимости многое было изменено, а сброс дефолтных стилей можно найти в reset.less.

Динамический дизайн и его использование

Для того чтобы активировать responsive-дизайн необходимо добавить мета-тег и CSS файл в «head» страницы сайта. Но в случае, когда осуществлялась компиляция шаблона со страницы «изменить и скачать», то нужно лишь включить мета-тег.

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

Комментарии

реклама