«Дизайнер понимает, что достиг совершенства не тогда, когда нечего добавить, а тогда, когда нечего убрать» — Антони де Сент-Экзюпери.
Разве нет сайтов, которые бросаются в глаза? Они имеют правильное количество интервалов, дополняют использование цветов, привлекательные изображения и творческие стили. Для создания таких веб-сайтов очень важно освоить CSS. Несмотря на то, что вы изучаете основы CSS, каждый элемент требует огромного количества спецификаций, касающихся его положения, цвета, изменений при наведении курсора и т. д. Это включает в себя пробы, ошибки и повторение, и все же лучший стиль может быть не достигнут.
Разве не было бы просто позаимствовать некоторые уже существующие стили для HTML-элементов, используя всего несколько слов? Это именно то, что делают CSS Frameworks. Некоторые из них включают Balma, Bootstrap, Foundation и Tailwind. Основной темой этого блога будет Bootstrap.
Зачем использовать Bootstrap?
Bootstrap гибок и прост в использовании, что нравится веб-дизайнерам и разработчикам. Его основные преимущества заключаются в том, что он спроектирован так, чтобы быть отзывчивым, поддерживает широкую совместимость с браузерами, обеспечивает согласованный дизайн за счет использования повторно используемых компонентов, а также очень прост в использовании и быстро настраивается.
С помощью Bootstrap веб-разработчики могут сосредоточиться на технической работе, не думая о дизайне, и быстро запустить веб-сайт, который выглядит великолепно. С другой стороны, он предоставляет дизайнерам сайтов прочную основу для создания привлекательных тем Bootstrap.
Требуется Bootstrap в вашем проекте?
Чтобы начать, выполните следующие простые шаги, чтобы начать использовать Bootstrap при разработке кода. Скопируйте приведенный ниже код в раздел заголовка HTML:
‹ссылка href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="таблица стилей" целостность="sha384-0evHe/ X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor” crossorigin="anonymous"›
Давайте рассмотрим базовую кнопку, чтобы продемонстрировать возможности платформы Bootstrap.
HTML-кнопка выглядит так:
Принимая во внимание, что когда мы включаем класс «btn» в элемент кнопки, мы получаем:
С небольшими усилиями с нашей стороны теперь это выглядит намного лучше. Таким же образом, добавляя простые классы, мы можем применять миллионы стилей к каждому элементу.
Обратитесь к документации по начальной загрузке, чтобы просмотреть все стили, предоставляемые фреймворком.
Некоторые полезные классы:
Навигационные панели:
Эта ключевая область вашего веб-сайта должна быть хорошо организована и привлекательна. Для этого мы используем определенные классы, предоставляемые начальной загрузкой — Navbar-brand для названия вашей компании, продукта или проекта.
- navbar-nav обеспечивает простую в использовании полноразмерную навигацию (включая поддержку раскрывающихся списков).
- navbar-toggler, который будет использоваться с нашим плагином для сворачивания панели навигации и других характеристик переключения.
- Инструменты гибкости и интервалов для всех действий формы и элементов управления.
- navbar-text, который позволяет добавлять вертикально центрированные текстовые строки.
- крах. Navbar-collapse для организации и скрытия компонентов панели навигации в соответствии с родительской точкой останова.
- Включите дополнительную кнопку прокрутки панели навигации, чтобы установить максимальную высоту и прокрутить расширяющееся содержимое панели навигации.
Пример:
Что касается элементов списка, bootstrap предоставил класс nav-item:
Стиль элемента ссылки привязки определяется ссылкой класса nav. Термин «выпадающее меню» описывает процесс разработки выпадающего меню, которое активируется при нажатии. При щелчке по раскрывающемуся меню каждый отображаемый элемент обозначается термином «выпадающий элемент».
Ознакомьтесь с документацией по начальной загрузке, чтобы узнать о дополнительных классах, связанных с панелью навигации.
Тексты: Bootstrap предоставляет нам большой выбор классов для оформления простых текстов.
У нас есть несколько вариантов изменения размера шрифта наших текстов:
Точно так же, чтобы выбрать толщину шрифта для нашего текста:
Макет:
Используя bootstrap, мы можем быстро создать сетку. Строки могут быть заданы как «строка», последующие столбцы — как «столбец», а элемент сетки может иметь указанный класс «контейнер».
Пример:
Ширина страницы по умолчанию разделена на 12 столбцов, и мы можем настроить ширину наших столбцов в соответствии с нашими потребностями.
Пример:
Посетите документы начальной загрузки, чтобы узнать больше о параметрах настройки макета сетки переменной длины.
Загрузка спиннеров:
Bootstrap предоставляет базовый счетчик загрузки, а не использует внешние значки и добавляет функциональность.
Пример:
Кроме того, эти блесны также могут быть настроены.
Bootstrap дает вам гораздо больше возможностей для настройки стиля различных вещей. К ним относятся, среди прочего:
- Карты,
- Выпадающие меню,
- Вкладка «Прогресс»,
- Карусель,
- формы,
- Z-индекс и многое другое.
Недостатки
- Если дизайн имеет тенденцию отклоняться от первоначального дизайна, используемого в Bootstrap, иногда могут возникнуть требования для ряда переопределений стиля или перезаписи файлов. В результате много усилий может быть потрачено на создание и кодирование веб-сайта.
- Для создания дизайна может потребоваться сделать все возможное, поскольку, если мы не будем его сильно настраивать, каждый веб-сайт будет выглядеть одинаково.
- Из-за того, насколько многословны стили, они могут создавать чрезмерное количество ненужного вывода HTML.
Заключение
В этой статье мы обнаружили, что Bootstrap — это мощная среда CSS, которая подняла веб-разработку, а именно разработку интерфейса, и сообщество. Он улучшает процесс разработки, предоставляя такие инструменты, как шаблоны и темы, которые можно изменять в соответствии с потребностями проекта. Таким образом, Bootstrap широко используется, а его возможности учитываются и впоследствии улучшаются на благо сообщества разработчиков.
