Фреймворк Bootstrap в Blazor

Так как Blazor — это фреймворк для разработки web-приложений (в основном, но не только), то так или иначе, нам приходится вникать или заново изучать визуальную часть разработки приложения — вспоминать как использовать CSS, разрабатывать шаблоны страниц нашего приложения и т.д. Что касается визуального оформления приложения, то разработчики blazor позаботились о нашем удобстве и уже в шаблонном приложении blazor мы можем найти замечательный css-фреймворк — Bootstrap. И в этой части руководства мы будем изучать основы работы с этим фреймворком в наших приложениях.

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

Bootstrap в Blazor

В обеих вариантах Blazor фреймворк Bootstrap входит в несколько «урезанном» виде. Так, для включения всех возможностей Bootstrap требуется использование не только css-файлов, но и скриптов js, которые находятся в файле bootstrap.js. Однако, если посмотреть на состав проектов Blazor, то мы можем увидеть только css-файл bootstrap:

Но, даже в неполном виде, возможностей bootstrap хватает с лихвой для создания красивых приложений в Blazor.

Для Blazor Server фреймворк bootstrap подключается в файле _Layout.cshtml, а для Blazor WebAssembly — в файле index.html. Подключается css обычным образом — с использованием тега link:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Основа Bootstrap — контрольные точки

Контрольные точки (breakpoints) — это триггеры настраиваемой ширины, которые определяют поведение адаптивного макета Bootstrap в зависимости от размеров устройства или области просмотра. Так, с точки зрения разработчиков, абсолютно все устройства на которых запускаются наши приложения можно условно поделить на шесть групп, в зависимости от размеров экрана:

Как используются те или иные контрольные точки увидим далее.

Позиционирование элементов в Bootstrap (контейнеры и сетки)

При построении интерфейса с помощью Bootstrap используются два фундаментальных для Bootstrap понятия — сетка и контейнер.

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

• .container— устанавливает максимальную ширину max-width в каждой контрольной точке;
• .container-fluid— ширина width: 100% на всех контрольных точках;
• .container-{breakpoint}— ширина контейнера width: 100% до указанной контрольной точки.

В зависимости от того, какой вид контейнера будет выбран, будет изменяться его максимальная ширина. Внутри контейнеров могут располагаться сетки (grid), состоящий из строк (row) и столбцов (col). Рассмотрим применение контейнеров и сеток на примере Blazor Server. По умолчанию главная страница приложения имеет следующий код:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Разместим внутри страницы сетку Bootstrap с одной строкой и двумя столбцами в каждый из которых поместим по опросу (компонент SurveyPrompt):

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, bootstrap!</h1>

Это пример сетки bootstrap

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <SurveyPrompt Title="How is Blazor working for you?" />
        </div>
        <div class="col">
            <SurveyPrompt Title="Как вам Bootstrap?" />
        </div>
    </div>
</div>

Здесь мы разместили контейнер, который будет занимать 100% ширины для всех контрольных точек. Внутри контейнера мы разместили сетку. class="row" указывает на то, что мы создаем строку сетки, а class="col" — столбец. Теперь можем запустить приложение и увидеть результат:

Оба столбца заняли одинаковое пространство внутри строки, а сам контейнер занял всю доступную для него ширину. Чтобы увидеть работу контрольных точек в действии, поменяем класс нашего контейнера с container-fluid на, например, на container-sm (для экранов с шириной до 576px. В этом случае контейнер с сеткой будет выглядеть следующим образом:

Если же мы начнем менять размер окна браузера, то при достижении определенной ширины столбцы сетки начнут переноситься таким образом, чтобы всё содержимое сетки попало в область экрана:

Строки и столбцы сетки

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

Чтобы указать ширину столбца используется запись вида: col-{число}. Например, сделаем так, чтобы левый столбец стал в 2 раза шире, чем правый:

<div class="container-fluid">
    <div class="row">
        <div class="col-8">
            <SurveyPrompt Title="How is Blazor working for you?" />
        </div>
        <div class="col-4">
            <SurveyPrompt Title="Как вам Bootrap?" />
        </div>
    </div>
</div>

Теперь левый столбец займет 8 условных столбцов из 12, а правый — четыре. На экране это будет выглядеть следующим образом:

Для разных размеров экранов мы можем указывать различную ширину столбцов. Например:

<div class="container">
    <div class="row">
        <div class="col-xxl-8 col-sm-4">
            <SurveyPrompt Title="How is Blazor working for you?" />
        </div>
        <div class="col-xxl-4 col-sm-8">
            <SurveyPrompt Title="Как вам Bootstrap?" />
        </div>
    </div>
</div>

Здесь мы указали, что при размере экрана ≥1400px левый столбец будет в 2 раза шире правого, а при размере экрана ≥576px — наоборот, правый столбец будет больше левого. Теперь можем запустить приложение, уменьшить окно браузера и убедиться, что при достижении определенной ширины экрана правый столбец становиться больше левого:

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

Отступы

Классы offset-(md|sm|lg|...)-{число} позволяют определять смещение относительно левого блока или начала строки в условных единицах. Например, сместим правый блок в нашей сетке относительно левого на 4 единицы:

<div class="container">
    <div class="row">
        <div class="col-xxl-4">
            <SurveyPrompt Title="How is Blazor working for you?" />
        </div>
        <div class="col-xxl-4 offset-xxl-4">
            <SurveyPrompt Title="Как вам Bootstrap?" />
        </div>
    </div>
</div>

Теперь наша сетка будет выглядеть следующим образом:

Таким образом, регулируя отступы, размеры сеток и контейнеров мы можем создавать интерфейсы приложений, выглядящих одинаково красиво и удобно на любых устройствах. Конечно, возможности настройки сеток в Bootstrap намного более широкие, например, можно устанавливать не только отступы, но и разрывы (промежутки) между элементами сеток. Но для первого знакомства с Bootstrap в Blazor ограничимся вышеизложенным.

Итого

Bootstrap — это css-фреймворк, позволяющий создавать отзывчивый, адаптивный интерфейс для ваших приложений, используя концепцию контейнеров и сеток. В Blazor фреймворк Bootstrap включен по умолчанию. Интерфейс строится с помощью контейнеров и сеток. Каждая сетка может иметь неограниченное количество строк (row), а каждая строка — не более 12 столбцов (col). Исходя из этого, при построении интерфейса мы можем указывать ширину элементов сетки в условных единицах, а Bootstrap, в зависимости от размера экрана будет позиционировать элементы и устанавливать их абсолютную ширину таким образом, чтобы интерфейс приложения выглядел одинаково красиво на экранах любых размеров.