Книга: Bootstrap: Быстрое создание современных сайтов

Начало работы с Bootstrap

Начало работы с Bootstrap

Пригласить автора в проект [email protected]

Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном» – сайты, которые одинаково хорошо выглядят на всех типах устройств, от небольших телефонов до настольных компьютеров.

Bootstrap был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

Bootstrap можно загрузить на сайте getbootstrap.com или включить как ссылку на хранилище CDN (Content Delivery Network):

<! – Latest compiled and minified CSS – >

<link rel=«stylesheet» href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<! – jQuery library – >

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

<! – Latest compiled JavaScript – >

<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

Использование Bootstrap требует включения элементов и атрибутов! DOCTYPE, lang и charset:

<!DOCTYPE html>

<html>

<head>

<meta charset=«utf-8»>

</head>

</html>

Разработка сайта с «отзывчивым дизайном» всегда начинается с создания дизайна для мобильного телефона, а затем уже для планшета и далее для настольного компьютера – это называется принципом mobile-first. Поэтому подгоним ширину веб страницы под ширину экрана мобильного устройства, чтобы пользователь не елозил по странице в поисках контента, с помощью мета тега viewport:

<meta name=«viewport» content=«width=device-width, initial-scale=1»>

Два Bootstrap класса. container и. container-fluid обеспечивают контейнер для контента.

<div>

<h1> My First Bootstrap Page </h1>

<p> This is some text. </p>

</div>

Или

<div>

<h1> My First Bootstrap Page </h1>

<p> This is some text. </p>

</div>

Класс. container имеет фиксированную ширину для трех типов экранов:

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 992px) {

.container {

width: 970px;

}

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

}

Класс. container-fluid охватывает всю ширину viewport:

.container-fluid {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 1.776. Запросов К БД/Cache: 3 / 1
поделиться
Вверх Вниз