Разное

Bootstrap 4 download: Download · Bootstrap

08.08.2021

Содержание

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 из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки. Кроме того, большинство CDN будет убедиться, что после того, как пользователь запрашивает файл из него, он будет обслуживаться от ближайшего к ним сервера, что также приводит к более быстрой загрузке времени.

jQuery и Поппер?
Bootstrap 4 использует jQuery и Поппер. js для JavaScript компонентов (таких как модальные, всплывающие подсказки, Попов и т.д.). Однако, если вы просто используете CSS часть Bootstrap, вы не нуждаетесь в них.

Show components that require jQuery »
  • Закрываемые оповещения
  • Кнопки и флажки/переключатели для переключения состояний
  • Карусель для слайдов, элементов управления и индикаторов
  • Свертывание для переключения содержимого
  • Выпадающие (также требуется Поппер. js для идеального позиционирования)
  • Модальные (открытые и закрытые)
  • Навигационная (для складных меню)
  • Подсказка и всплывающие подсказки (также требует Поппер. js для идеального позиционирования)
  • Скроллспи для поведения прокрутки и обновления навигации


Создание первой веб-страницы с помощью Bootstrap 4

1. Добавление документа HTML5

Bootstrap 4 использует HTML-элементы и свойства CSS, которые требуют документа HTML5.

Всегда включайте в начало страницы тег документа HTML5 вместе с атрибутом lang и правильным набором символов:

<!DOCTYPE html>
<html lang=»en»>
  <head>
    <meta charset=»utf-8″>
  </head>
</html>

2. Bootstrap 4-первый мобильный

Bootstrap 4 предназначен для реагирования на мобильные устройства. Стили мобильных устройств являются частью базовой платформы.

Чтобы обеспечить правильную визуализацию и масштабирование касания, добавьте следующий <meta> тег внутри <head> элемента:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

width=device-widthдеталь устанавливает ширину страницы для того чтобы последовать за шириной экрана прибора (которая будет меняться в зависимости от прибора).

initial-scale=1деталь задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

3. контейнеры

Bootstrap 4 также требует содержащего элемента для переноса содержимого сайта.

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

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

Два основных Bootstrap 4 страницы

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

Пример контейнера




  Bootstrap 4 Example
 
 
 
 
 
 

<div>
  <h2>My First Bootstrap Page</h2>
  <p>This is some text.</p>
</div>

</body>
</html>

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

Пример с контейнерной жидкостью




  Bootstrap 4 Example
 
 
 
 
 
 

<div>
  <h2>My First Bootstrap Page</h2>
  <p>This is some text. </p>
</div>

</body>
</html>


Bootstrap 4 — Настройка среды

Вы можете начать использовать Bootstrap 4 на своем веб-сайте, включив его из CDN (Content Delivery Network) или загрузив с веб- сайта getbootstrap.com

.

Использование CDN

Bootstrap 4 можно использовать на веб-сайте, включив его из сети доставки контента .

Используйте скомпилированный ниже CDN CSS и JS Bootstrap в своем проекте.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs. cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Включите CDN-версии jQuery и Popper.js (Bootstrap 4 использует jQuery и Popper.js для использования таких компонентов JavaScript, как модалы, всплывающие подсказки, всплывающие окна и т. Д.) Перед минимизированным Bootstrap JavaScript , если вы используете скомпилированную версию JavaScript.

Ниже приведены некоторые компоненты, которые требуют JQuery —

  • Используется для закрываемых предупреждений

  • Переключите состояния с помощью кнопок и флажков / переключателей и сверните для переключения содержимого

  • Карусель для слайдов, элементов управления и индикаторов

  • Dropdowns (для идеального позиционирования используется Popper. js )

  • Откройте и закройте модалы

  • Для свертывания Навбара

  • Всплывающие подсказки и всплывающие подсказки (для идеального позиционирования используется Popper.js )

Используется для закрываемых предупреждений

Переключите состояния с помощью кнопок и флажков / переключателей и сверните для переключения содержимого

Карусель для слайдов, элементов управления и индикаторов

Dropdowns (для идеального позиционирования используется

Popper.js )

Откройте и закройте модалы

Для свертывания Навбара

Всплывающие подсказки и всплывающие подсказки (для идеального позиционирования используется Popper.js )

Загрузка Bootstrap 4

Вы можете скачать Bootstrap 4 с https://getbootstrap.com/docs/4.1/getting-started/download/ . Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже —

Здесь вы можете увидеть две кнопки —

  • Загрузка — щелкнув по этой ссылке, вы можете загрузить предварительно скомпилированные и свернутые версии CSS и JavaScript Bootstrap. Никакая документация или оригинальные файлы исходного кода не включены.

  • Скачать исходный код — нажав на него, вы можете получить последнюю версию Bootstrap SCSS, исходный код JavaScript и файлы документации.

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

Скачать исходный код — нажав на него, вы можете получить последнюю версию Bootstrap SCSS, исходный код JavaScript и файлы документации.

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

Файловая структура

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

Как только скомпилированная версия Bootstrap 4 будет загружена, извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:

Как видите, есть скомпилированные CSS и JS (bootstrap. *), А также скомпилированные и минимизированные CSS и JS (bootstrap.min. *).

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

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

  • Файлы в js / и scss / являются исходным кодом для Bootstrap CSS и JavaScript.

  • Папка dist / включает все, что перечислено в разделе предварительно скомпилированных загрузок выше.

  • Документы / examples / , содержит исходный код документации Bootstrap и примеры использования Bootstrap.

Файлы в js / и scss / являются исходным кодом для Bootstrap CSS и JavaScript.

Папка dist / включает все, что перечислено в разделе предварительно скомпилированных загрузок выше.

Документы / examples / , содержит исходный код документации Bootstrap и примеры использования Bootstrap.

Создание первой веб-страницы с помощью Bootstrap 4

Приведенный ниже пример определяет простую веб-страницу Bootstrap 4 —

пример

Live Demo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h3>Hello, world!!! Welcome to Tutorialspoint...</h3>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4. 1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат —

Bootstrap 4. Установка.

Вы здесь: Главная — CSS — CSS Основы — Bootstrap 4. Установка.

Всем привет! В предыдущей статье мы рассмотрели, что такое Boostrap и зачем он нужен, а в этой рассмотрим, как установить и начать использовать Bootstrap 4.

Перейдите на официальный сайт и скачайте Bootstrap 4, нажав кнопку Download. Вы найдете множество самых разных способов для скачивания и установки этого фреймворка: npm, composer, bower и другие. Также есть возможность скачать только некоторые нужные вам файлы, скачать исходники и так далее.

Вы можете выбрать любой из способов и скачать фреймворк на свой компьютер или зайти в раздел Introduction(справа в колонке на сайте), найти там раздел Starter template, скопировать весь код, написанный там, создать папку, где мы будем работать с фреймворком, в ней создать файл index. html и туда вставить скопированный ранее код.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
   <h2>Hello, world!</h2>

   <!-- jQuery first, then Tether, then Bootstrap JS. -->
   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
   <script src="https://cdnjs. cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

Коротко о том, что здесь происходит: это базовый шаблон, в котором подключены все нужные CSS и JS файлы с помощью CDN, а также выставлен мета-тег viewport для мобильных устройств. В принципе, это все. Благодаря CDN нам не нужно скачивать все необходимые файлы, а нужен только интернет.

На этом сегодня все, мы рассмотрели, как установить Bootstrap 4.

Спасибо за внимание!

  • Создано 22.02.2017 17:00:00
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

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


Что такое Bootstrap?

  • Bootstrap — это бесплатная интерфейсная среда для более быстрой и простой веб-разработки
  • Bootstrap включает шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, таблиц, навигации, модальных окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript
  • Bootstrap также дает вам возможность легко создавать адаптивный дизайн

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются сами, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.

Bootstrap 4, пример


Мой первый бутстрап Страница
Измените размер этой отзывчивой страницы, чтобы увидеть эффект!




Столбец 1


Lorem ipsum dolor . .




Колонка 2


Lorem ipsum dolor ..




Колонка 3


Lorem ipsum долор..




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

Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в Это.

Поддержка удаленных значков : Bootstrap 4 не поддерживает глификоны BS3. Вместо этого используйте Font-Awesome или другие библиотеки значков.


Зачем нужен Bootstrap?

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

  • Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Подход, ориентированный на мобильные устройства: В Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой структуры
  • Совместимость с браузером: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera)

Где взять Bootstrap 4?

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

Вы можете:

  • Включить Bootstrap 4 из CDN
  • Загрузите Bootstrap 4 с сайта getbootstrap.com


Бутстрап 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

Макс.CDN:




Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже скачали Bootstrap 4 от MaxCDN при посещении другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки. Кроме того, большинство CDN гарантируют, что после того, как пользователь запросит у него файл, он будет обработан. с ближайшего к ним сервера, что также сокращает время загрузки.

jQuery и Поппер?
Bootstrap 4 использует jQuery и Popper.js для Компоненты JavaScript (например, модальные окна, всплывающие подсказки, всплывающие окна и т. Д.). Однако, если вы просто используете CSS часть Bootstrap, они вам не нужны.

Показать компоненты, требующие jQuery »
  • Закрытые оповещения
  • Кнопки и флажки / переключатели для переключения состояний
  • Карусель для слайдов, элементов управления и индикаторов
  • Свернуть для переключения содержимого
  • Выпадающих списков (для идеального позиционирования также требуется Popper.js)
  • Модальные окна (открытые и закрытые)
  • Навбар (для раскрывающихся меню)
  • Всплывающие подсказки и всплывающие окна (также требуется Popper.js для идеального позиционирования)
  • Scrollspy для прокрутки и обновлений навигации


Загрузка Bootstrap 4

Если вы хотите загрузить и разместить Bootstrap 4 самостоятельно, перейдите по ссылке https://getbootstrap. com/, и следуйте инструкциям там.


Создание первой веб-страницы с помощью Bootstrap 4

1. Добавьте тип документа HTML5

Bootstrap 4 использует элементы HTML и свойства CSS, требующие тип документа HTML5.

Всегда включайте тип документа HTML5 в начало страницу вместе с атрибутом lang и правильным набором символов:






2. Bootstrap 4 предназначен для мобильных устройств

Bootstrap 4 разработан, чтобы реагировать на мобильные устройства. Стили, ориентированные на мобильные устройства: часть основной структуры.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри элемент:

Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана. устройства (который зависит от устройства).

Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

3. Контейнеры

Bootstrap 4 также требует наличия содержащего элемента для обертывания содержимого сайта.

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

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

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

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

Пример контейнера




Бутстрап 4 Пример







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


Это текст.



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

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

Пример жидкости в контейнере




Бутстрап 4 Пример







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


Это текст.



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

Скачать · Bootstrap

Загрузочный файл v4.0.0-alpha.2 доступен для загрузки несколькими способами, включая некоторые из ваших любимых менеджеров пакетов. Выберите один из вариантов ниже, чтобы получить именно то, что вам нужно.

Скомпилировано

Загрузите только скомпилированные и минимизированные CSS и JavaScript. Не содержит документации или исходных файлов.

Скоро в продаже!

Менеджеры пакетов

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

Внимание! Не все менеджеры пакетов опубликовали альфа-версию v4, но мы должны выпустить их в ближайшее время!

н / мин

Установите Bootstrap в приложения, работающие на Node, с пакетом npm:

  $ npm install [email protected]  

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

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

  • sass — путь к основному исходному файлу Sass Bootstrap
  • style — путь к неминифицированному CSS Bootstrap, который был предварительно скомпилирован с использованием настроек по умолчанию (без настройки)

Рубиновые камни

Установите Bootstrap в свои приложения Ruby с помощью Bundler (рекомендуется , ) и RubyGems, добавив следующую строку в свой Gemfile :

  gem 'bootstrap', '~> 4.0.0.alpha3 ' 

В качестве альтернативы, если вы не используете Bundler, вы можете установить гем, выполнив следующую команду:

  $ gem install bootstrap -v 4.0.0.alpha3  

Для получения дополнительных сведений см. README для драгоценного камня.

Метеор

  $ meteor add twbs: [email protected]=4.0.0-alpha.2  

Composer

Вы также можете установить и управлять Sass и JavaScript в Bootstrap, используя Composer:

  $ композитору требуется twbs / bootstrap  

Bower

Установите и управляйте Sass и JavaScript в Bootstrap с помощью Bower.

  $ bower install bootstrap # v4.0.0-alpha.2  

NuGet

Если вы разрабатываете в .NET, вы также можете установить CSS или Sass и JavaScript для Bootstrap и управлять ими с помощью NuGet:

  PM> Установка-пакет начальной загрузки -Pre
PM> Install-Package bootstrap.sass -Pre  

-Pre требуется, пока Bootstrap v4 не получит стабильную версию.

Пользовательские сборки

Нужна только часть CSS или JS Bootstrap? Используйте одну из настраиваемых сборок, чтобы получить именно то, что вам нужно.

Перезагрузка

Включает переменные / миксины, нормализацию и перезагрузку. Нет JavaScript.

Скачать

Только сетка

Включает переменные / миксины и нашу сетку. Нет JavaScript.

Скачать

Flexbox

Весь Bootstrap с включенным flexbox и более низкой поддержкой браузера .

Скачать

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

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

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

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

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

Пример




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






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


Это текст.



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

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

Пример




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






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


Это текст.



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

бутстрап — npm

Бутстрап

Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
Ознакомиться с документацией Bootstrap »

Сообщить об ошибке · Функция запроса · Темы · Блог

Бутстрап 4

Наша ветка по умолчанию предназначена для разработки нашего предстоящего выпуска Bootstrap 5. Перейдите в ветку v4-dev , чтобы просмотреть readme, документацию и исходный код для Bootstrap 4.

Содержание

Быстрый старт

Доступно несколько вариантов быстрого запуска:

  • Скачать последнюю версию
  • Клонировать репо: git clone https: // github.com / twbs / bootstrap.git
  • Установить с помощью npm: npm install bootstrap
  • Установить с пряжей: пряжа добавить бутстрап
  • Установить с помощью Composer: композитору требуется twbs / bootstrap: 5.0.0
  • Установить с помощью NuGet: CSS: Загрузочный пакет установочного пакета Sass: Установочный пакет bootstrap.sass

Прочтите страницу «Приступая к работе», чтобы получить информацию о содержимом среды, шаблонах, примерах и многом другом.

Статус

Что включено

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

  бутстрап /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── бутстрап-сетка.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── бутстрап.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
  

Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). Исходные карты ( bootstrap. *. map ) доступны для использования с некоторыми инструментами разработчика браузеров. Связанные файлы JS ( bootstrap.bundle.js и минифицированный bootstrap.bundle.min.js ) включают Popper.

Ошибки и запросы функций

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

Документация

Документация

Bootstrap, включенная в это репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https: // getbootstrap.com /. Документы также можно запускать локально.

Поиск по документации осуществляется с помощью DocSearch Algolia. Работаете над поиском? Обязательно установите debug: true в site / assets / js / search.js .

Локальная работа с документацией

  1. Запустите npm install , чтобы установить зависимости Node.js, включая Hugo (конструктор сайтов).
  2. Запустите npm run test (или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации.
  3. Из корневого каталога / bootstrap запустите npm run docs-serve в командной строке.
  4. Откройте в браузере http: // localhost: 9001/ и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Документация к предыдущим выпускам

Вы можете найти все наши документы по предыдущим выпускам на https://getbootstrap.com/docs/versions/.

Предыдущие выпуски и документация к ним также доступны для загрузки.

Вклад

Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по разработке.

Более того, если ваш пулреквест содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.

Настройки редактора

доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /.

Сообщество

Получайте обновления о разработке Bootstrap и общайтесь с разработчиками проекта и членами сообщества.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации
  • можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Управление версиями

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

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

Создатели

Марк Отто

Джейкоб Торнтон

Спасибо

Спасибо BrowserStack за предоставленную инфраструктуру, которая позволяет нам тестировать в реальных браузерах!

Спонсоры

Поддержите этот проект, став спонсором.Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Сторонники

Спасибо всем нашим спонсорам! 🙏 [Стать спонсором]

Авторское право и лицензия

Код

и авторские права на документацию 2011–2021 гг. Авторы начальной загрузки и Twitter, Inc. Код выпущены под лицензией MIT. Документы выпущены по лицензии Creative Commons.

twbs / bootstrap: самый популярный фреймворк HTML, CSS и JavaScript для разработки адаптивных мобильных проектов в Интернете.

Бутстрап

Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
Ознакомиться с документацией Bootstrap »

Сообщить об ошибке · Функция запроса · Темы · Блог

Бутстрап 5

Наша ветка по умолчанию предназначена для разработки нашего выпуска Bootstrap 5. Перейдите в ветку v4-dev , чтобы просмотреть readme, документацию и исходный код для Bootstrap 4.

Содержание

Быстрый старт

Доступно несколько вариантов быстрого запуска:

  • Скачать последнюю версию
  • Клонировать репо: git clone https: // github.com / twbs / bootstrap.git
  • Установить с помощью npm: npm install bootstrap
  • Установить с пряжей: пряжа добавить бутстрап
  • Установить с помощью Composer: композитору требуется twbs / bootstrap: 5.0.0
  • Установить с помощью NuGet: CSS: Загрузочный пакет установочного пакета Sass: Установочный пакет bootstrap.sass

Прочтите страницу «Приступая к работе», чтобы получить информацию о содержимом среды, шаблонах, примерах и многом другом.

Статус

Что включено

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

  бутстрап /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── бутстрап-сетка.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── бутстрап.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
  

Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). Исходные карты ( bootstrap. *. map ) доступны для использования с некоторыми инструментами разработчика браузеров. Связанные файлы JS ( bootstrap.bundle.js и минифицированный bootstrap.bundle.min.js ) включают Popper.

Ошибки и запросы функций

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

Документация

Документация

Bootstrap, включенная в это репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https: // getbootstrap.com /. Документы также можно запускать локально.

Поиск по документации осуществляется с помощью DocSearch Algolia. Работаете над поиском? Обязательно установите debug: true в site / assets / js / search.js .

Локальная работа с документацией

  1. Запустите npm install , чтобы установить зависимости Node.js, включая Hugo (конструктор сайтов).
  2. Запустите npm run test (или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации.
  3. Из корневого каталога / bootstrap запустите npm run docs-serve в командной строке.
  4. Откройте в браузере http: // localhost: 9001/ и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Документация к предыдущим выпускам

Вы можете найти все наши документы по предыдущим выпускам на https://getbootstrap.com/docs/versions/.

Предыдущие выпуски и документация к ним также доступны для загрузки.

Содействие

Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по разработке.

Более того, если ваш пулреквест содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.

Настройки редактора

доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /.

Сообщество

Получайте обновления о разработке Bootstrap и общайтесь с разработчиками проекта и членами сообщества.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации
  • можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Версии

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

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

Создатели

Марк Отто

Джейкоб Торнтон

Спасибо

Спасибо BrowserStack за предоставленную инфраструктуру, которая позволяет нам тестировать в реальных браузерах!

Спонсоры

Поддержите этот проект, став спонсором.Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Поддерживающие

Спасибо всем нашим спонсорам! 🙏 [Стать спонсором]

Авторские права и лицензия

Код

и авторские права на документацию 2011–2021 гг. Авторы начальной загрузки и Twitter, Inc. Код выпущены под лицензией MIT. Документы выпущены по лицензии Creative Commons.

Как установить Bootstrap 4

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

Недавно была запущена обновленная версия фреймворка Bootstrap, известная как Bootstrap 4.2.1. Обновленный фреймворк содержит ряд новых функций и исправлений ошибок.Вы можете узнать больше об изменениях в последней версии фреймворка Bootstrap 4, проверив Bootstrap 3 Vs. Bootstrap 4 Что нового в статье ?

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

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

Что следует помнить

Мы настоятельно рекомендуем вам посетить официальный сайт Bootstrap, прежде чем начинать процесс установки. Это позволит вам узнать больше о фреймворке и даст вам общее представление о том, как его установить. Фактически, вы сможете увидеть кнопку «Загрузить и начать» на официальном сайте Bootstrap.

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

Стандартная загрузка

Большинство пользователей предпочитают использовать метод стандартной загрузки, когда дело доходит до установки среды Bootstrap. Это довольно простой метод, с помощью которого вы можете легко загрузить комбинированные и минимизированные плагины JavaScript и пакеты CSS, которые впоследствии можно будет использовать в своем проекте веб-дизайна.

Файлы начальной загрузки начнутся автоматически загружаться, как только вы нажмете кнопку «Загрузить». После завершения загрузки вы получите zip-папку, содержащую скомпилированные и минифицированные версии подключаемых модулей JavaScript и пакетов CSS.Вам нужно будет распаковать zip-папку, если вы хотите использовать эти файлы в своем следующем проекте.

После извлечения папки CSS вы сможете увидеть следующие файлы.

В папке JS доступны следующие файлы.

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

  бутстрап /
├── css /
│ ├── бутстрап.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js /
    ├── bootstrap.js
    └── bootstrap.min.js  

Исходные файлы

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

Открыв исходный файл, вы увидите следующие папки.

Вот краткое представление о том, как на самом деле выглядит файловая структура для загрузки исходного кода.

  бутстрап /
├── dist /
│ ├── css /
│ └── js /
├── документы /
│ └── примеры /
├── js /
└── scss /  

Сети доставки контента

Еще один простой способ, с помощью которого вы можете включить платформу Bootstrap 4 в свои проекты проектирования, — это CDNS или сети доставки контента. Если вы используете CDN, вам даже не нужно загружать Bootstrap на свой компьютер.Все, что вам нужно сделать, это просто добавить следующий код в существующий HTML-код.

 
 

Менеджеры пакетов

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

npm

Вы сможете легко и быстро установить платформу Bootstrap с пакетом npm, просто введя следующую команду.

 npm install bootstrap 

RubyGems

Пользователи, которые хотят установить Bootstrap 4 в свои приложения Ruby с помощью RubyGems и Bundler, могут легко сделать это, добавив следующую команду в Gemfile.

 gem 'bootstrap', '~> 4.2.1' 

Некоторые пользователи часто предпочитают не использовать Bundler. В таком случае вам следует ввести следующую команду.

 $ gem install bootstrap -v 4.2.1 

Composer

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

 $ composer требуется twbs / bootstrap: 4.2.1 

NuGet

Некоторые разработчики часто используют.Net для своих проектов. Если вы один из них, то следующие команды в Nuget можно использовать для установки Bootstrap JavaScript, Sass или CSS.

 Install-Package bootstrap 
 Install-Package bootstrap.sass 

Если у вас все еще есть сомнения относительно того, как установить платформу Bootstrap, то лучше всего связаться с нашими опытными техническими специалистами. Однако пользователи, которые уже поняли это, но нуждаются в руководстве по использованию фреймворка Bootstrap, должны обязательно ознакомиться со статьей How to Use Bootstrap with HTML .Это даст вам четкое представление о том, как создавать веб-страницы и веб-сайты с помощью платформы Bootstrap.

BootstrapDash стремится предоставить лучший, эффективный и качественный бесплатный и премиальный шаблон панели администрирования начальной загрузки, чтобы ваше веб-приложение запускалось легко и быстро. Посетите наш веб-сайт, чтобы узнать больше о наших продуктах. Хотите создать собственный потрясающий веб-сайт? Начать обучение

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

Из этого туториала Вы узнаете, как создать веб-страницу с помощью фреймворка Bootstrap.

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

Из этого туториала Вы узнаете, как легко создать веб-страницу с помощью Bootstrap. Но прежде чем начать, убедитесь, что у вас есть редактор кода и некоторые практические знания HTML и CSS.

Если вы только начинаете заниматься веб-разработкой, начните учиться здесь »

Что ж, давайте приступим к созданию нашей первой веб-страницы на базе Bootstrap.

Создание вашей первой веб-страницы с помощью Bootstrap

Теперь мы собираемся создать базовый шаблон Bootstrap, включив файлы Bootstrap CSS и JS, а также другие зависимости JavaScript, такие как jQuery и Popper.js через CDN.

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

Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите простую веб-страницу на базе Bootstrap, которая отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание простого HTML-файла

Откройте ваш любимый редактор кода и создайте новый HTML-файл. Начните с пустого окна, введите следующий код и сохраните его как «basic.html» на рабочем столе.

  


    
    
     Базовый HTML-файл 


    

Привет, мир!

Совет: Всегда включайте тег viewport внутри раздела документа, чтобы включить масштабирование касанием и обеспечить правильную визуализацию на мобильных устройствах.

Шаг 2. Превращение этого HTML-файла в шаблон начальной загрузки

Чтобы сделать этот простой HTML-файл шаблоном Bootstrap, просто включите файлы Bootstrap CSS и JS, а также необходимые jQuery и Popper.js, используя их ссылки CDN.

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

  


    
    
     Базовый шаблон начальной загрузки 
    
    


    

Привет, мир!

И все готово! После добавления файлов CSS и JS Bootstrap и необходимых jQuery и Popper.js, мы можем приступить к разработке любого сайта или приложения с помощью фреймворка Bootstrap.

Атрибуты целостность и crossorigin были добавлены к ссылкам CDN для реализации целостности субресурсов (SRI). Это функция безопасности, которая позволяет снизить риск атак, исходящих из скомпрометированных сетей CDN, за счет того, что файлы, получаемые вашим веб-сайтом (из CDN или где-либо еще), были доставлены без неожиданных или злонамеренных изменений.Он работает, позволяя вам предоставить криптографический хеш, которому должен соответствовать выбранный файл.

Совет: Если посетитель вашего веб-сайта уже загрузил файлы CSS и JS Bootstrap с того же CDN при посещении других сайтов, он будет загружен из кеша браузера вместо повторной загрузки, что приведет к более быстрому времени загрузки. .

Шаг 3: Сохранение и просмотр файла

Теперь сохраните файл на рабочем столе как «шаблон начальной загрузки.html ".

Чтобы открыть этот файл в веб-браузере, перейдите к нему, затем щелкните его правой кнопкой мыши и выберите свой любимый веб-браузер. Кроме того, вы можете открыть свой браузер и перетащить в него этот файл.

Примечание: Важно, чтобы было указано расширение .html , некоторые текстовые редакторы, такие как Блокнот в Windows, автоматически сохранят его как .txt в противном случае.


Загрузка файлов начальной загрузки

Кроме того, вы также можете загрузить файлы CSS и JS Bootstrap с их официального сайта и включить их в свой проект. Для загрузки доступны две версии: скомпилированных файлов Bootstrap и исходных файлов Bootstrap . Вы можете скачать файлы Bootstrap 4 отсюда.

Скомпилированная загрузка содержит скомпилированные и уменьшенные версии файлов CSS и JavaScript для более быстрой и простой веб-разработки.Однако скомпилированная версия не включает никаких дополнительных зависимостей JavaScript, таких как jQuery и Popper.js. Принимая во внимание, что исходный код для загрузки содержит исходные файлы для всех CSS и JavaScript, а также локальную копию документов.

Загрузите и разархивируйте скомпилированный Bootstrap. Теперь, если вы заглянете в папки, вы обнаружите, что они содержат скомпилированные файлы CSS и JS ( bootstrap. * ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min. * ).Используйте файлы bootstrap.min.css и bootstrap.min.js .

Использование уменьшенной версии файлов CSS и JS улучшит производительность вашего веб-сайта и сэкономит драгоценную пропускную способность из-за меньшего размера HTTP-запросов и загрузки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *