Компоненты Bootstrap

Содержание

Как узнать какая версия Bootstrap используется
Добавление Bootstrap в проект
Уведомления (alerts)
Значки (badge)
Кнопки (btn)
Панели навигации (navbar)
Выпадающие списки (dropdown)
Пагинация (pagination)
Итого

Bootstrap 5.2.2 содержит достаточно много различных компонентов, позволяющих разрабатывать по-настоящему красивые приложения. Часть компонентов Bootstrap можно использовать в Blazor сразу, после создания демонстрационного приложения, часть — только после подключения необходимых js-файлов, распространяемых bootstrap, но не входящих в состав демонстрационного приложения. В этой части мы рассмотрим только основные компоненты Bootstrap и их возможности.

Как узнать какая версия Bootstrap используется

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

Здесь и далее в статьях про Bootstrap будут рассматриваться вопросы, связанные с Bootstrap v.5.2.2

Чтобы узнать, какая версия Bootstrap у вас, достаточно открыть файл bootstrap.css или bootstrap.min.css и посмотреть на вторую строку комментария:

@charset "UTF-8";/*!
 * Bootstrap v5.1.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

Добавление Bootstrap в проект

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

Скачать архив соответствующей версии bootstrap с официального сайта

В архиве содержатся все необходимые css- и js-файлы.

В проекте Blazor

зайти в папку wwwroot/css/bootstrap и добавить (или заменить) файлы bootstrap.min.css и bootstrap.min.css.map
добавить в папку wwwroot новую папку js/bootstrap и скопировать в нее файлы bootstrap.bundle.js и bootstrap.bundle.js.map

В Visual Studio должна получиться следующая структура папок и файлов:

В Blazor Server все скрипты и css подключаются в файле _Layout.cshtml. Открываем этот файл и добавляем после строки <script src="_framework/blazor.server.js"></script> следующую строку:

<script src="/js/bootstrap/bootstrap.bundle.js"></script>

Теперь вы можете в полной мере использовать возможности bootstrap в своем приложении blazor, включая и те компоненты bootstrap, которые требуют специальных js-скриптов.

Уведомления (`alerts`)

Уведомления — это небольшие сообщения, которые могут показываться пользователю при совершении каких-либо действий. Пример уведомления, вы можете видеть в начале этой статьи. В bootstrap для создания уведомления используется класс alert:

<div class="alert alert-danger">Это уведомление</div>

Здесь alert — класс компонента, alert-danger — обязательный контекстный класс, позволяющий сделать заливку определенным цветом. В нашем случае, уведомление будет выглядеть следующим образом:

Всего в bootstrap предусмотрено восемь обязательных контекстных классов для уведомлений:

Значки (`badge`)

Значки позволяют, при необходимости, акцентировать внимание на каком-либо элементе интерфейса. Например, мы можем «повесить» значок на какой-либо текст или заголовок. В примере ниже показаны два значка, один из которых привязан к заголовку страницы, а второй — к обычному тексту:

<h1>Hello, world! <span class="badge bg-primary">Breaking news!</span> </h1>

Welcome to your new app.<span class="badge bg-warning">значки масштабируются!</span>

В приложении это будет выглядеть следующим образом:

Даже по коду примера видно, что мы не применяли никаких дополнительных классов для масштабирования значка. Значки автоматически масштабируются, чтобы наиболее полно соответствовать элементу к которому они относятся. Как и для alert у badge можно указывать один из восьми цветов заливки, используя класс bg-*. Если необходимо изменить цвет текста (например, в желтом значке выше текст плохо читаемый), то можно добавить класс text-dark:

<span class="badge bg-warning text-dark">значки масштабируются!</span>

Кнопки (`btn`)

Bootstrap предоставляет нам широкие возможности по изменению визуального представления обычных кнопок <button>, используемых в формах и различных элементах интерфейса.

Цветные кнопки и кнопки-ссылки

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Контурные кнопки

Если нам необходимо, чтобы заливка кнопки осуществлялась в момент наведения на неё курсора мыши, то вместо контекстных классов btn-* необходимо использовать классы btn-outline-*

Для изменения цвета текста на чёрный также можно использовать text-dark

Размеры кнопок

Кнопки можно сделать большего или меньшего размера, чем стандартный. Для этого используются два дополнительных класса — btn-sm или btn-lg. Действие этих классов на размеры кнопок показаны ниже

<button type="button" class="btn btn-outline-primary btn-sm">Primary btn-sm</button>
<button type="button" class="btn btn-outline-secondary btn">Secondary</button>
<button type="button" class="btn btn-outline-success btn-lg">Success btn-lg</button>

Панели навигации (`navbar`)

Панель навигации — этот тот компонент, с которым мы сталкиваемся сразу же после запуска приложения Blazor. Рассмотрим этот компонент Bootstrap более детально. В Blazor Server этот компонент располагается внутри компонента Blazor NavMenu в файле NavMenu.razor:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorBootstrap</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

Первый элемент div указывает, что перед нами панель навигации (класс navbar), цветовая схема — для тёмных цветов фона (navbar-dark). Класс top-row содержится в связанном css-файле NavMenu.razor.css:

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

Для панели навигации делается внутренний отступ (класс ps-3). В данном случае, класс ps-3 означает следующее:

p — класс устанавливает padding
s — (старт) отступ слева
3 — величина отступа, равная значению переменной SAAS $spacer (по умолчанию это значение равно 1rem)

rem — это единица типографики, равная корневому (базовому) значению font-size. Это значит, что 1rem всегда будет равен значению font-size, которое было определено в html.

Более подробно про отступы и интервалы можно прочитать в документации Bootstrap.

Далее, во второй строке кода навигационной панели определяется контейнер:

<div class="container-fluid">

про контейнеры мы говорили здесь. В контейнере расположен специальный элемент — т.н. брэнд:

<a class="navbar-brand" href="">BlazorBootstrap</a>

В примере в качестве брэнда используется обычная ссылка, однако вы можете использовать и картинки и картинки со ссылками в качестве брэнда.

После брэнда расположена кнопка со специальными классами:

<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>

Класс navbar-toggler — означает, что кнопка будет использоваться для переключения содержимого. В нашем случае эта кнопка, при определенных размерах экрана, сворачивает или разворачивает меню с элементами «Counter», «FetchData» и т.д. Внутри тега button располагается элемент span, который определяет иконку на кнопке.

Далее, в компоненте NavMenu.razor расположена навигация:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

Первый элемент div определяет сворачиваемое содержимое (если посмотреть в C#-код компонента, то можно увидеть, что этому элементу присваивается класс collapse)

Второй элемент <nav class="flex-column"> говорит о том, что перед нами навигация и, при этом, элементы расположены в столбце (class="flex-column"). Внутри этого элемента расположены, собственно, сами элементы меню (элементы с классом nav-item). При этом, классы типа oi oi-plus у элементов span — это иконки из другого фреймворка — Open Iconic.

Выпадающие списки (`dropdown)`

Кнопки с выпадающими списками также довольно часто могут использоваться в приложениях. В Bootstrap имеется готовый компонент для таких кнопок:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
  </ul>
</div>

Для того, чтобы создать такую кнопку мы должны внутри тега div с классом dropdown указать кнопку, которая будет отвечать за показ списка. Кнопка должна обязательно содержать контекстный класс dropdown-toggle (кнопка переключения списка) и атрибуты id и data-bs-toggle. Вместо кнопки может также выступать обычная ссылка с указанными классами.

Пагинация (`pagination)`

Пагинация позволяет сделать удобную навигацию по отдельным страницам одного набора данных, например при постраничном запросе.

<nav aria-label="Пример навигации по страницам">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
  </ul>
</nav>

Итого

Компоненты Bootrstrap позволяют сделать ваше приложение более функциональным и красивым. В статье рассмотрены далеко не все имеющиеся компоненты и возможности фреймворка bootstrap в blazor — компонентов намного больше. Сейчас же нам главное понять, что, используя bootstrap мы можем комбинировать те или иные компоненты — включать в состав кнопок значки (badge), добавлять в панели навигации кнопки с выпадающими списками и т.д. В дальнейшем мы будем возвращаться к теме использования bootstrap в Blazor, но, уже, исходя из полученных знаний и с более практической целью — рассматривать конкретные вопросы и моменты использования того или иного компонента bootstrap в blazor.

Как узнать какая версия Bootstrap используется

Добавление Bootstrap в проект

Уведомления (alerts)

Значки (badge)

Кнопки (btn)