Bootstrap среда установки
Bootstrap очень прост в установке. В этой главе описывается, как загрузить и установить Bootstrap, бутстрапе обсудить структуру файла, и через пример, чтобы продемонстрировать его использование.
Скачать Bootstrap
Вы можете выбрать из http://getbootstrap.com/ скачать последнюю версию Bootstrap на. При нажатии на эту ссылку, вы увидите страницу, показанную ниже:
Вы увидите две кнопки:
- Скачать Bootstrap:Скачать Bootstrap. Нажмите на эту кнопку, вы можете загрузить Bootstrap CSS, сжатую версию предварительно скомпилированных JavaScript и шрифтов. Он не содержит подлинные документы и файлы исходного кода.
- Скачать Источник:скачать исходный код. Нажмите на эту кнопку, вы можете получить последнюю Bootstrap и LESS JavaScript исходный код непосредственно из с.
Если вы используете нескомпилированном исходный код, вам нужно собрать меньше файлов для создания многоразовой файла CSS. Для компиляции файлов МЕНЬШЕ, Bootstrap официально поддерживает только Выемка , который основан на Twitter less.js подсказок CSS.
Для того, чтобы лучше понять и более удобным в использовании, мы будем использовать предварительно скомпилированных версию Bootstrap в этом учебнике.
Так как файл компилируется и прессуют, в отдельную функцию развития, вы не всегда включают в себя эти отдельные файлы.
Время написания этой статьи, используя последнюю версию (Bootstrap 3).
Структура файла
Скомпилированная Bootstrap
При загрузке скомпилированную версию Bootstrap, разархивировать файл ZIP, вы увидите следующую структуру файла / каталога:
Как было показано выше, вы можете увидеть скомпилированный CSS и JS (Bootstrap. *), А скомпилированные сжатый CSS и JS (bootstrap.min. *). Также содержит Glyphicons шрифт, который является необязательным темой Бутстрап.
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!":
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>