Последние учебники веб-разработки
 

Bootstrap Get Started

❮ Предыдущая Следующая Глава ❯

Что такое Bootstrap ?

  • Bootstrap это бесплатный передний конец рамки для быстрого и простого веб - разработки
  • Bootstrap включает в себя HTML и CSS шаблоны дизайна на основе для типографики, форм, кнопок, таблиц, навигации, модальностей, каруселей изображений и многое другое, а также дополнительных плагинов JavaScript
  • Bootstrap также дает вам возможность легко создавать адаптивные конструкции

Что такое адаптивный веб - дизайн?

Адаптивный веб-дизайн о создании веб-сайтов, которые автоматически приспосабливаются, чтобы хорошо выглядеть на всех устройствах, от маленьких до больших телефонов настольных компьютеров.

Bootstrap История

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

В июне 2014 Bootstrap был № 1 проект на GitHub!

Зачем использовать Bootstrap ?

Преимущества Bootstrap :

  • Простота в использовании: Кто - нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
  • Адаптивные особенности: Bootstrap отзывчивым CSS 's подстраивается телефонов, планшетных ПК и настольных компьютеров
  • Mobile-первый подход: В Bootstrap 3, мобильные-первых стилей являются частью структуры ядра
  • Совместимость с браузерами: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)

Где получить Bootstrap ?

Есть два способа начать использовать Bootstrap на собственном веб - сайте.

Ты можешь:

  • Скачать Bootstrap от getbootstrap.com
  • Включите Bootstrap из CDN

Загрузка Bootstrap

Если вы хотите скачать и хозяин Bootstrap самостоятельно, перейдите к getbootstrap.com , и следуйте инструкциям.

Bootstrap CDN

Если вы не хотите , чтобы загрузить и разместить Bootstrap себя, вы можете включить его из CDN (сеть доставки контента).

MaxCDN обеспечивают поддержку CDN для Bootstrap CSS и JavaScript 's. Кроме того, включать JQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Одним из преимуществ использования Bootstrap CDN :
Многие пользователи уже загрузили Bootstrap из MaxCDN при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки. Кроме того , большинство CDN's - CDN's будет убедиться , что когда пользователь запрашивает файл из него, он будет обслуживаться с сервера ближайшего к ним, что также приводит к более быстрому времени загрузки.

Создание первой веб - страницы с Bootstrap

1. Добавьте доктайп HTML5

Bootstrap использует HTML - элементы и свойства CSS , которые требуют доктайп HTML5.

Всегда включайте доктайп HTML5 в начале страницы, вместе с атрибутом Ланг и правильный набор символов:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 мобильная первая

Bootstrap 3 предназначен реагировать на мобильные устройства. Mobile-первые стили являются частью структуры ядра.

Для обеспечения правильного рендеринга и сенсорного масштабирования, добавьте следующий <meta> тег внутри <head> элемент:

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

width=device-width часть задает ширину страницы , чтобы следить за экраном на ширину устройства (который будет варьироваться в зависимости от устройства).

initial-scale=1 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

3. Контейнеры

Bootstrap также требует , содержащий элемент , чтобы обернуть содержимое сайта.

Существуют два класса контейнера на выбор:

  1. .container Класс обеспечивает отзывчивое контейнер фиксированной ширины
  2. .container-fluid класса предоставляет полный контейнер ширину, охватывающий всю ширину окна просмотра

Примечание: Контейнеры не вложенными (вы не можете поместить контейнер внутри другого контейнера).

Два Основные Bootstrap Страницы

В следующем примере показан код основного Bootstrap страницы (с отзывчивым фиксированной ширины контейнера):

пример

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
Попробуй сам "

В следующем примере показан код основного Bootstrap страницы (с полной шириной контейнера):

пример

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
Попробуй сам "

❮ Предыдущая Следующая Глава ❯