Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap среда установки

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

Скачать Bootstrap

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

Bootstrap Скачать

Вы увидите две кнопки:

  • Скачать Bootstrap:Скачать Bootstrap. Нажмите на эту кнопку, вы можете загрузить Bootstrap CSS, сжатую версию предварительно скомпилированных JavaScript и шрифтов. Он не содержит подлинные документы и файлы исходного кода.
  • Скачать Источник:скачать исходный код. Нажмите на эту кнопку, вы можете получить последнюю Bootstrap и LESS JavaScript исходный код непосредственно из с.

Если вы используете нескомпилированном исходный код, вам нужно собрать меньше файлов для создания многоразовой файла CSS. Для компиляции файлов МЕНЬШЕ, Bootstrap официально поддерживает только Выемка , который основан на Twitter less.js подсказок CSS.

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

Так как файл компилируется и прессуют, в отдельную функцию развития, вы не всегда включают в себя эти отдельные файлы.

Время написания этой статьи, используя последнюю версию (Bootstrap 3).

Структура файла

Скомпилированная Bootstrap

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

Составитель Bootstrap структура файла

Как было показано выше, вы можете увидеть скомпилированный CSS и JS (Bootstrap. *), А скомпилированные сжатый CSS и JS (bootstrap.min. *). Также содержит Glyphicons шрифт, который является необязательным темой Бутстрап.

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

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

Структура Bootstrap исходного кода
  • меньше/, / JS ишрифты /под документом являются Bootstrap CSS, JS и значок шрифта исходный код.
  • расстояние /папка содержит файлы и прекомпилированный скачать раздел выше перечисленных папок.
  • Docs-активы/ примеры / и все* .htmlфайл Bootstrap документация.

Шаблоны HTML

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

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
      <!--[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 (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

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

Подробные сведения о фрагменте кода выше каждого элемента будет Bootstrap CSS обзор глав подробно объяснить.

примеров

Теперь давайте попробуем использовать Bootstrap вывода "Hello, World!":

примеров

<H1> Привет, мир! </ H1>

Попробуйте »

Bootstrap CDN Рекомендуется

Примерами этого сайта используют ресурсы Baidu бутстрапе статическую библиотеку ресурсов.

Baidu статический репозиторий услуг CDN, доступ к более быстрому, более эффективное ускорение, скорость, и никакие ограничения пропускной способности, постоянно свободный, в коде следующим образом:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>