Простое руководство по использованию Bootstrap

Bootstrap - это фреймворк CSS и Javascript / jQuery с предустановленными дизайнами css и Javascript, которые назначаются определенным именам классов. Содержимое размещается на основе сетки из 12 столбцов, затем свойства CSS вызываются путем присвоения имен тегам html определенному классу.

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

Настройка Bootstrap

  1. cd в папку на рабочем месте, затем введите команду ниже в терминале (Mac), чтобы установить bootstrap с использованием пакета npm для приложений node.js.
$ npm install bootstrap

2. Свяжите документ Bootstrap CSS, а затем ссылку на пользовательский style.css, чтобы персонализировать наш дизайн в <head> части нашего HTML-документа. Добавьте ссылку на Bootstrap Javascript перед закрывающим тегом </body>.

Использование сетки из 12 столбцов Bootstrap для размещения содержимого

  1. Назовите класс внутри HTML от <tag> до container, чтобы установить размер внутренней сетки на максимальную ширину страницы.
  2. Создайте строку, присвоив классу внутри HTML <tag> имя row.
  3. Создавайте столбцы с желаемым размером экрана и диапазоном столбцов. В этом примере на экране среднего размера каждый контент 1 и 2 охватывает 6 столбцов, что равняется 12 столбцам. Для базового Bootstrap не требуется Media Query.

Попробуйте проверить элемент, чтобы увидеть исходный HTML и имена классов на основе CSS-фреймворка Bootstrap.

Как стилизовать панель навигации с помощью Bootstrap

  1. Создайте тег навигации в HTML с классом, равным панели навигации. Navbar-default устанавливает свойство CSS по умолчанию, а navbar-static-top позиционирует панель навигации статично вверх.
<nav class="navbar navbar-default navbar-static-top">

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

<div class="container">

3. Внутри контейнера создайте div с классом nav-header и тегом <a> с классом navbar-brand, чтобы логотип возвращался на домашнюю страницу.

<div class="navbar-header">
  <a class="navbar-brand" href="#">logo or <img> tag</a>

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

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" role="button">Products</a>
      <ul class="dropdown-menu">
         <li><a href="#">option 1</a></li>
         ...

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

Дополнительную информацию можно найти в документации по начальной загрузке: https://getbootstrap.com/

Другой пример основ начальной загрузки на Codepen: https://codepen.io/taniarascia/pen/yYQYpO#0

Используйте плагин Bootstrap 4 для кода Visual Studio, чтобы помочь с классами

Если у вас есть вопросы или комментарии, напишите мне:
[email protected]