Шпаргалка по Bootstrap — базовое руководство по Bootstrap
Опубликовано: 11 Декабря, 2022
Что такое бутстрап?
Bootstrap — это бесплатная мощная CSS-инфраструктура с открытым исходным кодом и набор инструментов, используемый для создания современных и адаптивных веб-сайтов и веб-приложений. Это самая популярная среда HTML, CSS и JavaScript для разработки адаптивных мобильных веб-сайтов. В настоящее время веб-сайты идеально подходят для всех браузеров и всех размеров экранов.
Что такое шпаргалка по Bootstrap?
Bootstrap CheatSheet — это набор всех классов, переменных и примесей, которые вам когда-либо понадобятся для создания интерактивного веб-сайта или приложения.
Содержание
Формы
Форма — это распространенный инструмент HTML, используемый для сбора данных от пользователей с использованием таких полей, как текстовая область, область выбора, область ввода и т. д. Bootstrap используется для предоставления стилей, параметров макета и пользовательских компонентов для создания и оформления различных форм.
| Элемент | Описание |
|---|---|
| Контроль формы | form-control — это класс по умолчанию для стилизации элементов <input>, <select> и <textarea>. Размер form-control можно настроить с помощью классов .form-control-lg и .form-control-sm. |
| Выбирать | Bootstrap Select — это элемент управления формы, который показывает сворачиваемый список различных значений, которые можно выбрать. Это можно использовать для отображения форм или меню пользователю. |
| Чеки и радио | Для переключателей и флажков используются классы .form-check. |
| Диапазон | Тип ввода диапазона может быть определен с помощью класса .form-control-range. |
| Макет | Bootstrap предоставляет два основных варианта макета для создания адаптивных веб-сайтов. Плавный макет и фиксированный макет для охвата полноэкранной ширины и стандартного экрана (940 пикселей) соответственно. |
| Проверка | Проверка формы HTML применяется к элементам <input>, <select> и <textarea> через два псевдокласса CSS, :invalid и :valid. |
| Список данных | Bootstrap 5 предоставляет опции для оформления списка данных с помощью классов управления формой. Это позволяет нам вводить параметры, и если есть совпадение, мы можем выбрать его. |
| Только для чтения | Readonly добавляет текст только для чтения. |
| Форма группы | При добавлении в качестве обертки вокруг каждого типа ввода или элемента управления формой он создает стековую форму с соответствующими полями. |
Code:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head> <body> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h2 class="text-center">Stacked form</h2> <div class="container"> <form action="#"> <div class="form-group"> <label for="fname">First Name:</label> <input type="text" class="form-control" id="fname" placeholder="Enter First Name" name="fname"> </div> <div class="form-group"> <label for="lname">Last Name:</label> <input type="text" class="form-control" id="lname" placeholder="Enter Last Name" name="lname"> </div> <div class="form-group"> <label for="email">Email Id:</label> <input type="email" class="form-control" id="email" placeholder="Enter Email Id" name="email"> </div> <div class="form-group"> <label for="contact">Contact No:</label> <input type="text" class="form-control" id="contact" placeholder="Enter Contact Number" name="contact"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> Remember me </label> </div> <button type="submit" class="btn bg-success"> Submit </button> </form> </div></body> </html> |
Входные группы
Группы ввода в Bootstrap используются для расширения элементов управления формы по умолчанию путем добавления текста или кнопок по обе стороны от текстовых вводов, настраиваемых селекторов файлов или настраиваемых вводов. Следующие классы являются базовыми классами, которые используются для добавления групп по обе стороны от полей ввода.
| учебный класс | Описание |
|---|---|
| .input-group-prepend | Он используется для добавления групп перед входом. |
| .input-group-append | Он используется для добавления групп позади ввода. |
| .input-группа-текст | Он используется для стилизации текста, отображаемого внутри группы. |
| .input-group-sm | Он используется для уменьшения групп ввода. |
| .input-group-lg | Он используется для увеличения групп ввода. |
| .input-группа | Он используется для сохранения размера входной группы по умолчанию. |
Code:
HTML
<!DOCTYPE html><html><head> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= <title>Input Groups in Bootstrap</title></head> <body> <div class="container"> <h5>Sizing</h5> <div class="input-group input-group-sm mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <span class="input-group-text" id="small">Small</span> </div> <input type="text" class="form-control"> </div> <div class="input-group mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <span class="input-group-text" id="medium">Default</span> </div> <input type="text" class="form-control"> </div> <div class="input-group input-group-lg"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <span class="input-group-text" id="large">Large</span> </div> <input type="text" class="form-control"> </div> <br> <h5>Prepend Group Example</h5> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="username">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <br> <h5>Append Group Example</h5> <div class="input-group"> <input type="text" class="form-control" placeholder="Email"> <!-- Prepend the following content to the input box --> <div class="input-group-append"> <span class="input-group-text" id="email">@example.com</span> </div> </div> </div></body> </html> |
Навбары
Панель навигации используется на каждом веб-сайте, чтобы сделать его более удобным для пользователя, чтобы навигация по веб-сайту стала легкой, и пользователь мог напрямую искать интересующую его тему. Bootstrap предоставляет различные типы панелей навигации.
| Навбары | Описание |
|---|---|
| Базовый | Он инициализируется с помощью тега навигации, который является встроенным тегом. В этом теге мы будем называть класс = «nav bar navbar-default», которые также являются встроенными классами начальной загрузки, которые предоставляют верхнее пространство вашей веб-страницы для вашей навигационной части, а значение по умолчанию дает представление по умолчанию для этой панели. который белый. |
| Перевернутый | Он похож на базовую панель навигации. Единственная разница в том, что вместо navbar-default мы будем использовать navbar-inverse, а цвета навигационной панели инвертируются. |
| Цветной | В bootstrap, чтобы изменить цвет фона панели навигации, мы можем использовать различные классы с тегами навигации, такими как .bg-primary для синего, .bg-success для зеленого, .bg-warning для желтого, .bg-danger для красного, .bg-secondary для серого и т. д. |
| Выровнено по правому краю | Навигационная панель нижнего колонтитула с выравниванием по правому краю используется для размещения ссылок с правой стороны панели навигации вместо расположения по умолчанию слева. Мы просто добавляем новый класс в уже существующий класс, т.е. class= «nav navbar-nav» и добавляем к нему navbar-right. |
| Исправлено | Его можно использовать для исправления панели навигации в верхней части веб-страницы, чтобы при прокрутке этой веб-страницы вы могли просматривать панель навигации из любого места на странице. |
| Падать | Это полезно, когда мы создаем веб-сайт с большим количеством контента и довольно большим для прокрутки. Мы инициализируем тег div с помощью class="dropdown", чтобы создать раскрывающийся интерфейс, и после этого мы можем добавить в него контент. |
| Складной | Складная панель навигации используется, чтобы скрыть ссылки на панели навигации и сделать их видимыми после нажатия кнопки. Добавьте класс navbar-toggle к кнопке, затем добавьте data-toggle="свернуть", затем добавьте идентификатор в список ссылок и добавьте имя этого идентификатора внутри data-target="#id", оберните все содержимое панели навигации внутри элемента div с коллапсом класса navbar-collapse |
Code:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Navbar Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script><script src= </script></head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebsiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Page 1<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1.1</a></li> <li><a href="#">Page 1.2</a></li> <li><a href="#">Page 1.3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav></body> </html> |
Оповещения
Оповещения предоставляют контекстные сообщения обратной связи для типичных действий пользователя с несколькими доступными и гибкими предупреждающими сообщениями. Оповещения доступны для любой длины текста, а также для дополнительной кнопки закрытия. В Bootstrap 5 доступно восемь типов предупреждений. Для правильного оформления используйте один из восьми необходимых контекстных классов (например, .alert-success). Каждый из классов имее