Ключевые моменты для обучения:
1. Обзор Bootstrap
2. Функции Bootstrap
3. Структура Bootstrap
4. Создайте первую страницу
5. Различные приготовления к обучению
На этом уроке мы в основном узнаем об истории, функциях, использованиях, использованиях и о том, почему Boostrap был выбран для разработки наших веб -проектов.
один. Bootstrap Обзор
Bootstrap - это структура с открытым исходным кодом, основанная на HTML, CSS и JavaScript, разработанной двумя техническими инженерами из Twitter (крупнейший в мире Weibo). Код фреймворта прост и визуально красивый, и его можно использовать для быстрого и простого создания требований к веб -странице на основе ПК и мобильных устройств.
В июне 2010 года инженеры внутри Twitter решили проблему сотрудничества и объединения в передовых задачах разработки. После различных решений Bootstrap была наконец подтверждена и выпущена в августе 2011 года. После длительного периода итерации и обновления оригинальный проект, управляемый CSS, превратился в фреймворк с открытым исходным кодом с многофункциональным веб-фронтом со многими встроенными и значками JavaScript.
Наиболее важной частью начальной загрузки является его отзывчивый макет, который может быть совместим с доступом к странице на ПК, прокладке и мобильных телефонах.
Загрузка и демонстрация загрузка начальной загрузки:
Официальный веб -сайт перевода на внутренний документ: http://www.bootcss.com
Официальный веб -сайт веб -клуба PiaoCheng: http://www.ycku.com
два. Bootstrap функции
Bootstrap очень популярен благодаря очень практичным функциям и функциям. Основные основные функции заключаются в следующем:
(1). Крестовые, кросс-браузер
Он совместим со всеми современными браузерами, в том числе более критикованными IE7 и 8. Конечно, этот курс больше не рассматривает браузеры ниже IE9.
(2). Отзывчивый макет
Он может не только поддерживать дисплеи в различных разрешениях на стороне ПК, но также поддерживает адаптивные дисплеи переключения мобильной прокладки, мобильного телефона и других экранов.
(3). Комплексные компоненты предоставлены
Bootstrap предоставляет очень практические компоненты, в том числе: навигацию, этикетки, панели инструментов, кнопки и другие компоненты, которые удобны для вызова разработчиков.
(4). Встроенный плагин jQuery
Bootstrap предоставляет много практических плагинов jQuery, которые облегчают разработчикам реализацию различных общих спецэффектов в Интернете.
(5). Поддержите HTML5 и CSS3
Семантические теги HTML5 и свойства CSS3 хорошо поддерживаются.
(6). Поддерживать менее динамичный стиль
Меньше использует переменные, гнездование и операции для записи более быстрого и более гибкого CSS. Это хорошо работает с начальной загрузкой.
три. Начальная структура
Прежде всего, если вы хотите понять структуру документов Boostrap, вам нужно скачать его локально на официальном сайте. Адрес загрузки начальной загрузки следующим образом:
Адрес загрузки начальной загрузки: http://v3.bootcss.com/ (выберите производственную среду, v3.3.4)
После декомпрессии в каталоге представлена такая структура:
начальная загрузка/
CSS/
│├-- -bootstrap.css
│├-- -bootstrap.css.map
│├-- -bootstrap.min.css
│├ack-bootstrap-theme.css
│├---bootstrap-theme.css.map
│└---bootstrap-theme.min.css
├ack JS/
│├ack Bootstrap.js
│└-- -bootstrap.min.js
└ack шрифты/
Glyphicons-halflings-regular.eot
Glyphicons-halflings-regular.svg
Glyphicons-halflings-regular.ttf
Glyphicons-halflings-regular.woff
Glyphics-Halflings-Regular.woff2
В основном он разделен на три основных каталога: CSS (стиль), JS (скрипт) и шрифты (шрифт).
1. В каталоге CSS есть четыре файла с суффиксом CSS. Те, которые содержат слово min, являются сжатыми версиями, которые обычно используются; Те, которые не содержат файлов без сжатия, и вы можете научиться понимать код CSS; В то время как файл с картой суффикс представляет собой таблицу сопоставления исходного кода CSS, которая используется в некоторых конкретных инструментах браузера.
2.JS Directory содержит два файла, которые несуществены и сжаты файлы JS.
3. Справочник FONTS содержит файлы шрифтов с различными суффиксами.
Четыре Создайте первую страницу
Мы создаем страницу HTML5, представляем основной файл Bootstrap, а затем проверяем, обычно она отображается.
// Первый Bootstrap <! Doctype html> <html lang = "zh-cn"> <Head> <meta charset = "utf-8"> <Title> Введение Bootstrap </title> <link rel = "stylesheet" href = "css/bootstrap.min.css"> </Headship> <broate> <Trod src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
пять. Различные приготовления к обучению
1. Инструменты разработки. Мы используем Sublime Text3 в качестве инструмента разработки для Bootstrap и установили плагин Emmet Code Generation;
2. Инструменты тестирования, в дополнение к обычным современным браузерам, являются во -вторых, в качестве мобильных инструментов тестирования. Мы используем Opera Mobile Emulator и инструменты мобильного веб -тестирования Chrome.
3. Требуемый фундамент является по крайней мере основой курса 1 -го сезона HTML5. Bootstrap имеет много встроенных плагинов jQuery. Хотя его гораздо проще использовать, чем JQUERY или JS, если у вас есть основание курсов JQUERY и JS, у вас будет более глубокое понимание вашего обучения;
4. Резолюция курса: базовые курсы, мы используем 1024 x 768 для записи, но некоторые специальные части, такие как отзывчивые и проектные курсы, требуют записи высокого разрешения и будут использовать 1440 x 900 для записи.
Выше приведено соответствующее знание структуры начальной загрузки, представленной вам редактором. Я надеюсь, что это будет полезно для вас!