Вам действительно не нужно настраивать собственную среду, чтобы начать изучение 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/. Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже:

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

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

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

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

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

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

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

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

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

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

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

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




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok