Простые способы установки Bootstrap: 10 шагов (с изображениями)

Оглавление:

Простые способы установки Bootstrap: 10 шагов (с изображениями)
Простые способы установки Bootstrap: 10 шагов (с изображениями)

Видео: Простые способы установки Bootstrap: 10 шагов (с изображениями)

Видео: Простые способы установки Bootstrap: 10 шагов (с изображениями)
Видео: Как сохранить видео из Черновика Тик Тока на телефон 2024, Май
Anonim

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

Шаги

Установите Bootstrap, шаг 1
Установите Bootstrap, шаг 1

Шаг 1. Откройте веб-сайт Bootstrap в своем интернет-браузере

Введите https://getbootstrap.com в адресную строку и нажмите ↵ Enter или ⏎ Return на клавиатуре.

Установите Bootstrap, шаг 2
Установите Bootstrap, шаг 2

Шаг 2. Нажмите кнопку «Загрузить»

Откроется страница «Загрузить».

Установите Bootstrap Шаг 3
Установите Bootstrap Шаг 3

Шаг 3. Нажмите кнопку «Загрузить» под заголовком «Скомпилированные CSS и JS

" Это загрузит полные файлы Bootstrap на ваш компьютер в виде ZIP-архива.

Если вам будет предложено, выберите место для сохранения ZIP-архива Bootstrap

Установите Bootstrap Шаг 4
Установите Bootstrap Шаг 4

Шаг 4. Извлеките файлы из ZIP-архива

Найдите только что загруженный ZIP-файл и дважды щелкните его, чтобы извлечь все файлы из него в ту же папку.

  • Это извлечет две папки с именем " css" а также " js."
  • Если ваше приложение для разархивирования не извлекает файлы автоматически, ознакомьтесь с этой статьей, чтобы узнать обо всех способах экспорта ZIP-архива.
Установите Bootstrap Шаг 5
Установите Bootstrap Шаг 5

Шаг 5. Переместите извлеченные папки в ту же папку, что и HTML-файлы вашего сайта

Откройте папку, содержащую все HTML-файлы вашего веб-сайта, и перетащите значок " css" а также " js", чтобы переместить их в ту же папку, что и документы вашего веб-сайта.

Теперь вы можете связать файлы со своими HTML-файлами и начать использовать Bootstrap в своем коде

Установите Bootstrap Step 6
Установите Bootstrap Step 6

Шаг 6. Щелкните правой кнопкой мыши файл HTML, который вы хотите использовать с Bootstrap

Вы можете использовать Bootstrap только в одном из ваших HTML-файлов или во всех из них.

Установите Bootstrap Step 7
Установите Bootstrap Step 7

Шаг 7. Наведите указатель мыши на пункт «Открыть» в контекстном меню

Появится подменю с совместимыми приложениями.

Установите Bootstrap Step 8
Установите Bootstrap Step 8

Шаг 8. Выберите программу текстового редактора

Это откроет выбранный HTML-файл в вашем текстовом редакторе.

Вы можете использовать простой текстовый редактор, например Блокнот или TextEdit а также специальный редактор кода, например Атом (https://atom.io) или Coda (https://panic.com/coda).

Установите Bootstrap Step 9
Установите Bootstrap Step 9

Шаг 9. Добавьте ссылки Bootstrap в заголовок вашего HTML-файла

Прежде чем использовать код Bootstrap в своем HTML, вам нужно будет ввести или вставить следующие строки в заголовок вашего кода:

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

Установите Bootstrap Step 10
Установите Bootstrap Step 10

Шаг 10. Проверьте размещение ваших ссылок Bootstrap в коде

В заголовке HTML обе строки должны располагаться между строками и строкой.

  • Как только вы добавите эти строки в заголовок, вы можете начать использовать элементы Bootstrap в этом HTML-файле.
  • Вы можете найти полный список всех элементов Bootstrap на https://getbootstrap.com/docs/4.3/getting-started/introduction. Просто нажмите любую категорию, например Макет или Компоненты в левом меню.
  • После установки Bootstrap вы можете вставить или скопировать / вставить любой фрагмент кода отсюда в свой собственный код.

Рекомендуемые: