CSS · Bootstrap українською

Отримайте детальну інформацію про ключові елементи структурної бази Bootstrap, включаючи наш підхід до кращої, більш швидкої та ефективної веб-розробки.

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

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

Орієнтований насамперед на мобільні пристрої

У Bootstrap 2 ми запроваджували можливості адаптування сайтів для мобільних пристроїв. Програма Bootstrap 3 спочатку розрахована на роботу з мобільними пристроями. Замість того, щоб додавати додаткові шаблони для мобільних пристроїв, ми вбудували їх у ядро ​​програми.Bootstrap в першу чергу розрахований на мобільні пристрої. Макети для мобільних пристроїв зберігаються в бібліотеці, а не окремими файлами.

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

Шрифти та посилання

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 для чутливого контейнера з фіксованою шириною.

Система розмітки (сітка) використовується для створення макетів сторінок через групи рядків та стовпців, в яких розміщується ваш контент. Ось як система розмітки працює:

Подивіться приклади застосування цих принципів до вашого коду.

Мультимедійні запити

Ми використовуємо такі медіа-запити в файлах Less для створення ключових точок розриву в нашій сітці.

Ми іноді розширюємо ці медіа-запити, що включають max-width для обмеження CSS до вужчого набору пристроїв.

Параметри розмітки

Перегляньте, як особливості сітки Bootstrap працюють на декількох пристроях за допомогою зручної таблиці.