Учебник bootstrap: Учебник по Bootstrap | ИТ Шеф
Введение. Начало работы · Bootstrap. Версия v4.4
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с BootstrapCDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
CSS
Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">JS
Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.
Мы используем мини-сборку jQuery, но и полную можно использовать.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper, но не jQuery. Для получения дополнительной информации о том, что входит в Bootstrap, пожалуйста, смотрите наш раздел содержание.
Показать компоненты, требующие JavaScript
- Уведомления отмены
- Кнопки изменения состояний и чекбоксов/»радио»
- Карусель для поведения «слайд», элементы контроля и индикаторы
- Коллапс для изменения видимости содержимого
- Выпадающие элементы для отображения и расположения (также требует Popper.js)
- Модальные окна для отображения, расположения и создания поведения прокрутки
- Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
- Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
- Отслеживание прокрутки и обновления навигации
Начальный шаблон страницы
Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h2>Hello, world!</h2>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
HTML5 doctype
Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.
<!DOCTYPE html>
<html lang="en">
...
</html>«Отзывчивый» мета-тэг
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Вы можете посмотреть пример этого в действии на странице starter template.
Размер ширины и высоты элемента
Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.
В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:
.selector-for-some-widget {
box-sizing: content-box;
}С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
- @getbootstrap on Twitter.
- The Official Bootstrap Blog.
- the official Slack room.
- Чат с камрадами по Bootstrap. Канал
##bootstrapна сервереirc.freenode.net. - Помощь в реализации Bootstrap 4 на Stackoverflow
bootstrap-4). - При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово
bootstrapв своих пакетах и библиотеках для максимальной видимости.
Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.
Учебное пособие по framework Bootstrap
Twitter Bootstrap один из самых популярных front-end вэб-фреймворков. Это удобный, интуитивно понятный и мощный мобильный первый фреймворк для более быстрой и простой веб-разработки. Он использует HTML, CSS и Javascript. Эти статьи научат вас основам Bootstrap Framework с помощью которого можно создавать любые веб-проекты. Статьи разделены на разделы, которые состоят из основной структуры Bootstrap, Bootstrap CSS, Компоненты слоев Bootstrap и плагины Bootstrap. Каждый из этих разделов содержит темы, связанные с простыми и полезными примерами.
Аудитория
Это руководство было подготовлено для тех, кто имеет базовые знания HTML и CSS и имеет желание развивать веб-сайты и блоги. После завершения этой статьи вы окажитесь на приличном уровне опыта в разработке веб-проектов с использованием Twitter Bootstrap.
Предпосылки
Перед тем, как приступить к изучению Twitter Bootstrap, мы предполагаем, что вы уже знаете об основах HTML и CSS. Если вы не очень хорошо осведомлены об этих понятиях, то вам рекомендуется изучить основы HTML и CSS.
Пример кода на Bootstrap
Используйте его для проверки программ и проверить результат с различными вариантами. Вы можете изменить любой пример и выполнить его в Интернете.
<!DOCTYPE html>
<html lang = "en">
<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>Шаблон Bootstrap 101</title>
<!-- Bootstrap -->
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
<!-- В HTML5 shim и Respond.js для поддержки IE8 элементы HTML5 и медиа запросов -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2>Привет мир!</h2>
<!-- jQuery (необходимые JavaScript плагины для Bootstrap's) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Включает все скомпилированные плагины (ниже), или включает отдельные файлы по мере необходимости -->
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Примеры. Документация · Bootstrap. Версия v4.3.1
Начните быстрый запуск проекта с любым из наших примеров, начиная от использования частей структуры до пользовательских компонентов и макетов.
Пользовательские компоненты
Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.
Прайслист
Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.
Checkout
Пользовательская форма заказа, показывающая компоненты формы и функции проверки.
Продукт
Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Слайдер
Навигационная панель, карусель и новые компоненты.
Блог
Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.
Прижатый футер
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Фреймворк
Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.
Разметка
Несколько примеров макетов сетки с различными уровнями вложенности.
Jumbotron
Макет jumbotron с навигационной панели и базовая система разметки.
Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.
Статическое меню
Супер базовый шаблон со статической навигационной панелью и дополнительным контентом.
Фиксированное меню
Супер базовый шаблон с фиксированной верхней навигационной панелью и дополнительным контентом.
Эксперименты
Примеры, которые ориентированы на будущие функции или методы.
Скользящее меню
Превратите расширяемую навигационную панель в скользящем меню.
Bootstrap Бутстрап Начало работы
Что такое Bootstrap?
- Bootstrap — это бесплатная интерфейсная платформа для быстрой и удобной разработки веб-сайтов
- Bootstrap включает в себя HTML и CSS на основе шаблонов дизайна для типографии, формы, кнопки, таблицы, навигация, модальные, изображения карусели и многие другие, а также дополнительные плагины JavaScript
- Bootstrap также дает вам возможность легко создавать адаптивные дизайны
Что такое Адаптивный веб-дизайн?
Отзывчивый веб-дизайн о создании веб-сайтов, которые автоматически настроить себя хорошо выглядеть на всех устройствах, от небольших телефонов до больших настольных компьютеров.
История начальной загрузки
Bootstrap была разработана Марком Отто и Джейкобом Торнтоном в Твиттере и выпущена в качестве продукта с открытым исходным кодом в августе 2011 на GitHub.
В июне 2014 Bootstrap был проектом No1 на GitHub!
Зачем использовать Bootstrap?
Преимущества Bootstrap:
- Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
- Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
- Мобильный-первый подход: В Bootstrap 3 стили Mobile-First являются частью базовой платформы
- Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)
Где получить Bootstrap?
Существует два способа начать использование Bootstrap на собственном веб-узле.
Вы можете:
- Скачать Bootstrap из getbootstrap.com
- Включить Bootstrap из CDN
Загрузка начальной загрузки
Если вы хотите скачать и хост Bootstrap самостоятельно, перейдите на getbootstrap.com, и следуйте инструкциям там.
Bootstrap CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его в CDN (сеть доставки контента).
Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:
MaxCDN:
<!— jQuery library —>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>
<!— Latest compiled JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script>
Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали Bootstrap из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посеща
Bootstrap 3: на Русском
Bootstrap можно скачать в двух формах — скомпилированной, где все файлы аккуратно разложенны логически по папкам и поставляются в минифицированной и читабельной форме, и не-скомпилированной в виде исходного кода.
Требуется jQuery
Пожалуйста имейте ввиду что все JavaScript-плагины требуют jQuery для работы, как в примере базовый шаблон. Уточните в bower.json какая версия jQuery поддерживается.
Скомпилированные файлы
После скачивания Вы найдете следующие файлы, логически объединенные в папки, файлы поставляются в минифицированных, и нет версиях. Структура скаченного архива:
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.*) файлами. Шрифт от Glyphicons так же включен в стандартный набор Bootstrap.
Исходный код
Исходный код Bootstrap’а так же включает в себя скомпилированные CSS, JavaScript файлы, и шрифты, но в дополнение Вы получаете исходники в виде LESS-файлов, JavaScript, и документацию. Обычно структура архива с исходным кодом выглядит след. образом:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
├── docs-assets/
├── examples/
└── *.html
Папки less/, js/, и fonts/ содержат исходный код для CSS, JS, и шрифтов. Папка dist/ содержит скомпилированный вариант исходного кода. Папки docs-assets/, examples/, и все *.html файлы относятся к документации по Bootstrap 3.
Bootstrap Бутстрап 4 Get Started
Что такое Bootstrap?
- Bootstrap — это бесплатная интерфейсная платформа для быстрой и удобной разработки веб-сайтов
- Bootstrap включает в себя HTML и CSS на основе шаблонов дизайна для типографии, формы, кнопки, таблицы, навигация, модальные, изображения карусели и многие другие, а также дополнительные плагины JavaScript
- Bootstrap также дает вам возможность легко создавать адаптивные дизайны
Что такое Адаптивный веб-дизайн?
Отзывчивый веб-дизайн о создании веб-сайтов, которые автоматически настроить себя хорошо выглядеть на всех устройствах, от небольших телефонов до больших настольных компьютеров.
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.
Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.
Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.
Поддержка значков дропппед: Bootstrap 4 не поддерживает BS3 глификонс. Используйте Шрифт-Awesome или другие библиотеки значков вместо.
Зачем использовать Bootstrap?
Преимущества Bootstrap:
- Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
- Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
- Мобильный-первый подход: В Bootstrap, мобильные-First стили являются частью основной платформы
- Совместимость с браузером: Bootstrap 4 совместима со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10 +, EDGE, Safari и Opera)
Где получить Bootstrap 4?
Существует два способа начать использование Bootstrap 4 на собственном веб-узле.
Вы можете:
- Включить Bootstrap 4 из CDN
- Скачать Bootstrap 4 из getbootstrap.com
Bootstrap 4 CDN
Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его в CDN (сеть доставки контента).
Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:
MaxCDN:
<!— jQuery library —>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>
<!— Popper JS —>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>
<!— Latest compiled JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script>
Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже скачали Bootstrap 4 из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посеща
.active | Добавление цвета белого текста к активной ссылке в навигационной области . | Navbar | |
.active | Добавление синего цвета фона к элементу активного списка в группе списков | List Groups | |
.active | Добавление темно-синего цвета фона для имитации нажатой кнопки | Buttons | |
.active | Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке | Dropdowns | |
.active | Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) | Pagination | |
.active | Отображает/показывает текущий элемент карусели | Carousel | |
.alert | Создает окно сообщения предупреждения | Alerts | |
.alert-danger | Тревога. Указывает на опасное или потенциально отрицательное действие | Alerts | |
.alert-dark | Темная тревога. Темно-серый окно оповещения | Alerts | |
.alert-dismissible | Указывает закрывающееся окно оповещения. Вместе с .close классом этот класс используется для закрытия оповещения (добавляет дополнительные отступы) | Alerts | |
.alert-heading | Добавляет color:inherit к указанному элементу | Alerts | |
.alert-info | Синее оповещение. Указывает нейтральное информативное изменение или действие | Alerts | |
.alert-light | Сигнал тревоги. Светлая серая коробка оповещения | Alerts | |
.alert-link | Используется на ссылки внутри оповещения для обеспечения соответствия цветные ссылки | Alerts | |
.alert-primary | Синяя тревога. Указывает на важное действие | Alerts | |
.alert-secondary | Серый сигнал тревоги. Указывает на «менее» важное действие | Alerts | |
.alert-success | Зеленая тревога. Указывает на успешное или положительное действие | Alerts | |
.alert-warning | Желтый сигнал тревоги. Указывает на осторожность следует принимать с этим действием | Alerts | |
.align-baseline | Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию | Utilities | |
.align-bottom | Элемент выравнивается по нижнему элементу в строке | Utilities | |
.align-middle | Элемент помещается в середину |
Bootstrap Начало работы
Что такое Bootstrap?
- Bootstrap — это бесплатная интерфейсная среда для более быстрой и простой веб-разработки
- Bootstrap включает шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, таблиц, навигации, модальных окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript
- Bootstrap также дает вам возможность легко создавать адаптивный дизайн.
Что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются
сами по себе, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.
Пример начальной загрузки
My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!
Столбец 1
Lorem ipsum
dolor ..
Колонка 2
Lorem ipsum
dolor ..
Колонка 3
Lorem ipsum
долор..
Попробуй сам »
История начальной загрузки
Bootstrap был разработан Марком Отто и Джейкобом Торнтоном в Twitter и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.
В июне 2014 года Bootstrap был проектом №1 на GitHub!
Зачем использовать Bootstrap?
Преимущества бутстрапа:
- Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
- Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
- Подход, ориентированный на мобильные устройства: В Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью базовой структуры
- Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera)
Где взять Bootstrap?
Есть два способа начать использовать Bootstrap на вашем собственном веб-сайте.
Вы можете:
- Загрузите Bootstrap с getbootstrap.com
- Включить бутстрап из CDN
Загрузка Bootstrap
Если вы хотите загрузить и разместить Bootstrap самостоятельно, перейдите на
getbootstrap.com,
и следуйте инструкциям там.
Загрузочный CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его из CDN (сети доставки контента).
MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:
Макс.CDN:
< ! - Последний скомпилированный JavaScript ->
Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали
Bootstrap от MaxCDN при посещении
другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки.
Кроме того, большинство CDN гарантируют, что как только пользователь запросит у него файл, он будет обслужен.
с ближайшего к ним сервера, что также сокращает время загрузки.
jQuery
Bootstrap использует jQuery для подключаемых модулей JavaScript (таких как модальные окна, всплывающие подсказки и т. Д.). Однако, если вы просто используете
CSS часть Bootstrap, вам не нужен jQuery.
Создание первой веб-страницы с помощью Bootstrap
1.Добавьте тип документа HTML5
Bootstrap использует элементы HTML и свойства CSS, требующие
тип документа HTML5.
Всегда указывайте тип документа HTML5 в начале
страницу вместе с атрибутом lang и правильным набором символов:
2. Bootstrap 3 предназначен для мобильных устройств
Bootstrap 3 предназначен для работы с мобильными устройствами.Мобильные стили:
часть основной структуры.
Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри
элемент:
Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана.
устройства (который зависит от устройства).
Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы
браузером.
3. Контейнеры
Bootstrap также требует наличия содержащего элемента для обертывания содержимого сайта.
Есть два класса контейнеров на выбор:
- Класс
.containerпредоставляет отзывчивый контейнер фиксированной ширины - Класс
.container-fluidпредоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра
Две основные страницы начальной загрузки
В следующем примере показан код базовой страницы Bootstrap (с адаптивным контейнером фиксированной ширины):
Пример
Пример начальной загрузки
Моя первая страница начальной загрузки
Это текст.