Bootstrap как пользоваться: Начало работы | Bootstrap по-русски — Вебджем.рф

Содержание

Вступление · Bootstrap v5.0

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

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

Стили

Скопируйте и вставьте таблицу стилей <link> в Ваш <head> перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Скрипты

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих <script> в конце Ваших страниц, прямо перед закрывающим тегом </body>, чтобы включить их.

Связка

Включите каждый плагин Bootstrap JavaScript и зависимости в один из двух наших пакетов. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что входит в Bootstrap, см. наш раздел содержимое.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Раздельно

Если Вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js (если Вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Модули

Если Вы используете <script type="module">, пожалуйста, обратитесь к нашему разделу использование Bootstrap в качестве модуля.

Компоненты

Интересно, какие компоненты явно требуют нашего JavaScript и Popper? Кликните на ссылку “Показать компоненты” ниже. Если Вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.

Показать компоненты, требующие JavaScript

Alerts (Уведомления) для отклонения
Buttons (Кнопки) для переключения состояний и функционала флажка/радио
Carousel (Карусель) для любого поведения слайдов, элементов управления и индикаторов
Collapse (Сворачиваемое) для переключения видимости содержимого
Dropdowns (Выпадающие списки) для отображения и позиционирования (также требуется Popper)
Modals (Модальные окна) для отображения, позиционирования и прокрутки
Navbar (Панель навигации) для расширения нашего плагина Сворачиваемое для реализации адаптивного поведения
Toasts (Тосты) для показа и отклонения
Tooltips (Всплывающие подсказки) и popovers (всплывающие окна) для отображения и позиционирования (также требуется Popper)
Scrollspy (Отслеживание прокрутки) для поведения прокрутки и обновлений навигации

Стартовый шаблон

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

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

<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Привет мир!</title>
  </head>
  <body>
    <h2>Привет мир!</h2>
    <!-- Дополнительный JavaScript; выберите один из двух! -->
    <!-- Вариант 1: Bootstrap в связке с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Вариант 2: Bootstrap JS отдельно от Popper
    <script src="https://cdn.
  jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

Глобально важно

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

Тип текущего документа

Bootstrap требует использования doctype HTML5. Без него Вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.

<!doctype html>
<html lang="ru">
  ...
</html>

Адаптивный метатег

Bootstrap разработан mobile first (сначала мобильный), стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра (viewport) к Вашему <head>.

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

Вы можете увидеть пример этого в действии в стартовом шаблоне.

Свойство Box-sizing

Для более простого изменения размеров в CSS мы переключаем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

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

.selector-for-some-widget {
  box-sizing: content-box;
}

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after будут наследовать указанный box-sizing для этого .selector-for-some-widget

Узнайте больше о коробочной модели и размерах на сайте CSS Tricks.

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

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

Сообщество

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

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

Вы также можете следить за @getbootstrap в Твиттере, чтобы следить за последними слухами и потрясающими музыкальными клипами.

Верстка сайта на Bootstrap 4

Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

Закрыть

Чат в телеграм

спроси эксперта сейчас

https://www. youtube.com/embed/ST9mdY0jaZY

8 860 просмотров

В этом цикле уроков мы будем работать с framework-ом Bootstrap 4, мы не будем его изучать с нуля, мы лишь прикоснёмся к его возможностям и с помощью эти возможностей мы попробуем сверстать простенький шаблонщик. Заодно посмотрим, как покажет себя Bootstrap 4 на практике и насколько просто с ним верстать сайты.

В качестве шаблона мы возьмём бесплатный PSD-макет: скачать шаблон PSD. Данный макет открывается в программе Photoshop. Автор будет использовать не самую последнюю версию, дополнительно рекомендуем посмотреть курс по Фотошопу, чтобы ознакомится поближе с данной программой.

Скачав и распаковав исходные файлы, вы найдёте в папке PSD нужный нам файл. Дополнительно в архиве вы найдёте папку FONTS с шрифтами и папка JPG где вы наглядно сможете увидеть как выглядит сайт в итоговом варианте.
Прежде чем открыть PSD-макет, вам следует установить шрифты, так как при загрузке шаблона программа будет ругаться из-за отсутствия нужных шрифтов на вашем компьютере. Для этого откройте папку FONTS, зайдите в первую папку и выделите все шрифты, далее правой кнопкой мыши нажмите на выделение и выберете пункт в всплывающем меню «Установить шрифты». Зайдите в следующую папку и повторите всё тоже самое со следующим шрифтом.

Следующий шаг – создание стандартного шаблона сайта

В любом удобном для вас месте создайте папку с проектом и создайте текстовый файл с названием «index». Далее следует обязательно поменять расширение у данного файла с .txt на .html.
Как поменять расширение с .txt на .html
Если по какой-то причине вы не можете поменять расширение файла, сделайте следующее. Вам следует сделать доступным изменять расширение у файлов. Как это сделать на Windows: в вашей папке переходим в меню и нажимаем Сервис — Параметры папок…

В открывшемся окне выбираем Вид и в данном окне вы увидите раздел — Дополнительные параметры, далее вам потребуется убрать выделение с параметра: Скрывать расширения для зарегистрированных типов файлов. Далее нажимаем ОК. Теперь у вас доступно изменение расширения файлов.

Следующий шаг – создание стартовой темы HTML на Bootstrap4

Вы можете скопировать отсюда уже готовую html структуру

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

Скачать Bootstrap 4

Поэтому рекомендуем скачать Bootstrap 4. Вам необходимо скачать файлы из раздела «Compiled CSS and JS».

Следующий шаг – организуйте следующую структуру папок в вашем проекте:

bootstarap(папка Bootstrap файлов)
- css(папка стандартных CSS-стилей Bootstrap)
  - bootstap. min.css
- js (папка jаvascript файлов Bootstrap)
  - bootstap.min.js
js (папка для jаvascript-файлов)
- jquery-3.3.1.min.js (JQuery-библиотека)
- popper.min.js (JQuery-плагин для всплывающих окон)
- main.js (JQuery-файл, где вы будете создавать собственный код)
css (папка с вашими CSS-стилями)
- style.css (файл с вашими CSS-стилями)
index.html

После того как вы скачаете файлы, вам следует найти файлы прописанные в html-структуре и заменить их на те, что вы скачали.
Также не забудьте подключить аналог шрифтов, которые указаны в шаблоне, данные шрифты можно найти через сервис Google Fonts.

Исходный код index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <link href="https://fonts. googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Следующий шаг – создаём стандартные стили

В файле style.css вам следует указать следующий код:

Исходный код style.css

body{
min-width: 320px;
font-size:14px;
font-family: 'Playfair Display', serif;
color: #626262;
}
img{
max-width:100%;
height:auto;
}
a{
color:#b4ad9e;
}
a:hover{
color:#898377;
}

Следующий шаг – ставим контейнер и применяем стандартные классы .

col

 <div>
      <div>
        <div>
          Блок 1
        </div>
        <div>
          Блок 2
        </div>
        <div>
          Блок 3
        </div>
        <div>
          Блок 4
        </div>
  </div>

.container – это стандартный блок который применяется для выравнивания всего сайта по центру.

.row – стандартный класс, который нужен для отступов слева и справа в мобильной версии сайта.

.col – стандартный класс для разделения сайта на блоки по горизонтали, к нему прилагаются дополнения, которые говорят как будет отображаться блок при определённых параметрах. Например класс .col-sm-3 говорит о нам о следующем: sm – в мобильной версии блок будет вытягиваться на 100%, 3 – что блок будет достигать размера равному 12/3 = 4, где 12 – максимальное количество блоков, на которое можно разделить сайт по горизонтали.

Полная документация

Вы можете поделиться или сохранить для себя этот урок в социальных сетях:

Оставьте свой отзыв, для улучшения качества.

Сейчас: 0 отзывов

Как добавить Bootstrap в проект?

Улучшить статью

Сохранить статью

Последнее обновление: 21 окт, 2021

Читать

Обсудить

Улучшить статью

Сохранить статью

Bootstrap — это инструмент с открытым исходным кодом, состоящий из фреймворков HTML, CSS и JavaScript. Это специальный адаптивный инструмент веб-разработки, состоящий из готовых к использованию шаблонов. Первоначально он назывался Twitter Blueprint и был разработан Марком Отто и Джейкобом Торнтоном. Со временем начальная загрузка эволюционировала по сравнению с версией 5. Таким образом, базовый веб-сайт может быть разработан с использованием начальной загрузки благодаря доступным готовым шаблонам.

Причина выбора Bootstrap:

Более быстрая и простая веб-разработка.
Создает независимые от платформы веб-страницы.
Создает адаптивные веб-страницы.
Он также адаптирован для мобильных устройств.
Бесплатно! Доступно на www.getbootstrap.com

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

CSS
Шрифты
Javascript

Bootstrap можно использовать двумя способами:

Использование Bootstrap CDN Link.
Путем загрузки файла Bootstrap.

Мы можем легко получить ресурсы для обоих подходов с официального сайта. Начнем обсуждение с первого подхода.

Метод 1: Использование ссылок CDN — Этот метод установки Bootstrap довольно прост, но требует стабильного подключения к Интернету. Настоятельно рекомендуется следовать этому методу.

Шаг 1: Перейдите в getbootstrap и нажмите «Начало работы». Там вы найдете приведенные ниже ссылки CDN.

Шаг 2: Скопируйте ссылки и вставьте их внутрь тега .

Ссылка CSS:

”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>

Ссылка JavaScript:

Шаг 3: после завершения вышеупомянутых шагов, код.

< html lang = "en" >

< head >

< meta Charset = "UTF-8" />

< Meta Имя = "Viewport" Имя = ". 0103 content =

"width=device-width, initial-scale=1" />

< link href =

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

REL =

. целостность =

"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"

crossorigin = "anonymous" />

head >

< корпус >

< h2 >Привет, мир! h2 >

< div >

You're learning Bootstrap

on Geeksforgeeks. org

div >

< .0103 src =

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity =

"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9Ah50zEOg7Hlq2THRZ"

crossorigin = "anonymous" >

script >

корпус >

html >

На этом этапе мы завершили процесс установки и теперь можем приступить к реализации логики.

Пример: В этом примере показано использование ссылки Bootstrap CDN для использования Bootstrap с HTML-документом.

`HTML`

< html lang = "en" >

< head >

< Meta Charset = "UTF-8" />

< META Имя

02 = "viewport"

content=" width = device -width,

initial-scale = 1 " />

< Ссылка HREF =

"HREF://CDN. JSDLIVM3

" .мин.css"

rel = "stylesheet"

integrity =

"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"

crossorigin = "anonymous" />

< title >Добро пожаловать в GeeksforGeeks title >

head >

< body >

< h2 >GeeksforGeeks h2 >

< h4 >Кнопка загрузки h30003

< hr />

< button type = "button"

class = "btn btn- Первичный « > Первичный

Кнопка >

< Кнопка Тип < Тип < Тип < 0103 = "button"

class = "btn btn-secondary" >Secondary

button >

< Кнопка Тип = "Кнопка"

Класс = "BTN BTN-SUCCESS" > успех "BTN BTN-SUCCESS" > успех 0103

button >

< button type = "button"

class = "btn btn -danger" >Опасно

кнопка >

< кнопка0103 type = "button"

class = "btn btn-warning" >Warning

button >

< Кнопка Тип = "Кнопка"

Класс = "Btn Btn-Info" = "Btn Btn-Info" = "Btn Btn-Info"0103 >Info

button >

< button type = "button"

class = "btn btn-light" >Light

кнопка >

 2 0 9 1 9 0 9 9 0 9 0 9 00103  button   type   =   "button" 
                 class   =   "btn btn-dark"   >Dark 
           button   > 
    <  Кнопка   Тип   =   «Кнопка» 
    Класс   =  2 "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN" BTN "BTN". 0103  >Link 
           button   > 
    body   > 
  
    html   >

Вывод:

Способ 2: загрузив Bootstrap — для некоторых браузеров.

Шаг 1: Перейдите в getbootstrap и нажмите «Начало работы». Нажмите кнопку «Загрузить Bootstrap» и загрузите скомпилированные CSS и JS.

Шаг 2: Будет загружен ZIP-файл. Извлеките его и зайдите в папку с дистрибутивом. Вы увидите 2 папки с именами CSS и JS. Вы можете создать там свой HTML-файл, а затем вставить эти ссылки в соответствующие разделы. В файлах CSS наиболее важными являются файлы bootstrap и bootstrap. min. В файлах JS наиболее важными являются bootstrap.min.js и bootstrap.js.

Шаг 3: Создайте отдельную папку проекта и файл HTML. В папку скопируйте извлеченные файлы, загруженные из бутстрапа. Под тегом head файла HTML необходимо связать CSS. Загруженный jQuery также следует скопировать в файл JS. Убедитесь, что в файле проекта загруженные файлы и HTML-страница должны присутствовать в этой папке.

Шаг 4: После выполнения вышеуказанных шагов окончательный код будет выглядеть так, как показано в следующем примере кода. Окончательный код после сохранения файлов в той же папке и добавления ссылок под тегами head и body соответственно.

`HTML`

< html lang = "en" >

< head >

< meta charset = "utf-8" />

< meta name = "viewport"

content=" width = device -width,

initial -масштаб = 1 " />

< ссылка =

02 30102 "StyleSheet"

Тип = "Текст/CSS"

Href = "CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSST. = ". head >

< body >

< h2 >Welcome to gfg h2 >

< script type = "text/javascript"

href = "js/jquery.js" >

Скрипт >

< СКРИПТ Тип = ""0103

href = "js/bootstrap. min.js" >

script >

body >

HTML >

Пример: . В пример, это можно наблюдать, что можно наблюдать, что можно наблюдать, что можно наблюдать, что можно наблюдать. . Теперь классы начальной загрузки можно использовать напрямую. Поскольку он загружается, таким образом, нет необходимости в подключении к Интернету для загрузки классов начальной загрузки.

`HTML`

< html lang = "en" >

< head >

< meta charset = "utf-8" />

< meta name = "viewport" content =

"width=device-width, initial-scale=1" />

< link rel = "stylesheet" type = "text/css"

href = "css/bootstrap. css" />

head >

< body >

< h2 >Welcome to GeeksforGeeks h2 >

< div class = "mb-3" >

< label for = "exampleFormControlInput1"

class = "form-label" >

Адрес электронной почты

ярлык >

0103 input type = "email" class = "form-control"

id = "exampleFormControlInput1"

placeholder = "name@example. com" />

< / DIV >

>

9 >

>

0103 < div class = "mb-3" >

< label for = "exampleFormControlTextarea1"

class = "Форма-маркировки" >

Пример Textarea

label >

< textarea class = "form-control"

id = "exampleFormControlTextarea1" rows = "3" >

textarea >

div >

< script type = "text/javascript"

href = "js/jquery. js" >

Скрипт >

<

0103 = "text/javascript"

href = "js/bootstrap.min.js" >

script >

body >

html >

Output:

 
 Как настроить Bootstrap для локального и автономного использования 
 1. Обзор  так что мы можем продолжить обучение даже без активного подключения к Интернету.
 2. Скачивание ресурсов CSS и Javascript  Сначала нам нужно загрузить сам файл Bootstrap с официального сайта по адресу https://getbootstrap.com/docs/4.0/getting-started/download/. На появившейся странице мы нажмем кнопку «Загрузить» после   Скомпилированный заголовок CSS и JS  .
  
 Загруженный файл  bootstrap-4.0.0-dist.zip  представляет собой zip-файл размером всего 592 КБ — довольно маленький. Мы должны разархивировать его с помощью Winrar, 7zip или других подобных инструментов. После распаковки в нашей системе появится папка с именем  bootstrap-4.0.0-dist .
 Следующий файл, который нам понадобится, — это файл jQuery Javascript, и мы можем загрузить его, перейдя по этому URL-адресу https://code.jquery.com/jquery-3.6.0.js.
 После открытия URL-адреса мы можем увидеть кучу кода в нашем браузере. Все, что нам нужно сделать, чтобы сохранить его локально, — это нажать  Ctrl + S  в ОС Windows или  Cmd + S  в MacOS. Это побудит наш браузер сохранить файл с именем  jquery-3.6.0.js  в нашей папке  Downloads .
 Теперь у нас есть все файлы, которые нам нужны, давайте соединим их вместе в примере проекта.
  
 3. Локальное использование Bootstrap (офлайн)  Давайте создадим пример проекта, чтобы продемонстрировать, как использовать все файлы локально. Сначала мы создадим новую папку с именем  bootstrap-offline.  Это будет  корневая  папка нашего проекта. Он называется корневым, потому что он будет содержать другие папки и файлы.
 Далее создадим две новые папки в папке  bootstrap-offline,  а именно:
 -  bootstrap-offline/css 
 -  bootstrap-offline/js 
,900 Теперь скопируем 
,
23 bootstrap-4.
  0.0-dist   /css/bootstrap.css от  до  bootstrap-offline/css/   bootstrap.css. 
 Кроме того, мы скопируем  bootstrap-4.0.0-dist   /js/bootstrap.js  в  bootstrap-offline/js/   bootstrap.js. 
 Наконец, мы скопируем загруженный ранее  jquery-3.6.0.js  в  bootstrap-4.0.0-dist   /js/jquery-3.6.0.js. 
 В завершение мы создадим новый HTML-файл с именем   bootstrap-offline/hello.html   со следующим содержанием:
 

<голова>
<мета-кодировка="utf-8">

Автономная начальная загрузка
   
<тело>
<дел>
   Моя автономная страница Bootstrap 
  Эта страница использует локальные файлы Bootstrap CSS и JS

Bootstrap как пользоваться: Начало работы | Bootstrap по-русски

Вступление · Bootstrap v5.0

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

Стили

Скрипты

Связка

Раздельно

Модули

Компоненты

Стартовый шаблон

Глобально важно

Тип текущего документа

Адаптивный метатег

Свойство Box-sizing

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

Сообщество

Верстка сайта на Bootstrap 4

Следующий шаг – создание стандартного шаблона сайта

Следующий шаг – создание стартовой темы HTML на Bootstrap4

Следующий шаг – организуйте следующую структуру папок в вашем проекте:

Следующий шаг – создаём стандартные стили

Следующий шаг – ставим контейнер и применяем стандартные классы .

Оставьте свой отзыв, для улучшения качества.

Как добавить Bootstrap в проект?

`HTML`

`HTML`

`HTML`

Как настроить Bootstrap для локального и автономного использования

23 bootstrap-4.

Моя автономная страница Bootstrap

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

Рубрики