Bootstrap Начало работы
Что такое Bootstrap?
- Bootstrap — это бесплатная интерфейсная платформа для быстрой и удобной разработки веб-сайтов
- Bootstrap включает в себя HTML и CSS на основе шаблонов дизайна для типографии, формы, кнопки, таблицы, навигация, модальные, изображения карусели и многие другие, а также дополнительные плагины JavaScript
- Bootstrap также дает вам возможность легко создавать адаптивные дизайны
Что такое Адаптивный веб-дизайн?
Отзывчивый веб-дизайн о создании веб-сайтов, которые автоматически настроить себя хорошо выглядеть на всех устройствах, от небольших телефонов до больших настольных компьютеров.
История начальной загрузки
Bootstrap была разработана Марком Отто и Джейкобом Торнтоном в Твиттере и выпущена в качестве продукта с открытым исходным кодом в августе 2011 на GitHub.
В июне 2014 Bootstrap был проектом No1 на GitHub!
Зачем использовать Bootstrap?
Преимущества Bootstrap:
- Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
- Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
- Мобильный-первый подход: В Bootstrap 3 стили Mobile-First являются частью базовой платформы
- Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)
Где получить Bootstrap?
Существует два способа начать использование Bootstrap на собственном веб-узле.
Вы можете:
- Скачать Bootstrap из getbootstrap.com
- Включить Bootstrap из CDN
Загрузка начальной загрузки
Если вы хотите скачать и хост Bootstrap самостоятельно, перейдите на getbootstrap.com, и следуйте инструкциям там.
Bootstrap CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его в CDN (сеть доставки контента).
Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали Bootstrap из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки.
Кроме того, большинство CDN будет убедиться, что после того, как пользователь запрашивает файл из него, он будет обслуживаться от ближайшего к ним сервера, что также приводит к более быстрой загрузке времени.
Jquery
Bootstrap использует jQuery для плагинов JavaScript (например, модальные, подсказки и т.д.). Однако, если вы просто используете CSS часть Bootstrap, вам не нужно jQuery.
Создание первой веб-страницы с помощью Bootstrap
1. Добавление документа HTML5
Bootstrap использует HTML-элементы и свойства CSS, для которых требуется документ HTML5.
Всегда включайте в начало страницы тег документа HTML5 вместе с атрибутом lang и правильным набором символов:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3-первый мобильный
Bootstrap 3 предназначен для реагирования на мобильные устройства. Стили мобильных устройств являются частью базовой платформы.
Чтобы обеспечить правильную визуализацию и масштабирование касания, добавьте следующий <meta> тег внутри <head> элемента:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-widthдеталь устанавливает ширину страницы для того чтобы последовать за шириной экрана прибора (которая будет меняться в зависимости от прибора).
initial-scale=1деталь задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
3. контейнеры
Bootstrap также требуется содержащий элемент для переноса содержимого сайта.
Есть два контейнера классов на выбор:
.containerкласс обеспечивает адаптивный контейнер с фиксированной шириной.container-fluidкласс предоставляет контейнер с полной шириной, охватывающий всю ширину видового экрана
Две базовые страницы начальной загрузки
В следующем примере показан код базовой страницы начальной загрузки (с контейнером с фиксированной шириной ответа):
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
В следующем примере показан код базовой начальной страницы (с контейнером с полной шириной):
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
