Как подключить бутстрап к сайту


Подключение фреймворка Bootstrap к сайту

Начало работы · Bootstrap

Bootstrap (в настоящее время v3.3.7) имеет несколько простых способов быстро начать работу, каждый из которых подходит для разных уровней навыков и вариантов использования. Прочтите, чтобы узнать, что подходит именно вам.

Bootstrap

Скомпилированные и минимизированные CSS, JavaScript и шрифты. Никакая документация или исходные файлы не включены.

Загрузить Bootstrap

Исходный код

Source Less, файлы JavaScript и шрифтов, а также наши документы. Требуется компилятор Less и некоторая настройка.

Загрузить исходный код

Bootstrap CDN

Ребята из MaxCDN любезно предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти ссылки Bootstrap CDN.

      

 

Вы также можете установить Bootstrap с помощью npm:

  $ npm install bootstrap @ 3  

require ('bootstrap') загрузит все плагины Bootstrap jQuery в объект jQuery.Сам модуль bootstrap ничего не экспортирует. Вы можете вручную загрузить плагины jQuery для Bootstrap по отдельности, загрузив файлы /js/*.js в каталог верхнего уровня пакета.

Bootstrap package.json содержит некоторые дополнительные метаданные под следующими ключами:

Установить с помощью Composer

Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript и шрифтами с помощью Composer:

  $ composer require twbs / bootstrap  

Требуется автопрефиксатор для Less / Sass

Bootstrap использует Autoprefixer для работы с префиксами поставщиков CSS.Если вы компилируете Bootstrap из его исходного кода Less / Sass и не используете наш Gruntfile, вам необходимо самостоятельно интегрировать Autoprefixer в процесс сборки. Если вы используете предварительно скомпилированный Bootstrap или наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрирован в наш Gruntfile.

Bootstrap можно загрузить в двух формах, в которых вы найдете следующие каталоги и файлы, логически группирующие общие ресурсы и предоставляющие как скомпилированные, так и минифицированные варианты.

Требуется jQuery

Обратите внимание, что все плагины JavaScript требуют включения jQuery , как показано в начальном шаблоне. Обратитесь к нашему bower.json , чтобы узнать, какие версии jQuery поддерживаются.

Предварительно скомпилированный Bootstrap

После загрузки распакуйте сжатую папку, чтобы увидеть структуру (скомпилированной) Bootstrap. Вы увидите что-то вроде этого:

  bootstrap / ├── css / │ ├── bootstrap.css │ ├── бутстрап.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js / │ ├── bootstrap.js │ └── bootstrap.min.js └── шрифты / ├── глификоны-халфлинги-regular.eot ├── глификоны-халфлинги-regular.svg ├── глификоны-халфлинги-regular.ttf ├── глификоны-халфлинги-regular.woff └── glyphicons-halflings-regular.woff2 


 

Это самая базовая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте.Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). Исходные карты CSS ( bootstrap. *. Map ) доступны для использования с некоторыми инструментами разработчика браузеров. Включены шрифты из Glyphicons, а также дополнительная тема Bootstrap.

Исходный код Bootstrap

Исходный код Bootstrap для загрузки включает предварительно скомпилированные ресурсы CSS, JavaScript и шрифтов, а также исходный код Less, JavaScript и документацию.В частности, он включает в себя следующее и многое другое:

  bootstrap / ├── меньше / ├── js / ├── шрифты / ├── dist / │ ├── css / │ ├── js / │ └── шрифты / └── документы / └── examples /  

Шрифты less / , js / и / являются исходным кодом для наших шрифтов CSS, JS и иконок (соответственно). Папка dist / включает все, что указано в предварительно скомпилированном разделе загрузки выше. Папка docs / включает исходный код нашей документации и примеров / использования Bootstrap.Кроме того, любой другой включенный файл обеспечивает поддержку пакетов, информацию о лицензии и разработку.

Bootstrap использует Grunt для своей системы сборки с удобными методами работы с фреймворком. Это то, как мы компилируем наш код, запускаем тесты и многое другое.

Установка Grunt

Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (который включает npm). npm означает модули, упакованные в узел, и это способ управления зависимостями разработки через узел.js.

Затем из командной строки:
  1. Установите grunt-cli глобально с помощью npm install -g grunt-cli .
  2. Перейдите в корневой каталог / bootstrap / , затем запустите npm install . npm просмотрит файл package.json и автоматически установит необходимые локальные зависимости, перечисленные там.

По завершении вы сможете запускать различные команды Grunt из командной строки.

Доступные команды Grunt

grunt dist (просто скомпилируйте CSS и JavaScript)

Регенерирует каталог / dist / со скомпилированными и уменьшенными файлами CSS и JavaScript.Как пользователь Bootstrap, вы обычно хотите эту команду.

grunt watch (Watch)

Наблюдает за исходными файлами Less и автоматически перекомпилирует их в CSS всякий раз, когда вы сохраняете изменение.

grunt test (Run tests)

Запускает JSHint и запускает тесты QUnit в PhantomJS.

grunt docs (Сборка и тестирование ресурсов документации)

Строит и тестирует CSS, JavaScript и другие ресурсы, которые используются при локальном запуске документации с помощью пакета exec jekyll serve .

grunt (Создайте абсолютно все и запустите тесты)

Компилирует и минимизирует CSS и JavaScript, создает веб-сайт документации, запускает валидатор HTML5 для документов, восстанавливает ресурсы Customizer и многое другое. Требуется Джекил. Обычно это необходимо, только если вы взламываете сам Bootstrap.

Устранение неполадок

Если у вас возникнут проблемы с установкой зависимостей или запуском команд Grunt, сначала удалите каталог / node_modules / , созданный npm.Затем повторно запустите npm install .

Начните с этого базового HTML-шаблона или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их под свои нужды.

Скопируйте приведенный ниже HTML-код, чтобы начать работу с минимальным документом Bootstrap.

          Шаблон Bootstrap 101   <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей ">         

Привет, мир!

Создавайте базовый шаблон, указанный выше, с множеством компонентов Bootstrap. Мы рекомендуем вам настроить и адаптировать Bootstrap в соответствии с потребностями вашего индивидуального проекта.

Получите исходный код для каждого примера ниже, загрузив репозиторий Bootstrap.Примеры можно найти в docs / examples /

.

Bootstrap Начало работы


Что такое 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?

Преимущества бутстрапа:


Где взять Bootstrap?

Есть два способа начать использовать Bootstrap на вашем собственном веб-сайте.

Вы можете:


Загрузка 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 также требует наличия содержащего элемента для обертывания содержимого сайта.

Есть два класса контейнеров на выбор:

  1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра

Две основные страницы начальной загрузки

В следующем примере показан код базовой страницы Bootstrap (с адаптивным контейнером фиксированной ширины):

Пример




Пример начальной загрузки






Моя первая страница начальной загрузки


Это текст.



Попробуй сам "

В следующем примере показан код базовой страницы Bootstrap (с контейнером полной ширины):

Пример




Пример начальной загрузки






Моя первая загрузочная страница


Это текст.



Попробуй сам "

.

веб-хостинг - как начать использовать Bootstrap для создания веб-сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как использовать Bootstrap с HTML

Функции JavaScript некоторых компонентов, таких как раскрывающиеся списки, вкладки и т. Д., Зависят от jQuery и popper.js.

Итак, включите jQuery и popper.js в следующем порядке прямо перед загрузкой файла JavaScript начальной загрузки для правильной работы.