English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В этой главе мы рассмотрим ключевые компоненты базовой структуры Bootstrap, включая лучшие практики, которые делают веб-разработку лучше, быстрее и мощнее.
Bootstrap использует некоторые элементы HTML5 и CSS-атрибуты. Чтобы они работали корректно, вам нужно использовать HTML5 документного типа (Doctype). Таким образом, пожалуйста, включите следующий фрагмент кода в начале вашего проекта Bootstrap.
<!DOCTYPE html> <html> .... </html>
Если в начале веб-страницы, созданной с использованием Bootstrap, не использовать HTML5 документного типа (Doctype), вы можете столкнуться с проблемами不一致ого отображения в браузерах, а также с проблемами不一致ого отображения в некоторых специфических ситуациях, что может привести к тому, что ваш код не пройдет проверку по стандартам W3C.
Принцип的首要性 для мобильных устройств - это наиболее значительное изменение в Bootstrap 3.
В предыдущих версиях Bootstrap (до 2.x) вам нужно было вручную ссылаться на другой CSS, чтобы весь проект поддерживал мобильные устройства.
Теперь это не так, Bootstrap 3 по умолчанию поддерживает мобильные устройства через CSS.
Цель дизайна Bootstrap 3 - оптимизация для мобильных устройств, а затем для десктопных устройств. Это действительно своевременное转变, так как все больше и больше пользователей используют мобильные устройства.
Чтобы сделать веб-сайты, разработанные с использованием Bootstrap, дружелюбными к мобильным устройствам, обеспечить правильное рисование и масштабирование сенсорного экрана, необходимо добавить соответствующий код в секцию head веб-страницы. viewport meta тег, как показано ниже:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width атрибут контролирует ширину устройства. Предположим, что ваш сайт будет просматриваться на устройствах с различными экранными разрешениями, тогда установите его в device-width обеспечивает правильное представление на различных устройствах.
initial-scale=1.0 обеспечивает загрузку веб-страницы в масштабе 1:1, без всякого масштабирования.
В браузерах мобильных устройств, через установку viewport meta тег добавляется user-scalable=no можно отключить его функцию масштабирования (zooming).
Обычно этоmaximum-scale=1.0 Вместе с user-scalable=no это отключает функцию масштабирования, позволяя пользователю только прокручивать экран, что делает ваш сайт похожим на原生 приложение.
Обратите внимание, что мы не рекомендуем использовать этот метод для всех сайтов, все же решайте сами, в зависимости от вашей ситуации!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="адаптивное изображение">
Добавляя img-responsive класс делает поддержку изображений в Bootstrap 3 для адаптивной вёрстки более дружелюбной.
Давайте теперь посмотрим, какие CSS-свойства включает этот класс.
В следующем коде можно увидетьimg-responsive класс assigns max-width: 100%; и height: auto; свойств изображению, что позволяет ему масштабироваться пропорционально, не превышая размеры родительского элемента.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}Это означает, что соответствующие изображения будут представляться как block。Когда вы устанавливаете атрибут display элемента в block, он будет отображаться как блочный элемент.
установить height:auto，высота связанных элементов зависит от браузера.
установить max-width 100% будет перезаписывать любую ширину,指定的 через атрибут width. Это делает поддержку изображений для адаптивной вёрстки более дружелюбной.
Если необходимо выровнять по горизонтали изображения с классом .img-responsive, используйте класс .center-block, а не .text-center.
Bootstrap 3 использует body {margin: 0;} для удаления отступов body.
Пожалуйста, смотрите下面的 настройки body:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}Первое правило устанавливает стиль шрифта по умолчанию для body "Helvetica Neue", Helvetica, Arial, sans-serif。
Второе правило устанавливает размер шрифта текста по умолчанию в 14 пикселей.
Третье правило устанавливает высоту строки по умолчанию в 1.428571429.
Четвертое правило устанавливает цвет текста по умолчанию в #333333.
Последнее правило устанавливает цвет фона по умолчанию в белый.
Использование свойств @font-family-base, @font-size-base и @line-height-base в качестве стиля排版.
Цвет ссылок устанавливается через атрибут @link-color.
Для стиля по умолчанию для ссылок, установлены следующие настройки:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}Таким образом, когда курсор мыши находится над ссылкой или кликнутая ссылка, цвет будет установлен в #2a6496. В то же время, будет отображена подсказка.
Кроме того, кликнутые ссылки будут отображаться с тонким контуром цвета #333. Другое правило устанавливает контур шириной 5 пикселей и для браузеров на основе webkit -webkit-focus-ring-color браузерные расширения. Установка смещения контура -2 пикселя.
Все эти стили можно найти в scaffolding.less.
Bootstrap использует Normalize для создания кросс-браузерной一致性.
Normalize.css - это небольшой файл CSS, который обеспечивает лучшую кросс-браузерную一致性 вdefaults стилях HTML элементов.
<div> ... </div>
Bootstrap 3 container class используется для обертывания содержимого страницы. Давайте посмотрим на этот .container class.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Верхние коды передают левый и правый внешние отступы (margin-right, margin-left) браузеру для решения.
Обратите внимание, что из-за фиксированной ширины отступов (padding) контейнер по умолчанию не может быть вложенным.
.container:before,
.container:after {
display: table;
content: " ";
}Это создает псевдоэлемент. Установите display для tableчто создает анонимный table-cell и новый блок форматирования.:before псевдоэлемент предотвращает обрушение верхнего отступа,:after псевдоэлемент для удаления плавающих.
Если conteneditable Атрибут出现在 HTML, из-за некоторых ошибок в Opera, вокруг вышеупомянутых элементов создается пробел. Это можно исправить, используя content: " " для исправления.
.container:after {
clear: both;
}Он создает псевдоэлемент и обеспечивает, что все контейнеры содержат все плавающие элементы.
Bootstrap 3 CSS имеет медиазапросы, адаптивные к различным порогам, устанавливающие max-width для container, чтобы соответствовать сеточной системе.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap хорошо работает на современных браузерах для компьютеров и мобильных устройств.
Старые браузеры могут не поддерживать это хорошо.
Ниже приведена таблица с поддерживаемыми Bootstrap последними версиями браузеров и платформ:
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | Не применяется | Не применяется | Не применяется |
| iOS | YES | Не применяется | Не применяется | Не применяется | YES |
| Mac OS X | YES | YES | Не применяется | YES | YES |
| Windows | YES | YES | YES* | YES | Не применяется |
* Bootstrap поддерживает браузеры IE8 и новее.