Bootstrap - Настройка среды

Настроить и начать использовать Bootstrap очень просто. В этой главе объясняется, как загрузить и настроить Bootstrap. Мы также обсудим файловую структуру Bootstrap и продемонстрируем ее использование на примере.

Скачать Bootstrap

Вы можете скачать последнюю версию Bootstrap из https://getbootstrap.com/. Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже -

Здесь вы можете увидеть две кнопки -

Download Bootstrap- Щелкнув по нему, вы можете загрузить предварительно скомпилированные и минифицированные версии Bootstrap CSS, JavaScript и шрифтов. Никакая документация или исходные файлы исходного кода не включены.
Download Source - Нажав на нее, вы можете получить последнюю версию исходного кода Bootstrap LESS и JavaScript прямо с GitHub.

Если вы работаете с некомпилированным исходным кодом Bootstrap, вам необходимо скомпилировать файлы LESS для создания пригодных для использования файлов CSS. Для компиляции LESS файлов в CSS, Bootstrap официально поддерживает только Углубление , который CSS Hinter Twitter, основанный на less.js .

Для лучшего понимания и простоты использования мы будем использовать предварительно скомпилированную версию Bootstrap на протяжении всего руководства. Поскольку файлы компилируются и минимизируются, вам не нужно каждый раз беспокоиться о включении отдельных файлов для отдельных функций. На момент написания этого руководства была загружена последняя версия (Bootstrap 3).

Файловая структура

Предварительно скомпилированный Bootstrap

После загрузки скомпилированной версии Bootstrap извлеките ZIP-файл, и вы увидите следующую структуру файла / каталога:

Как видите, есть скомпилированные CSS и JS (bootstrap. *), А также скомпилированные и минифицированные CSS и JS (bootstrap.min. *). Шрифты из Glyphicons включены, поскольку это дополнительная тема Bootstrap.

Исходный код Bootstrap

Если вы загрузили исходный код Bootstrap, то файловая структура будет следующей:

Файлы в разделах less / , js / и fonts / являются исходным кодом для Bootstrap CSS, JS и шрифтов значков (соответственно).
Расстояние / папка включает в себя все перечисленные в разделе загрузки скомпилированного выше.
docs-assets / , examples / и все файлы * .html являются документацией Bootstrap.

HTML-шаблон

Базовый шаблон HTML с использованием Bootstrap будет выглядеть так:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Здесь вы можете увидеть jquery.js, bootstrap.min.js а также bootstrap.min.cssфайлы, которые включены для создания обычного файла HTM в шаблоне начальной загрузки. Просто не забудьте включить библиотеку jQuery, прежде чем включать библиотеку Bootstrap.

Более подробно о каждом из элементов в этом фрагменте кода, приведенном выше, будет рассказано в главе Обзор Bootstrap CSS .

пример

Теперь давайте попробуем пример с использованием указанного выше шаблона. Попробуйте следующий пример, используя опцию Live Demo, доступную в правом верхнем углу окна с образцом кода ниже на нашем веб-сайте -

<h1>Hello, world!</h1>

Во всех последующих главах мы использовали фиктивный текст с сайта https://www.lipsum.com/.