Bootstrap Обзор CSS
В этой главе мы объясним основную структуру ключевой части Bootstrap, в том числе наши веб-разработчики сделать лучше, быстрее, сильнее лучшие практики.
HTML 5 доктайп (Doctype)
Bootstrap использует некоторые элементы HTML5 и свойства CSS. Для того, чтобы они работать, вам нужно использовать тип документа HTML5 (DOCTYPE). Таким образом, в начале использования проекта Bootstrap содержит следующий сегмент кода.
<!DOCTYPE html> <html> .... </html>
Если начало страницы в Bootstrap, созданной не использует тип документа HTML5 (DOCTYPE), вы можете столкнуться с некоторыми браузеры отображают проблемы несогласованности, которая может даже столкнуться несогласованные определенные ситуации под которые не могут пройти стандартную проверку W3C в коде ,
Приоритет Мобильное устройство
Приоритетные мобильные устройства является наиболее значительным изменением в Bootstrap 3.
В предыдущих версиях Bootstrap (до 2.x), вам не нужно вручную процитировать другой CSS, чтобы сделать весь проект дружественная поддержка мобильных устройств.
Не больше, Bootstrap 3 по умолчанию сам CSS является дружественным поддержка мобильных устройств.
Бутстрап 3 предназначен приоритет для мобильных устройств, а затем на рабочем столе. Это на самом деле является очень своевременным сдвиг, так как все больше и больше людей используют мобильные устройства.
Для того, чтобы сделать веб - сайт Bootstrap развития для мобильных устройств дружественных для обеспечения правильного отображения и масштабирования сенсорного экрана, вам нужно добавить окно просмотра мета - теги в голову страницы, следующим образом :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ширина свойство ширина управления оборудованием. Предположим , что ваш сайт будет с различными устройствами разрешения экрана для просмотра, а затем установить его на устройство ширины , чтобы убедиться , что он правильно делает на разных устройствах.
Первоначальный масштаб = 1,0 для обеспечения загрузки страницы, соотношение 1: 1 презентации, то не будет никакого масштабирования.
На мобильном браузере устройства, путем добавления пользователем масштабируемой = нет для окна просмотра мета - тег , чтобы отключить функцию ее масштабирования (масштабирование).
Как правило, максимальный масштаб = 1,0 и пользователем масштабируемой = не вместе. После того, как эта функция масштабирования отключена, пользователь может прокручивать экран, вы можете сделать ваш сайт выглядеть как родное приложение чувствовать.
Обратите внимание, что, таким образом, мы не рекомендуем использование всех сайтов, будет зависеть от ваших собственных обстоятельств!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
Отзывчивый изображение
<img src="..." class="img-responsive" alt="响应式图像">
Добавляя IMG реагирующих класс Bootstrap 3 позволяет изображению поддерживать адаптивный макет , который более дружественным.
Давайте посмотрим на то, что этот класс содержит свойство CSS.
В приведенном ниже коде, вы можете увидеть изображение IMG-отзывчивым класс дает максимальную ширину: 100%, а также рост: авто, недвижимость может быть расширена так, чтобы изображение не превышает размер родительского элемента.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Это указывает на то, что соответствующее изображение визуализируется как встроенный блок. При настройке свойств отображения элемента является встроенный блок, встроенный элемент относительно содержания формы представления вокруг него, но с разницей в инлайн, что в этом случае мы можем установить ширину и высоту.
Высота Окружение: высота авто, связанных элементов зависит от браузера.
Задать максимальную ширину 100% перекрывает любую ширину указанную ширину собственности. Это позволяет поддерживать картинки адаптивный макет, который более дружественным.
Глобальный дисплей, расположение и ссылки
Основные глобальные дисплей
Bootstrap 3 с помощью тела {маржу: 0;} , чтобы удалить тело полей.
Рассмотрим следующие параметры для тела:
тело {
семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
размер шрифта: 14px;
высота линии: 1,428571429;
цвет: # 333333;
фонового цвета: #ffffff;
}
Первое правило , чтобы установить стиль шрифта по умолчанию для тела "Helvetica Neue", Helvetica, Arial , без засечек.
Второе правило текста размера шрифта по умолчанию 14 пикселей.
Третье правило заключается в установлении высоты строки по умолчанию 1,428571429.
Четвертое правило устанавливает цвет текста по умолчанию # 333333.
Окончательное правило устанавливает цвет фона по умолчанию белый.
наборный
Используйте @ семейство шрифтов базы, @ размер шрифта базы и @ высота линии базы свойство, как книгопечатание.
Ссылка Стиль
Установите цвет через глобальную связь собственности @ ссылка-цвет.
Стиль по умолчанию для ссылки, следующие настройки:
а: зависать,
а: фокус {
цвет: # 2a6496;
текст-отделка: подчеркнуть;
}
а: фокус {
очертить: тонкая пунктирная # 333;
очертание: 5px авто -webkit-фокус кольцо цвета;
очертить смещение: -2px;
}
Таким образом, при наведении указателя мыши на ссылку или ссылки, вы нажимаете, цвет установлен на # 2a6496. В то же время, там будет подчеркивание.
Кроме того, ссылки вы нажимаете, будет код цвета для тонкой пунктирной линией # 333. Еще одно правило , чтобы установить контур 5 пикселей в ширину, так и для WebKit на основе браузера имеет -webkit-фокус-кольцо-цветовые расширения браузера. Контур Смещение устанавливается -2 пикселей.
Все эти стили можно найти в scaffolding.less.
Избегайте несоответствия кросс-браузера
Bootstrap использовать Normalize , чтобы обеспечить согласованность кросс-браузерный.
Normalize.css небольшой CSS файл, который обеспечивает лучшую согласованность кросс-браузерный в HTML элементов стилей по умолчанию.
Контейнер (Container)
<div class="container"> ... </div>
Класс Контейнер Bootstrap 3 для содержания на странице пакета. Давайте посмотрим на этот файл класса bootstrap.css .container.
.container {
обивка-направо: 15px;
обивка налево: 15px;
Маржа правом: авто;
Маржа налево: авто;
}
С помощью приведенного выше кода, левый и правый полем контейнера (Правое поле, маржа налево) решается браузером.
Обратите внимание, что из-за заполнения (прокладки) имеют фиксированную ширину, контейнеры по умолчанию не могут быть вложенными.
.container: перед тем,
.container: после того, как {
дисплей: таблица;
Содержание: "";
}
Это создает псевдо-элементы. Настройка таблицы отображения, это создаст анонимный стол-ячейку и новый контекст форматирования блока. : Перед тем псевдо-элемента , чтобы предотвратить крах маржи ,: после псевдо-элементов для очистки поплавка.
Если conteneditable атрибут появляется в HTML, так как некоторые из жука Opera, создать пространство вокруг этих элементов. Это можно сделать с помощью содержания: "" для ремонта.
.container: после того, как {
ясно: то и другое;
}
Это создает псевдо-элемент, и гарантирует, что все плавучее судно, которое содержит все элементы.
Bootstrap CSS 3 имеет приложение в ответ на запросы средств массовой информации, медиа-запросы в различных пороговых значений установлены макс ширины для контейнера, для того, чтобы соответствовать подвесную систему.
@media (мин-ширина: 768px) {
.container {
ширина: 750px;
}
Bootstrap Поддержка браузеров / устройств
Bootstrap может хорошо работать в последнем рабочем столе и мобильного терминала браузера.
Старые браузеры могут не быть хорошо поддерживается.
В следующей таблице бутстрапе поддерживают последние версии браузеров и платформ:
| хром | Firefox | IE | опера | сафари | |
|---|---|---|---|---|---|
| Android | ДА | ДА | Не применимо | НЕТ | Не применимо |
| Ios | ДА | Не применимо | Не применимо | НЕТ | ДА |
| Mac OS X | ДА | ДА | Не применимо | ДА | ДА |
| Windows | ДА | ДА | ДА * | ДА | НЕТ |
* Поддержка Bootstrap для Internet Explorer 8 и более поздних версиях IE.