ASP.NET Web Forms · ОформлениеЗанятие 2.8
SilverTests.ru · УчебникПодключаем Bootstrap
Подключаем Bootstrap
Одна строка в <head> — и страница выглядит профессионально
0Проблема: наши страницы выглядят скучно
Вот конвертер температур, который мы сделали. Он работает, но выглядит как страница из 1999 года: стандартный шрифт, серый фон, кнопки по умолчанию. Хочется, чтобы было красиво, но писать CSS вручную — долго.
Bootstrap — это готовая библиотека CSS-стилей от команды Twitter. Ты просто добавляешь CSS-классы к HTML-элементам, и они мгновенно становятся красивыми. Никакого CSS-кода писать не нужно.
1Подключение: одна строка
Добавь эту строку в <head> любой своей .aspx-страницы:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
Всё. Bootstrap подключён. Это называется CDN (Content Delivery Network) — файл стилей лежит на быстром сервере в интернете, браузер скачает его автоматически.
Плюс CDN: ничего не нужно скачивать и класть в проект. Минус: нужен интернет. Для учебных проектов — идеально.
2Как работает Bootstrap
Bootstrap не меняет твой C#-код. Он работает только с HTML — ты добавляешь CSS-классы через атрибут class, и элементы автоматически стилизуются.
Без Bootstrap
Обычное серое поле, стиль зависит от браузера.
С Bootstrap
<input type="text"
class="form-control">
Аккуратное поле с закруглёнными углами и подсветкой при фокусе.
Единственное, что ты делаешь — дописываешь class="...". В ASP.NET серверных элементах используется атрибут CssClass:
<!-- обычный HTML -->
<input type="text" class="form-control">
<!-- ASP.NET серверный элемент -->
<asp:TextBox ID="txtName" runat="server"
CssClass="form-control" />
CssClass — это свойство серверных элементов ASP.NET, которое превращается в обычный HTML-атрибут class. Работает у TextBox, Button, Label, DropDownList, CheckBox — у всех.
3Шпаргалка: 10 классов, которых хватит
В Bootstrap сотни классов, но для наших страниц достаточно десяти:
| Класс |
Что делает |
Куда добавлять |
container |
Центрирует контент, добавляет отступы по бокам |
Оборачивающий <div> |
form-control |
Красивое поле ввода |
TextBox, DropDownList |
btn |
Базовый стиль кнопки |
Button |
btn-primary |
Синяя кнопка (главное действие) |
+ к btn |
btn-success |
Зелёная кнопка |
+ к btn |
btn-danger |
Красная кнопка |
+ к btn |
mb-3 |
Отступ снизу (margin-bottom) |
Любой элемент |
mt-3 |
Отступ сверху (margin-top) |
Любой элемент |
alert alert-success |
Зелёная плашка для сообщений |
<div> или Label |
alert alert-danger |
Красная плашка для ошибок |
<div> или Label |
mb-3 расшифровывается как margin-bottom: 3. Число от 0 до 5 — чем больше, тем больше отступ. Есть аналоги: mt (top), ms (start/left), me (end/right), p (padding).
4До и после: конвертер температур
Было (без Bootstrap)
<body>
<form id="form1" runat="server">
<h2>Конвертер температур</h2>
<p>Значение:
<asp:TextBox ID="txtValue" runat="server" />
</p>
<asp:Button ID="btnConvert" runat="server"
Text="Перевести" OnClick="BtnConvert_Click" />
<p><asp:Label ID="lblResult" runat="server" /></p>
</form>
</body>
Стало (с Bootstrap)
1<head>
2 <title>Конвертер</title>
3 <!-- Подключаем Bootstrap -->
4 <link rel="stylesheet"
5 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
6</head>
7<body>
8 <div class=
"container mt-5" style=
"max-width:500px">
9 <form id="form1" runat="server">
10
11 <h2 class="mb-4">Конвертер температур</h2>
12
14 <label class="form-label">Значение:</label>
15 <asp:TextBox ID=
"txtValue" runat=
"server"
16 CssClass="form-control" />
17 </div>
18
20 <asp:RadioButton ID=
"rbCF" runat=
"server"
21 Text="C → F" GroupName="dir"
22 CssClass="form-check-input" Checked="true" />
23 <asp:RadioButton ID=
"rbFC" runat=
"server"
24 Text="F → C" GroupName="dir"
25 CssClass="form-check-input" />
26 </div>
27
28 <asp:Button ID=
"btnConvert" runat=
"server"
29 Text="Перевести"
30 CssClass="btn btn-primary"
31 OnClick="BtnConvert_Click" />
32
33 <asp:Label ID=
"lblResult" runat=
"server"
34 CssClass="alert alert-success mt-3"
35 style="display:block" />
36
37 </form>
38 </div>
39</body>
стр 4–5 — подключение Bootstrap через CDN. Одна строка — больше ничего не нужно.
стр 8 — container mt-5 центрирует всё и добавляет отступ сверху. max-width:500px — чтобы форма не растянулась на весь экран.
стр 14 — form-label — аккуратная подпись над полем.
стр 16 — CssClass="form-control" — поле ввода становится красивым.
стр 30 — btn btn-primary — синяя кнопка. Два класса через пробел.
стр 34 — alert alert-success mt-3 — результат в зелёной плашке с отступом сверху.
C#-код не изменился ни на символ. Весь файл .aspx.cs остался таким же. Bootstrap влияет только на внешний вид, не на логику.
5Кнопки: цвета
У кнопок есть 6 основных цветов. Все они используют базовый класс btn + цвет:
| Класс |
Цвет |
Когда использовать |
btn btn-primary |
Синий |
Главное действие (Сохранить, Перевести) |
btn btn-success |
Зелёный |
Подтверждение (Добавить, Готово) |
btn btn-danger |
Красный |
Удаление, отмена |
btn btn-warning |
Жёлтый |
Предупреждение |
btn btn-secondary |
Серый |
Второстепенное действие (Отмена) |
btn btn-outline-primary |
Прозрачный с синей рамкой |
Менее яркий вариант |
Пример — страница со списком дел с двумя кнопками разных цветов:
<asp:Button ID="btnAdd" runat="server" Text="Добавить"
CssClass="btn btn-success" OnClick="BtnAdd_Click" />
<asp:Button ID="btnClear" runat="server" Text="Очистить"
CssClass="btn btn-outline-danger" OnClick="BtnClear_Click" />
6Сообщения: alert
Плашки для уведомлений — ошибки, успехи, предупреждения. Удобно для результата или сообщений валидации:
| Класс |
Вид |
Когда |
alert alert-success |
Зелёная плашка |
Успех: «Сохранено!» |
alert alert-danger |
Красная плашка |
Ошибка: «Введи число!» |
alert alert-warning |
Жёлтая плашка |
Предупреждение |
alert alert-info |
Голубая плашка |
Подсказка |
Класс можно менять из C# в зависимости от результата:
if (!ok)
{
lblResult.Text = "Введи число!";
lblResult.CssClass = "alert alert-danger mt-3";
}
else
{
lblResult.Text = value + " °C = " + result + " °F";
lblResult.CssClass = "alert alert-success mt-3";
}
CssClass можно не только задавать в разметке, но и менять из C#-кода — в зависимости от логики. Ошибка — красная, успех — зелёная.
7Таблицы: GridView + Bootstrap
GridView тоже поддерживает CssClass. Одна строка превращает таблицу из серой в красивую:
<asp:GridView ID="gvTasks" runat="server"
CssClass="table table-striped table-hover"
AutoGenerateColumns="false"
DataKeyNames="Id" >
| Класс |
Что делает |
table |
Базовый стиль таблицы (отступы, линии) |
table-striped |
Чередование серых и белых строк |
table-hover |
Подсветка строки при наведении мышки |
table-bordered |
Рамки у всех ячеек |
table-sm |
Компактная таблица (меньше отступы) |
Классы комбинируются: "table table-striped table-hover table-sm" — компактная полосатая таблица с подсветкой.
8Паттерн страницы с Bootstrap
Вот шаблон, который можно использовать для любой новой страницы:
1<%@ Page Language="C#" CodeBehind="MyPage.aspx.cs"
2 Inherits="MyFirstSite.MyPage" %>
3
4<!DOCTYPE html>
5<html>
6<head>
7 <title>Название</title>
8 <link rel="stylesheet"
9 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
10</head>
11<body>
12 <div class=
"container mt-4" style=
"max-width:600px">
13 <form id="form1" runat="server">
14
15 <h2 class="mb-4">Заголовок</h2>
16
17 <!-- поле ввода -->
19 <label class="form-label">Подпись:</label>
20 <asp:TextBox ID=
"txt1" runat=
"server"
21 CssClass="form-control" />
22 </div>
23
24 <!-- кнопка -->
25 <asp:Button ID=
"btn1" runat=
"server"
26 Text="Действие"
27 CssClass="btn btn-primary"
28 OnClick="Btn1_Click" />
29
30 <!-- результат -->
31 <asp:Label ID=
"lblResult" runat=
"server"
32 CssClass="alert alert-info mt-3"
33 style="display:block" />
34
35 </form>
36 </div>
37</body>
38</html>
стр 8–9 — CDN-подключение Bootstrap. Скопируй эти строки в любую новую страницу.
стр 12 — container + ограничение ширины. Без этого форма растянется на весь экран.
стр 18–22 — стандартная обёртка для поля: div.mb-3 → label.form-label → TextBox.form-control.
9Задание: прокачай свои страницы
Открой конвертер температур или генератор паролей из прошлых заданий и добавь Bootstrap. Чек-лист:
1. Добавить <link> в <head>
2. Обернуть содержимое в <div class="container">
3. Добавить CssClass="form-control" ко всем TextBox и DropDownList
4. Добавить CssClass="btn btn-primary" к кнопке
5. Добавить CssClass="alert alert-success mt-3" к Label с результатом
6. Обернуть каждое поле в <div class="mb-3">
Потрать 10 минут — и обе страницы будут выглядеть как настоящее веб-приложение. C#-код менять не нужно.
Итоги
Bootstrap подключается одной строкой в <head> через CDN. Стилизация — через CSS-классы в атрибуте CssClass у серверных элементов. Десяти классов хватает для большинства форм: container, form-control, form-label, btn btn-*, alert alert-*, mb-*, mt-*, table table-striped. C#-код не меняется — Bootstrap влияет только на внешний вид. CssClass можно менять из C# динамически — показывать зелёную или красную плашку в зависимости от результата.
На следующем занятии: подключаем базу данных — храним данные, которые не исчезают при перезагрузке.