English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В этом руководстве вы узнаете, как создать базовую шаблон Bootstrap с использованием компилированной версии Bootstrap 3.
Здесь вы узнаете, насколько легко создавать веб-страницы с помощью Bootstrap. Перед началом убедитесь, что у вас есть кодовый редактор и базовые знания HTML и CSS.
Если вы только начинаете веб-разработку, пожалуйстаНачните обучение основам HTML здесь»
Хорошо, давайте начнем прямо сейчас.
есть две версии для загрузки,скомпилированный BootstrapиBootstrap исходный кодФайлы. Вы можетеЗагрузите файл Bootstrap здесь.
Компилируйте и уменьшайте версии CSS и JavaScript-файлов, а также иконки в формате шрифтов, чтобы быстрее и легче выполнять веб-разработку, а исходный код содержит все исходные файлы CSS и JavaScript, а также локальные копии документов.
Чтобы лучше понять, мы сосредоточимся на скомпилированных файлах Bootstrap. Это сэкономит вам время, так как вам не нужно каждый раз волноваться о отдельных функциях, включая отдельные файлы. Когда вы решите переместить сайт в рабочую среду, из-за较小的 HTTP-запросов и размеров загрузки, так как он может компилировать и сжимать файлы, это также может улучшить производительность сайта и сэкономить ценные полосы пропускания.
После загрузки компилированного Bootstrap, распакуйте его в папку, чтобы проверить структуру. Вы найдете следующие файлы и их содержимое.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Как вы видите, компилированная версия Bootstrap предоставляет скомпилированные файлы CSS и JS (bootstrap.*), а также скомпилированные и сжатые файлы CSS и JS (bootstrap.min.*).
В папке fonts/glyphicons-halflings-regular.* находятся четыре файла шрифтов () . Эти файлы шрифтов содержат более 250 иконок из набора Glyphicon Halflings.
Совет:Это наиболее базовая форма Bootstrap, которую можно быстро использовать в любом веб-проекте. Обратите внимание, что для использования JavaScript-плагинов Bootstrap требуется включить jQuery. Вы можете найти его здесьhttps://jquery.com/download/Загрузите последнюю версию jQuery формы.
До сих пор вы изучили структуру и назначение файлов Bootstrap, теперь настало время действительно использовать Bootstrap. В этой главе мы создадим базовый шаблон Bootstrap, который включает все, что мы говорили о структуре файла.
Позвольте нам шаг за шагом выполнить следующие шаги. В конце этого урока вы создадите HTML-файл, который будет отображать сообщение “Hello world” в веб-браузере.
Откройте ваш любимый редактор кода и создайте новый HTML-файл. Начните с пустого окна, затем введите следующий код и сохраните его как “basic.html” на вашем рабочем столе.
<!DOCTYPE html> <html> <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>Основной HTML файл</title> </head> <body> <h1>Hello, world!</h1> </body> </html>Тестирование看看‹/›
Совет:Всегда включайте тег <meta> viewport в разделе <head> документа, чтобы включить масштабирование пальцами и обеспечить правильное отображение на мобильных устройствах. Также включен тег meta с атрибутом X-UA-Compatible в режиме edge, который говорит Internet Explorer отображать веб-страницу в наивысшем доступном режиме.
Чтобы установить этот HTML-файл в шаблон Bootstrap, достаточно добавить соответствующие файлы CSS и JS Bootstrap. Вы должны добавить файл JavaScript в нижней части страницы - в разделе, закрывающемМаркировка (например) перед ними, чтобы улучшить производительность веб-страницы.
<!DOCTYPE html> <html> <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>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- Optional Bootstrap theme --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>Тестирование看看‹/›
Мы все готовы!После добавления файлов CSS и JS Bootstrap и необходимой библиотеки jQuery мы можем начать разработку любого сайта или приложения с использованием фреймворка Bootstrap.
Теперь сохраните файл как "bootstrap-template.html".
Внимание:.html расширение очень важно - некоторые текстовые редакторы (например, Блокнот) автоматически сохраняют расширение.txt.
Откройте файл в браузере. Перейдите к вашему файлу и дважды щелкните по нему. Он откроется в вашем-default веб-браузере. (Если его нет, откройте браузер и перетащите файл в него.)
Если вы не хотите загружать и хранить библиотеку Bootstrap или jQuery herself, вы можете использовать бесплатные ссылки CDN (Content Delivery Network), чтобы включить файлы CSS и JavaScript Bootstrap и библиотеку JavaScript jQuery в документ.
CDN может предоставлять преимущества производительности, уменьшая время загрузки, так как они хранят файлы Bootstrap на множестве серверов по всему миру, и когда пользователь запрашивает файл, он предоставляется с сервера, наиболее близкого к пользователю.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>Тестирование看看‹/›
Для реализации целостности подресурсов (SRI) в Bootstrap
В CDN добавлены атрибуты целостности и crossorigin. Это функция безопасности, которая снижает риск атак со стороны поврежденного CDN, обеспечивая交付 файлов, полученных вашим сайтом (из CDN или любого другого места), без意外ных операций. Принцип его работы заключается в том, чтобы позволить вам предоставить шифрованную хеш-сумму, которая должна соответствовать получаемому файлу.
Атрибуты integrity и crossorigin были добавлены для реализации CDN в загрузчикеЦелостность подресурсов(SRI). Это функция безопасности, которая позволяет вам убедиться, что все файлы, передаваемые через ваш сайт (из CDN или любого другого места), не были意外но обработаны, тем самым уменьшая риск атаки на CDN. Работает, позволяя вам предоставлять зашифрованные хэши, которые должны соответствовать читаемым файлам.
Совет:Если пользователи вашего сайта уже загрузили файлы Bootstrap с одного и того же CDN при посещении других сайтов, они будут загружены из кэша браузера, а не повторно загружены, что сокращает время загрузки.