Bootstrap 3 CSS Обзор
цель
В этом учебнике мы обсуждали Bootstrap CSS 3 очка. Далее мы объясним Bootstrap 3 работает несколько ключевых факторов.
HTML 5 доктайп (Doctype)
Bootstrap 3 используются некоторые элементы HTML5 и CSS атрибутов. Для того, чтобы они работать, вам нужно использовать тип документа HTML5 (DOCTYPE).
<! DOCTYPE HTML> <HTML LANG = "EN"> ... </ HTML>
Если начало страницы в Bootstrap, созданной не использует тип документа HTML5 (DOCTYPE), вы можете столкнуться с некоторыми браузеры отображают проблемы несогласованности, которая может даже столкнуться несогласованные определенные ситуации под которые не могут пройти стандартную проверку W3C в коде ,
Приоритет Мобильное устройство
Это, вероятно, наиболее значительным изменением в Bootstrap 3. В предыдущих версиях Bootstrap (до 2.x), вам не нужно вручную процитировать другой CSS, чтобы сделать проект вместе с основным мобильным устройством для пользователей CSS. Не больше, Bootstrap 3 по умолчанию сам CSS это мобильное устройство удобно.
Бутстрап 3 предназначен приоритет для мобильных устройств, а затем на рабочем столе. Это на самом деле является очень своевременным сдвиг, так как все больше и больше людей используют мобильные устройства.
Для того, чтобы сделать веб-сайт Bootstrap развития для мобильных устройств дружественных для обеспечения правильного отображения и масштабирования сенсорного экрана, вам нужно добавить окно просмотра мета-теги в голову страницы, следующим образом:
<META NAME = "вьюпорт" содержание = "ширина = ширина устройства, начальный масштаб = 1.0">
ширина свойство ширина управления оборудованием. Предположим , что ваш сайт будет с различными устройствами разрешения экрана для просмотра, а затем установить его на устройство ширины , чтобы убедиться , что он правильно делает на разных устройствах.
Первоначальный масштаб = 1,0 для обеспечения загрузки страницы, соотношение 1: 1 презентации, то не будет никакого масштабирования.
На мобильном браузере устройства, путем добавления пользователем масштабируемой = нет для окна просмотра мета - тег , чтобы отключить функцию ее масштабирования (масштабирование). Как правило, максимальный масштаб = 1,0 и пользователем масштабируемой = не вместе. После того, как эта функция масштабирования отключена, пользователь может прокручивать экран, вы можете сделать ваш сайт выглядеть как родное приложение чувствовать. Обратите внимание, что, таким образом, мы не рекомендуем использование всех сайтов, или зависит от ваших собственных обстоятельств!
Отзывчивый изображение
Добавляя IMG реагирующих класс позволяет бутстрапе 3 изображения для того чтобы поддержать адаптивный макет , который более дружественным. Давайте посмотрим на этот класс содержит то, что CSS свойство. Суть ее в том, чтобы дать изображение макс-ширина: 100%; и высота: авто; свойство позволяет масштабирование изображения, не превышает размер родительского элемента.
.img-отзывчивым {
Дисплей: встроенный блок;
высота: авто;
макс-ширина: 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 3, как и его предыдущей версии, используйте Normalize, чтобы создать последовательность кроссбраузерный.
контейнер
Класс Контейнер Bootstrap 3 для содержания на странице пакета. Давайте посмотрим на следующий класс
.container {
Маржа правом: авто;
Маржа налево: авто;
}
С помощью приведенного выше кода, левый и правый края контейнера браузером решить.
.container: перед тем,
.container: после того, как {
дисплей: таблица;
Содержание: "";
}
Это создает псевдо-элементы. Настройка таблицы отображения, это создаст анонимный стол-ячейку и новый контекст форматирования блока. : Перед тем псевдо-элемента , чтобы предотвратить крах маржи ,: после псевдо-элементов для очистки поплавка.
Если conteneditable атрибут появляется в HTML, так как некоторые из жука Opera, создать пространство вокруг этих элементов. Это можно сделать с помощью содержания: "" для ремонта.
.container: после того, как {
ясно: то и другое;
}
Это создает псевдо-элемент, и гарантирует, что все плавучее судно, которое содержит все элементы.
Bootstrap CSS 3 имеет приложение в ответ на запросы средств массовой информации, медиа-запросы в различных пороговых значений установлены макс ширины для контейнера, для того, чтобы соответствовать подвесную систему.