Cкачать
  1. Главная
  2. Документация
  3. Bootstrap 3
  4. CSS
  5. Обзор

bootstrap 3 Обзор * CSS

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

Тип документа HTML5

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

<!DOCTYPE html>
<html lang="ru">
  ...
</html>

Ориентированный в первую очередь на мобильные устройства

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

Для обеспечения правильной визуализации и сенсорного масштабирования, добавьте метатег viewport в ваш <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете ограничить возможности масштабирования на мобильных устройствах добавляя user-scalable=no в метатег viewport. Это ограничит масштабирование, это означает что пользователи смогут только листать, в результат ваш сайт будет чувствоваться как нативное приложение (без возможности изменения). В любом случае, мы не рекомендуем это, используйте с осторожностью.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap стандартно устанавливает масштабы отображения элементов, шрифты и стили ссылок. В частности, мы:

  • Задали background-color: #fff; на body
  • Используем @font-family-base,@font-size-base и @line-height-base атрибуты как нашу базу шрифтов.
  • Задали цвет всех ссылок через @link-color и применили подчеркивание ссылок только при :hover.

Эти стили можно найти в scaffolding.less.

Normalize.css

Для улучшения кросс-браузерного отображения, мы используем Normalize.css, проект от Николас Галлахер и Джонатан Нил.

Контейнеры (хранилища)

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

Используйте .container для отзывчивого контейнера с фиксированной шириной.

<div class="container">
  ...
</div>

Используйте .container-fluid для всей ширины контейнера, охватывающий всю ширину вашего просмотра.

<div class="container-fluid">
  ...
</div>
Пожертвовать