✅ Компоненты начальной загрузки - Топ-11 компонентов Bootstrap с его синтаксисом

Введение в компоненты Bootstrap

Введение в компоненты Bootstrap

Первоначально назывался Twitter Blueprint, он был разработан Марком Отто и Джейкобом Тронтоном в Twitter. Bootstrap - это бесплатный CSS-фреймворк, который обеспечивает отзывчивость веб-страниц. Благодаря отзывчивости это означает, что различные элементы DOM изменяют свой размер соответственно с изменением размера экрана, не ставя под угрозу элегантность веб-страницы, как это было бы в противном случае традиционно при использовании CSS-методов с пиксельным или процентным размером.

Это также называется CSS-фреймворком «сначала для мобильных устройств», так как он разработан для создания макета CSS Grid путем определения строк и столбцов. Эта структура также имеет компоненты JavaScript наряду с классами CSS. Чтобы использовать эту платформу, вы должны обязательно связать jQuery и JavaScript Framework для Bootstrap вместе с другими файлами Bootstrap CSS. Эти CSS-файлы доступны для загрузки, а также в виде CDN (Content Delivery Network).

Различные компоненты начальной загрузки:

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

1) Глификоны - это значки в формате шрифта, доступные в Bootstrap. Их около 200 в количестве. Эти глифы можно найти по адресу https://glyphicons.com.

Как это использовать?
Существуют глифы для обозначения почти всех действий, таких как масштабирование, редактирование, предупреждение, файл, удаление и т. Д., И они определены в отдельном классе. Итак, вам нужно использовать базовый класс и отдельный класс, в идеале, в элементе span и использовать эти глифы.

Синтаксис:

2) Раскрывающиеся списки. Это меню, основанное на переключениях, содержит список ссылок. Они сделаны более динамичными с помощью плагина JS и могут быть найдены по адресу http: // getbootstrap / javascript / # dropdowns

Как это использовать?
Вам нужно использовать класс .dropdown, так как класс элемента имеет элементы списка под ним с классом .dropdown-menu.

Синтаксис:

3) Группы кнопок - с помощью этого компонента Bootstrap вы можете сгруппировать набор кнопок в серии, смежные друг с другом.

Как это использовать?
Определите элементы деления с помощью класса .btn-group и вложите эти элементы кнопкой с классом .btn. Верный
Неправильно

4) Раскрывающиеся кнопки - этот компонент используется для использования элемента кнопки для запуска раскрывающегося списка.

Синтаксис:

5) Группы ввода - это расширяет класс управления формой и добавляет текст или кнопки по обе стороны от поля ввода элемента ввода. Вам необходимо использовать класс .input-group с классом .input-group-addon, чтобы использовать эти входные группы.

Синтаксис:

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

Синтаксис:

7) Jumbotron - это компонент начальной загрузки, который может распространяться на весь экран (или область просмотра) для отображения некоторого ключевого содержимого.

Синтаксис:

8) Оповещения - это компонент Bootstrap с плагином jQuery, который предоставляет контекстные сообщения обратной связи в зависимости от действий пользователя. Это в основном используется для отображения предупреждающих сообщений.

Синтаксис: …

9) Индикаторы выполнения - этот компонент используется для отображения визуальной информации о ходе работы или действия с помощью индикатора выполнения.

Synatx:

Пример:

10) Значки - это компонент, который выделяет что-то вроде непрочитанных элементов, добавляя класс .badge к элементу DOM, предпочтительно к span.

Синтаксис:

Сообщения 3

11) Разбивка на страницы - этот компонент дает вашему сайту многостраничную нумерацию страниц, чтобы контент мог

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

Синтаксис:

Как это поможет в вашей карьере?

Все предприятия в настоящее время сосредоточены на взаимодействии с пользователем и пользовательском интерфейсе (UI / UX). Потому что подавляющее большинство населения использует портативные устройства, такие как планшеты и смартфоны, которые сильно различаются по разрешению в пикселях и размеру экрана. Вот почему очень важно иметь интерфейс, достаточно отзывчивый, чтобы приспособиться к любому виду экрана без ущерба для элегантности веб-страницы.

Таким образом, умение работать в Bootstrap повысит ценность вашей технической карьеры, и компании с нетерпением ждут возможности нанять вас с хорошей зарплатой. А поскольку он бесплатный и с открытым исходным кодом, у вас есть множество возможностей внести свой вклад как разработчик и сделать его еще лучше, чем он есть сегодня.

Вывод-

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

Компоненты начальной загрузки - Топ-11 компонентов Bootstrap с его синтаксисом