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

Урок 004. Подключение Bootstrap 3 к сайту на Django

Дизайн сайта и его вёрстка являются довольно важными вопросами, и порой хочется разработать сайт с хорошим и интересным дизайном… но… Не все из нас дизайнеры, и ещё меньше хороших дизайнеров. Поэтому мне проще было взять Bootstrap 3, найти хорошую тему оформления для него, а точнее кастомизированный в едином стиле CSS, и не заморачиваясь начать разработку сайта с уже проверенным многими web-мастерами инструментом.

Давайте посмотрим, как обстоит дело с

Bootstrap 3

в

Django

.

django-bootstrap3

Итак, для  Django существует готовое приложение

django-bootstrap3

, которое необходимо установить, подключить, и для использования добавить необходимые компоненты в тег

head

на страницах сайта.

Установка

Установка приложение осуществляется с использованием утилиты

pip,

не забудьте только активировать виртуальное окружение.

pip install django-bootstrap3

Подключение

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

INSTALLED_APPS = [
    ...
    'bootstrap3',
    ...
]

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

Модуль Bootstrap для Django позволяет использовать как готовые формы, без затрат времени на вёрстку, так и просто воспользоваться стилями и библиотекой jQuery, которая используется для данной текущей версии Bootstrap.

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

head.

{% load bootstrap3 %}
<script src="{% bootstrap_jquery_url %}"></script>
{% bootstrap_javascript %}
{% bootstrap_css %}

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

{% load bootstrap3 %}

{# Display a form #}

<form action="/url/to/submit/" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit">
            {% bootstrap_icon "star" %} Submit
        </button>
    {% endbuttons %}
</form>

Для

Django

рекомендую

VDS-сервера хостера Timeweb

.

Как подключить Bootstrap

Возможностей подключения фреймворка bootstrap великое множество. Но в любом случае, необходимо посетить официальный сайт проекта bootstrap (там же представлены все возможные варианты установки). Свежая версия фрейворка bootstrap 4 находится здесь — https://getbootstrap.com/docs/4.3/getting-started/download/. Выбор способа установки фреймворка зависит от вашего желания, опыта или конкретной ситуации.

Вариант 1 (Compiled CSS and JS). Первая ссылка (кнопка Download) содержит готовые к использованию файлы CSS и JavaScript. Это полная сборка, которую удобно использовать для изучения фреймворка, поскольку она содержит полный набор инструментов. Она также годится для использования в проектах, дизайн которых выполнен в стилях заложенных авторами бутсрапа по умолчанию.

Вариант 2 (Source files). Вторая ссылка (кнопка Download source) ведет на исходники файлов. Эта версия подойдет для разработки крупных проектов. Она позволяет изменить стили, цветовую гамму компонентов, выполнить их настройку, но все это достаточно трудозатратно. Перед тем как использовать исходные файлы, их необходимо скомпилировать и минимизировать. Данный процесс можно автоматизировать с помощью Gulp.

Вариант 3 (Bootstrap CDN). Воспользоваться кэшированной версией Bootstrap. На мой взгляд, это самый простой и прагматичный способ (не требуется даже скачивание проекта). Кроме своей простоты он «облегчает» страницы и ускоряет загрузку, поскольку в его основе используется принцип CDN (что такое CDN можно почитать здесь — https://ru.wikipedia.org/wiki/Content_Delivery_Network). При этом, для изменения заложенных разработчиками стилей, можно подключить свой пользовательский CSS

Вариант 4 (Package managers). Воспользоваться одной из систем установки пакетов. Создатели фрейворка bootstrap предлагаю воспользоваться: npm, RubyGems, Composer или NuGet. Все варианты загрузок подробно описаны на странице.

Результатом любого варианта установки будет создание и подключение CSS и JS файлов, которые входят в состав фрейморка. В случае же использование CDN достаточно просто подключить уже готовые файлы CDN (скачивать при этом Bootstrap в проект не нужно).

Кроме самих файлов бутсрап, с большой долей вероятности, вам понадобятся дополнительные инструменты, такие как jQuery, Popper. Их также можно подключить с помощью CDN.

Делается это следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- Не забываем  title, description, кодировка, viewport, icon и т.п.-->

<!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
<!-- При необходимости подключаем пользовательский CSS -->    

</head>
<body>

<!-- Здесь находится ваш контент -->
    
<!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Подключаем плагин Popper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    
<!-- Подключаем Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

Подключаем и наслаждаемся прекрасным фрейворком bootstrap

Установка и знакомство с Bootstrap 4

Автор Алексей На чтение 3 мин Просмотров 1.3к. Опубликовано 25.11.2018 Обновлено 06.06.2019

В рамках данного урока мы сделаем базовый html макет, подключим к нему Bootstrap 4.

Создание базового HTML каркаса

Открываем barackets (ну или любой другой редактор кода), создаем пустую страничку, со следующим содержимым

<!DOCTYPE html>
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body>
 
</body> 
</html>

сохраняем (файл — сохранить как), в index.html

Подключение bootstrap

Вариант 1 — локально: идем на сайт getbootstrap.com и скачиваем актуальную версию.

Далее распаковываем архив туда где сохранили базовый каркас

и подключаем основные файлы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body> 

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Здесь — тег который отвечает за адаптивность, ну и подключен основной css и js файлы, но не хватает jquery (jquery.com) — без данной библиотеки, много работать не будет, так что скачиваете 3ю версию и так же подключаете.

Вариант 2 — Используем SDN — рекомендую

Все то же самое, но уже не чего не нужно скачивать

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
<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> 
<script src="js/script.js"></script>
</body>
</html>

Здесь я все необходимое подключил, через SDN (сеть доставки контента) + создал и подключил пустой css и js файлы — в которых будем прописывать свои стили и код.

2. Подключение Bootstrap в шаблоне. Блок «container»

В данном уроке мы рассмотрим способы подключения Bootstrap и создадим первый блок — container.

Для того, что подключить Bootstrap переходим на официальный сайт и верхней части сайта, справа выбираем версию (по умолчанию выбрана последняя версия) и жмем по кнопке «Download».

Далее, на странице описания нам предлагается несколько способов подключения:

1. скачать скомпилированные файлы css и js себе на компьютер;
2. подключить файлы из Bootstrap CDN;
3. скачать файлы из удаленного репозитория через npm (данный способ он более продвинутый и мы его рассматривать не будем).

Я выберу способ — подключение файлов из Bootstrap CDN, так как он наиболее прост. Копируем ссылки на основные файлы Bootstrap, а также ссылки на дополнительные библиотеки: jQuery и PopperJs. Без данных библиотек плагины бутстрап работать не будут. 

Стили бутстрап подключаем в секции <head>, а скрипты до закрывающего тега </body>.  При подключении скриптов порядок имеет значение — сначала идет библиотека jQuery, далее библиотека popperJs и затем плагины бутстрап.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Подключаем Bootstrap и размечаем основной контейнер</title>
</head>
<body>
    ...
    <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>

Далее, первое что мы сделаем — создадим блок с классом контейнер.

<div> ... </div>

Это основной блок и служит он для горизонтального выравнивания контента по центру страницы. Как правило, он является дочерним элементом кого-то резинового блока. Например, тег body является родительским резиновым блоком, а его дочерний элемент блок с классом .container.

Тут код…. 

Если обратится к документации контейнера, то .container помимо основного класса имеет также модификации. 

Начало работы | Bootstrap по-русски

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

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

  bootstrap/
  +-- css/
  ¦   +-- bootstrap.css
  ¦   +-- bootstrap.min.css
  +-- js/
  ¦   +-- bootstrap.js
  ¦   +-- bootstrap.min.js
  +-- img/
  ¦   +-- glyphicons-halflings.png
  ¦   +-- glyphicons-halflings-white.png
  L-- README.md

Это основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim, приложения Mac для сжатия изображений в PNG.

Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery.

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

Разделы документов

Поддерживаемые элементы

Общие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.

Стили CSS

Стили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons, великолепный набор иконок.

Компоненты

Основные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др.

Плагины Javascript

Как и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др.

Список компонентов

Все вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:

• Группы кнопок
• Выпадающие списки кнопок
• Навигационные вкладки, кнопки и списки
• Панель навигации
• Ярлыки
• Бейджи
• Заголовки страниц и элемент hero
• Миниатюры
• Сообщения
• Индикаторы процесса
• Модальные элементы
• Выпадающие списки
• Всплывающие подсказки
• Информационные блоки
• Элемент «Гармошка»
• Элемент «Карусель»
• Опережающий ввод с клавиатуры

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

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

Вот как выглядит типичный файл HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Шаблон Bootstrap 101</title>
  </head>
  <body>
    <h2>Привет, мир!</h2>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

Чтобы сделать такой шаблон Bootstrap, просто присоедините соответствующие файлы CSS и JS:

<!DOCTYPE html>
<html>
  <head>
    <title>Шаблон Bootstrap 101</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h2>Привет, мир!</h2>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение.

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

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

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

Просто включите приведенный выше код в заголовок HTML элемент, и вам будет хорошо!

Используйте локальную копию Bootstrap

Другой вариант - загрузить вашу собственную копию Bootstrap и интегрировать ее в структуру вашего проекта.

Шаг 1. Загрузите Bootstrap

Загрузите Bootstrap в виде Zip-файла здесь. Затем откройте файловый менеджер своего компьютера и найдите bootstrap-3.3.7-dist.zip в папке Downloads . Дважды щелкните файл, чтобы разархивировать его.

Шаг 2. Выберите проект

Наш пример проекта - это домашняя страница Codebrainery.io. Адаптируйте следующие инструкции для использования в своем собственном проекте или загрузите здесь программу Codebrain, чтобы следить за ними.

codebrainery содержит три файла, индекс .html , main.css :

 
  
 код
  | - index.html
  | - main.css
 
  
 Шаг 3. Переместите Bootstrap в папку вашего проекта 
 Используя командную строку или файловый менеджер, переместите недавно распакованную папку  bootstrap-3.3.7-dist  в папку вашего проекта. Это создаст следующую структуру папок: 
 
  
 код
  | - index.html
  | - main.css
  | - бутстрап-3.3.7-расст.
       | - css
       | - js
       | - шрифты 
  
 Шаг 4. Ссылка на вашу копию Bootstrap 
 Используя свой любимый текстовый редактор, откройте  index.html  и найдите элемент  head . Домашняя страница Codebrainery.io уже ссылается на Bootstrap CDN: 
.
 
  
  
  
 Заменить ссылку   атрибут  href , чтобы вы могли вместо этого загрузить локально установленный миниатюрный CSS-код Bootstrap: 
 
  
  
  
 Позже мы реализуем функции Bootstrap, которые зависят от Bootstrap JavaScript, а также jQuery, поэтому добавьте их сейчас в элемент  head . Добавьте два  скрипт тегов  под ссылкой  тег : 
 
  
 
    
    
 
  
 Когда использовать Bootstrap 
 Обратитесь к Bootstrap, если вам нужна помощь в реализации любого из следующих действий: 

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

 Как добавить Bootstrap в HTML? 
 Связывание Bootstrap CSS Framework с вашими HTML-файлами довольно просто, и есть много способов сделать это в зависимости от того, как вы хотите интегрировать Bootstrap на свой веб-сайт.Самый простой способ начать работу с Bootstrap в ваших HTML-файлах - использовать службу CDN. 
 Вот как можно начать: 
 Шаг 1. Связывание Bootstrap CSS внутри тега head вашего HTML-шаблона: 
 

 

 Шаг 2. Связывание зависимостей и скриптов Bootstrap до конца тега: 
 





  
 Добавление CSS 
 Вы можете скопировать CSS, предоставленный Bootstrap, добавив следующее в заголовок HTML-страницы: 

 < ссылка rel = «stylesheet» href = «https: // stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css »целостность =« sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT2onymousMZw1T »
 

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


 Добавьте тип документа HTML5 и язык в начало страницы. 


 Он разработан, чтобы реагировать на мобильные устройства, поэтому для обеспечения правильного рендеринга необходимо добавить следующий метатег.



 < meta name = «viewport» content = «width = device-width, initial-scale = 1, shrink-to-fit = no»>  



 Ширина  = ширина устройства  гарантирует, что страница отображается в соответствии с шириной устройства, а значение  initial-scale = 1  сообщает странице, в каком масштабе она должна быть.  shrink-to-fit = no  сообщает веб-странице, что она не должна сжиматься. 


 Фреймворк работает на контейнерах.Вы можете использовать  .container  с фиксированной шириной или контейнер  .container-fluid , который занимает 100% доступной ширины страницы. 


 Вы можете просто добавить следующее в начале своей программы: 
  


  
  
  

  
  
  
  


  
 Лучший способ добавить Bootstrap 4 в проект 
 Улучшить статью
  

 Новые разработчики обычно сталкиваются с проблемами при внедрении или добавлении начальной загрузки в свои проекты.Проблема в основном возникает при реализации начальной загрузки по всему проекту (то есть во всех необходимых файлах) без добавления таблицы стилей и сценария на каждую страницу проекта. 
 В этой статье мы предоставили упрощенный способ сделать то же самое. 
 
 Пример без использования Bootstrap:  [tabby title = "html"]




    
  <  html  >  
   
  <  голова  >  
   >  

      
   .зеленый { 
    цвет: зеленый;  
   }  
   
   . Желтый { 
    цвет: желтый;  
   }  
   
   . Красный { 
    цвет: красный;  
   }  
   
   .синий { 
    цвет: синий;  
   }  
   
   . Серый { 
    цвет: серый;  
   }  
      стиль  >  

    головка  >  

   
  <  корпус  
3> 900 
    <  h2  > Geeksforgeeks   h2  >  

    <  p   class   =   «зеленый»  > Этот текст выделен зеленым цветом   p  >  

   
    <  p   class   =   «желтый»  > Этот текст выделен желтым цветом   p  >  

   
    <  p   class   =   «красный»  > Этот текст красным цветом   p  >  

   
    <  p   class   =   «синий»  > Этот текст выделен синим цветом   p  >  

   
    <  p   class   =   «серый»  > Этот тег серого цвета   p  >  

   
    body  >  

   
    html  >  






 Вывод: 
52 Без использования Bootstrap 
 
 
 
  Bootstrap. :  Мы можем изменить цвет и стили шрифта с помощью Bootstrap.Общий способ сделать это - добавить таблицы стилей и скрипт в нашу главную вкладку кода, как показано. 
 
 Вывод: 
 
 Bootstrap применен 
 
 Вы можете заметить, что шрифт той же программы изменен, а не только размер шрифта, размер размещения также изменен, что означает, что был применен CDN Bootstrap 4. 
 
  Другой способ добавления Bootstrap в наш проект:  В приведенном выше примере мы увидели, что нам нужно добавить так много дополнительных строк кода в каждый файл нашего проекта, чтобы применить bootstrap к этому конкретному файлу.Но это становится утомительным, когда у нас слишком много файлов, которыми нужно управлять в нашем проекте. 
 
 
  Проблема:  Если наш проект содержит 30 файлов, из которых мы должны применить начальную загрузку к 18 файлам, то вышеупомянутый традиционный метод становится слишком большой нагрузкой для разработчика. 
 
  Решение:  То же, о чем говорилось выше, может быть достигнуто, просто написав одну строку кода в нашем файле и установив таблицы стилей и сценарии в какой-нибудь другой файл. 
 
  Объяснение:  
 
  Шаг 1:  Создайте папку, такую ​​как «компоненты», в папке «Веб-страницы» вашего проекта, а также создайте файл JSP с желаемым именем, например «css-js.jsp »в папке компонентов и очистите весь предварительно написанный код в файле css-js.jsp, как показано. 
 
 Удаляется весь предварительно написанный код 
 
  Шаг 2:  
 
 
  
 “ stylesrap ”  
  
  style.css  и  script.js  включены в файл  css-js.jsp . 
 Теперь вы можете добавить свой код в эти файлы и поэкспериментировать с ними. Чтобы добавить таблицы стилей и скрипт в свой файл, посетите страницу - 
 Bootstrap Documentation 
 Вниманию читателей! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью  Web Design for Beginners | HTML    курс.
 
 Как использовать Bootstrap 4 
 Из этого туториала Вы узнаете, как создать веб-страницу с помощью фреймворка Bootstrap. 
 Начало работы с Bootstrap 
 Из этого туториала Вы узнаете, как легко создать веб-страницу с помощью Bootstrap. Но прежде чем начать, убедитесь, что у вас есть редактор кода и некоторые практические знания HTML и CSS. 
 Если вы только начинаете заниматься веб-разработкой, начните учиться здесь »
 Итак, приступим к созданию нашей первой веб-страницы на базе Bootstrap.
 Создание вашей первой веб-страницы с помощью Bootstrap 
 Теперь мы собираемся создать базовый шаблон Bootstrap, включив файлы Bootstrap CSS и JS, а также другие зависимости JavaScript, такие как библиотека jQuery через CDN. 
 Мы рекомендуем добавить Bootstrap в ваш проект через CDN (сеть доставки контента), потому что CDN предлагает преимущество в производительности за счет сокращения времени загрузки, поскольку они размещают файлы на нескольких серверах, разбросанных по всему миру, так что когда пользователь запрашивает файл, он будет обслуживается с ближайшего к ним сервера.Мы также используем ссылки CDN в наших примерах: 
 Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите простую веб-страницу на базе Bootstrap, которая отображает сообщение «Hello world» в вашем веб-браузере. 
 Шаг 1. Создание простого HTML-файла 
 Откройте ваш любимый редактор кода и создайте новый HTML-файл. Начните с пустого окна, введите следующий код и сохраните его как «basic.html» на рабочем столе. 
  


    
    
    


    
 Привет, мир! 

  
  Совет:  Всегда включайте тег viewport    внутри раздела    документа, чтобы включить масштабирование касанием и обеспечить правильную визуализацию на мобильных устройствах.
 Шаг 2. Превращение этого HTML-файла в шаблон начальной загрузки 
 Чтобы сделать этот простой HTML-файл шаблоном Bootstrap, просто включите файлы Bootstrap CSS и JS, а также необходимый jQuery, используя их ссылки CDN. 
 Вы должны включить файлы JavaScript внизу страницы, прямо перед закрывающим тегом   , чтобы повысить производительность ваших веб-страниц, как показано в следующем примере: 
  


    
    
    
    
    


    
 Привет, мир! 
    
    
    

  
  И все готово!  После добавления файлов CSS и JS Bootstrap и необходимой библиотеки jQuery мы можем приступить к разработке любого сайта или приложения с помощью платформы Bootstrap.
 Атрибуты  Integrity  и  crossorigin  были добавлены в ссылки CDN для реализации  Subresource Integrity  (SRI). Это функция безопасности, которая позволяет снизить риск атак, исходящих из скомпрометированных сетей CDN, за счет того, что файлы, получаемые вашим веб-сайтом (из сети CDN или где-либо еще), были доставлены без неожиданных или злонамеренных изменений. Он работает, позволяя вам предоставить криптографический хеш, которому должен соответствовать выбранный файл.
  Совет:  Если посетитель вашего веб-сайта уже загрузил файлы CSS и JS Bootstrap с того же CDN во время посещения других сайтов, они будут загружены из кеша браузера вместо повторной загрузки, что приведет к ускорению времени загрузки. . 
 Шаг 3: Сохранение и просмотр файла 
 Теперь сохраните файл на рабочем столе как «bootstrap-template.html». 
 Чтобы открыть этот файл в веб-браузере, перейдите к нему, затем щелкните его правой кнопкой мыши и выберите свой любимый веб-браузер.Кроме того, вы можете открыть свой браузер и перетащить в него этот файл. 
  Примечание:  Важно указать расширение  .html , в противном случае некоторые текстовые редакторы, такие как Блокнот в Windows, автоматически сохранят его как  .txt . 

 Загрузка файлов начальной загрузки 
 Кроме того, вы также можете загрузить файлы CSS и JS Bootstrap с их официального сайта и включить их в свой проект.Для загрузки доступны две версии:  скомпилированных файлов Bootstrap  и  исходных файлов Bootstrap . Вы можете скачать файлы Bootstrap 4 отсюда. 
 Скомпилированная загрузка содержит скомпилированные и уменьшенные версии файлов CSS и JavaScript для более быстрой и простой веб-разработки. Однако скомпилированная версия не включает никаких дополнительных зависимостей JavaScript, таких как jQuery. Принимая во внимание, что исходный код для загрузки содержит исходные файлы для всех CSS и JavaScript, а также локальную копию документов.
 Загрузите и разархивируйте скомпилированный Bootstrap. Теперь, если вы заглянете в папки, вы обнаружите, что они содержат скомпилированные файлы CSS и JS ( bootstrap. * ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min. * ). Используйте файлы  bootstrap.min.css  и  bootstrap.bundle.min.js . 
 Использование уменьшенной версии файлов CSS и JS улучшит производительность вашего веб-сайта и сэкономит драгоценную пропускную способность из-за меньшего размера HTTP-запросов и загрузки.
  Совет:  Обратите внимание, что плагины Bootstrap для JavaScript требуют включения jQuery. Вы можете скачать последнюю версию формы jQuery здесь https://jquery.com/download/. Однако нет необходимости включать требуемый Popper.js (для работы всплывающей подсказки и всплывающей подсказки) отдельно, поскольку он уже включен в файл «bootstrap.bundle.min.js». 
 бутстрап - npm 


Бутстрап 

  Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
  Ознакомиться с документацией 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.1.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 . 

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

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

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

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

Вклад 
 Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по развитию. 
 Более того, если ваш запрос на вытягивание содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто. 
 Настройки редактора 
 доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /. 

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

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


Управление версиями 
 Для прозрачности нашего цикла выпуска и для обеспечения обратной совместимости Bootstrap поддерживается в соответствии с рекомендациями по семантическому управлению версиями. Иногда мы ошибаемся, но по возможности придерживаемся этих правил.
 См. Раздел «Релизы» нашего проекта GitHub для просмотра журналов изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск. 

Создатели 
  Марк Отто  
  Джейкоб Торнтон  

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

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


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


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

			
	


		

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