Установка начальной загрузки очень проста. Эта статья является кратким изложением моих исследований, что удобно для будущих запросов и обучения. В то же время я надеюсь вам помочь.
1. Скачать Bootstrap
Вы можете скачать последнюю версию Bootstrap с http://getbootstrap.com/. Когда вы нажмете на эту ссылку, вы увидите веб -страницу, подобную следующему:
Вы увидите две кнопки:
Скачать Bootstrap: Скачать Bootstrap. Нажмите эту кнопку, и вы можете скачать предварительные сжатые версии Bootstrap CSS, JavaScript и шрифтов. Документы и исходные файлы исходного кода не включены.
Скачать источник: скачать исходный код. Нажмите эту кнопку, и вы можете получить последнюю начальную загрузку меньше и исходный код JavaScript непосредственно от.
Если вы используете некомпилированный исходный код, вам необходимо скомпилировать меньший файл для генерации повторно используемых файлов CSS. Для составления меньшего количества файлов Bootstrap поддерживает только recess, что является подсказкой CSS на основе Twitter.
Для лучшего понимания и более легкого использования мы будем использовать предварительную версию Bootstrap в этом уроке.
Поскольку файлы скомпилированы и сжаты, вам не нужно включать эти независимые файлы каждый раз в независимую функциональную разработку.
Это исследование является последней версией (Bootstrap 3).
2. Структура файла
1. предварительно скомпилированная начальная загрузка
Когда вы загружаете скомпилированную версию Bootstrap и расстегнуте на ZIP -файл, вы увидите следующую структуру файла/каталога:
Как показано на изображении выше, вы можете увидеть скомпилированные CSS и JS (Bootstrap.*), А также скомпилированные CSS и JS (Bootstrap.min.*). Он также включает в себя шрифт глификонов, дополнительная тема начальной загрузки.
2. Начальный код начальной загрузки
Если вы загрузили исходный код Bootstrap, структура файла будет выглядеть так:
Файлы под меньше/, JS/ и шрифты/ являются исходными кодами Bootstrap CSS, JS и значков, соответственно.
Dist/ Polder содержит файлы и папки, перечисленные в разделе предварительной загрузки выше.
Docs-Assets/, примеры/и все *.html файлы являются документами начальной загрузки.
3. Шаблон HTML
Базовый шаблон HTML с использованием начальной загрузки выглядит так:
<! Doctype html> <html> <head> <title> шаблон Bootstrap </title> <meta name = "viewport" content = "width = width Device, начальная масштаба = 1.0"> <!-Представление Boutstrap-> <Link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "styleSheet"> <!-html5 shim и response.js используются для включения ie8 для поддержки html5-элементов и медиа-запросов-> <! Файл не может иметь эффект-> <!-[if ie 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/reans.min.js"> </script> <! [endif]-> </head> <hody> <h1> Привет, мир! </h1> <! 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.
IV Примеры
Теперь давайте попробуем вывести "Привет, мир!" Использование начальной загрузки:
<! Doctype html> <html> <head> <title> try try bootstrap exant online </title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootstrap.min.js"> </script> </head> </head> </head> </head> World! </h1> </body> </html>
<!-New Bootstrap Core CSS-файл-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <! src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-jQuery File. Обязательно представьте-> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <!-последний файл JavaScript Core Bootstrap-> <Скрипт src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для обучения каждого и правильно создать среду установки начальной загрузки.