Компьютерапия

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

Попробуйте следующий пример, нажав эту ссылку, и Вы увидите результат нижеприведенного кода кода -

<!DOCTYPE html>
<html lang = "en">
  
   <head>
      <meta charset ="utf-8">
      <meta http-equiv ="X-UA-Compatible" content = "IE = edge">
      <meta name ="viewport" content = "width = device-width, initial-scale = 1">
      
      <title>Bootstrap 101 Template</title>
     

      <link href ="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
     
      <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src ="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
     
   </head>
  
   <body>
      <h1>Hello, world!</h1>
     
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
     
   </body>
</html>

Для большинства из примеров, приведенных в данном руководстве вы найдете Попробуйте это вариант , так что просто использовать его и наслаждаться обучения.

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

Загрузка Bootstrap

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

Если нажать на кнопку Download, страница будет перенаправлять на другую страницу. Здесь вы можете увидеть три кнопки -

• Загрузите Bootstrap. Нажав на это, вы можете загрузить предварительно скомпилированные и модифицированные версии Bootstrap CSS, JavaScript и шрифтов. Документация или исходные файлы исходного кода не включены.
• Загрузить исходный код - нажав эту кнопку, вы можете получить последний исходный код Bootstrap LESS и JavaScript непосредственно из GitHub.
• Загрузите Sass. Нажав на это, вы можете получить последнюю версию Bootstrap LESS для Sass для легкого включения в проекты Rails, Compass или Sass.

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

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

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

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

Как вы можете видеть, есть скомпилированные CSS и JS (bootstrap.*), А также скомпилированные и мини-CSS и JS (bootstrap.min.*).

Исходный код начальной загрузки

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

• Файлы в папках less/, JS/, и fonts/ являются исходным кодом для Bootstrap CSS, JS, и значки шрифтов(соответственно).
• В папке dist/ содержится все, что указано в предварительно скомпилированном разделе загрузки выше.
• 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 файлы, которые включены, чтобы сделать нормальный HTML файл Bootstrap шаблона. Просто включите библиотеку jQuery перед включением библиотеки Bootstrap.