English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Вы можете загрузить Bootstrap https://getbootstrap.com/docs/3.4/ Скачайте последнюю версию Bootstrap. Нажав на эту ссылку, вы увидите веб-страницу, как показано ниже:
Нажмите ссылку "Загрузка Bootstrap", чтобы перейти на следующую страницу:
Вы увидите две кнопки:
Загрузка BootstrapЗагрузка Bootstrap. Нажмите эту кнопку, и вы сможете загрузить предварительно скомпилированные сжатые версии Bootstrap CSS, JavaScript и шрифтов. Включены только документация и исходные файлы.
Загрузка исходного кодаЗагрузка исходного кода. Нажмите эту кнопку, и вы сможете напрямую получить последнюю версию исходного кода Bootstrap LESS и JavaScript.
Если вы используете не скомпилированный исходный код, вам нужно скомпилировать файлы LESS, чтобы создать повторно используемые файлы CSS. Для компиляции файлов LESS Bootstrap официальная поддержка ограничивается Recess, что основано на less.js CSS подсказки.
Для лучшего понимания и удобства использования мы будем использовать предварительно скомпилированную версию Bootstrap в этом учебнике.
Поскольку файлы скомпилированы и сжаты, при разработке независимых функций вам не нужно включать эти независимые файлы каждый раз.
Этот учебник написан на основе последней версии (Bootstrap 3).
Когда вы скачиваете предварительно скомпилированную версию Bootstrap, разархивируя ZIP файл, вы увидите следующую структуру файлов/каталогов:
Как показано на рисунке выше, можно увидеть скомпилированные CSS и JS (bootstrap.*), а также сжатые скомпилированные CSS и JS (bootstrap.min.*). Также включены шрифты Glyphicons, что является опциональной темой Bootstrap.
Если вы скачали исходный код Bootstrap, структура файлов будет выглядеть так:
less/、js/ и fonts/ файлы в папке分别是 исходный код CSS, JS и иконок Bootstrap.
dist/ папки содержат файлы и папки, указанные в перечне предварительно скомпилированных загрузок.
docs-assets/、examples/ и всех *.html файл является документацией Bootstrap.
Пример базового HTML шаблона, использующего Bootstrap, представлен ниже:
<!DOCTYPE html> <html> <head> <title>Bootstrap шаблон</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ввод Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shiv и Respond.js используются для поддержки элементов HTML5 и медиазапросов в IE8 --> <!-- Внимание: Если файл Respond.js вносится через 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 (Bootstrap требует jQuery для своих JavaScript-плагинов) --> <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.
Подробности каждого элемента в данном фрагменте кода будут рассмотрены в Обзор CSS Bootstrap Подробное объяснение раздела.
Теперь давайте попробуем использовать Bootstrap для вывода "Hello, world!":
<h1>Hello, world!</h1>
Внутри推荐使用 Staticfile CDN 上的库：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Кроме того, вы можете использовать следующие CDN-сервисы:
Рекомендуется использовать международно:https://cdnjs.com/