ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Навоз недалеко от того, кого слабит (Пословица).

Bootstrap – Обзор CSS

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Обзор CSS
В этой главе дается обзор ключевых элементов инфраструктуры Bootstrap, включая подход Bootstrap к лучшей, быстрой веб-разработки.

HTML5 DOCTYPE

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

 

Мобильный

Поскольку Bootstrap 3 был запущен, Bootstrap стал мобильным. Это означает, что «мобильные» стили могут быть найдены по всей библиотеке в отдельных файлах. Вы должны добавить элементviewport meta tagв <head>, чтобы обеспечить надлежащее оказание и использовать масштабирование на мобильных устройствах.

 

  • Свойство widthуправляет шириной устройства. Установка в device-width необходима, чтобы контент отображался на различных устройствах (мобильные, настольные компьютеры, планшеты и т.д. …) надлежащим образом.
  • initial-scale = 1.0 гарантирует при загрузке веб-страницы будет оказываться в масштабе 1: 1.

Добавлениеuser-scalable = noк атрибутуcontent, чтобы отключить масштабирование возможностей на мобильных устройствах, как показано ниже. Пользователи могут лишь прокрутить, а не увеличить с этим изменением, и результаты на вашем сайте немного больше.

 

Обычно maximum-scaleиспользуется вместе с user-scalable = no. Не как уже упоминалось выше, user-scalable = noможет предоставить пользователям опыт более, как родное приложение, поэтому Bootstrap не рекомендует использовать этот атрибут.

Адаптивные изображения

Bootstrap 3 позволяет сделать изображение отзывчивым, добавив класс .img-responsiveк тегу<img>. К изображению применяется max-width: 100%;иheight: auto;, так что масштаб применяется к родительскому элементу.

 

Типография и ссылки

Bootstrap устанавливает базовый глобальный дисплей (background), типографику и стили ссылок:

  • Основной глобальный дисплей – Устанавливает цвет фона: #FFF; на элемент<body>.
  • Типография– Использует атрибуты@font-family-base, @font-size-base, и@line-height-base как типографская база.
  • Стили ссылок– Устанавливают глобальный цвет ссылок через атрибут @link-colorи применить ссылку только подчеркиваемую на : hover.

Если вы собираетесь использовать код LESS, вы можете найти все это в scaffolding.less.

Нормирование

Bootstrap использует нормализацию к установлению последовательности браузера.

Normalize.css это современный, HTML5 готовый альтернатива CSS resets. Это небольшой CSS файл, который обеспечивает лучшую согласованность кроссбраузерной в моделировании по умолчанию HTML-элементов.

Контейнеры

Используйте класс .containerчтобы завернуть контент на странице и легко центрировать содержимое, как показано ниже.

 

Посмотрите на класс.containerв файлеbootstrap.css:

 

Следует отметить, что в связи с заполнением и фиксированной шириной, контейнер не вложен по умолчанию.

Посмотрите в файл bootstrap.css:

 

Здесь вы можете увидеть, что CSS имеет медиа-запросы с контейнеромwidth. Это помогает для применения отзывчивости и в тех случаях, когда класс контейнера изменяется соответствующим образом, чтобы сделать системную сетку должным образом.

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close