Bootstrap - Примерidebar Demo
Здравствуйте, стремящиеся веб-разработчики! Сегодня мы отправляемся в увлекательное путешествие в мир боковых панелей Bootstrap. Как ваш доброжелательный сосед по компьютерным наукам, я с радостью проведу вас через эту тему. Так что возьмите любимый напиток, устройтесь поудобнее и lets-дайв!
Что такое боковая панель?
Прежде чем мы начнем кодить, давайте поймем, что такое боковая панель на самом деле. Представьте, что вы читаете книгу, и на стороне страницы есть узкая колонка с дополнительной информацией или быстрыми ссылками. Это essentially то, что такое боковая панель в веб-дизайне!
Боковая панель - это вертикыюльная колонка, обычно размещенная слева или справа от веб-страницы. Она часто содержит навигационные ссылки, дополнительную информацию или другой контент, который дополняет основное содержимое области. Боковые панели помогают организовать информацию и улучшить пользовательский опыт, предоставляя быстрый доступ к важным элементам.
Создание базовой боковой панели с использованием Bootstrap
Теперь, когда мы знаем, что такое боковая панель, давайте создадим одну с использованием Bootstrap. Мы начнем с простого примера и постепенно будем его улучшать.
Шаг 1: Настройка HTML структуры
Сначала нам нужно настроить нашу HTML структуру. Вот базовый шаблон:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Боковая панель -->
<div class="col-md-3 sidebar">
<!-- Содержимое боковой панели будет здесь -->
</div>
<!-- Основное содержимое -->
<div class="col-md-9 main-content">
<!-- Основное содержимое будет здесь -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>В этом шаблоне мы создали контейнер с двумя колонками: одна для боковой панели (3 единицы wide) и одна для основного содержимого (9 единиц wide).Bootstrap использует 12-колоночный网格овый систем, так что эти числа складываются до 12.
Шаг 2: Добавление содержимого в боковую панель
Давайте добавим немного содержимого в нашу боковую панель:
<!-- Боковая панель -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Меню Боковой Панели</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Домой</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Услуги</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>Здесь мы добавили заголовок и список навигационных ссылок на нашу боковую панель. Класс bg-light придает ей легкий цвет фона.
Шаг 3: Добавление основного содержимого
Давайте добавим немного содержимого в основную область:
<!-- Основное содержимое -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Добро пожаловать на наш сайт</h1>
<p>Это основная область содержимого. Здесь будет отображаться основная информация вашей страницы.</p>
</div>Улучшение боковой панели
Теперь у нас есть базовая боковая панель, давайте улучшим ее с помощью дополнительных функций.
Добавление поля поиска
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Меню Боковой Панели</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Поиск</button>
</form>
<!-- ... оставшаяся часть содержимого боковой панели ... -->
</div>Это добавляет поле поиска в верхнюю часть нашей боковой панели, давая пользователям быстрый способ найти контент.
Добавление выпадающих меню
Давайте добавим выпадающее меню на нашу боковую панель:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Продукты
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Продукт 1</a></li>
<li><a class="dropdown-item" href="#">Продукт 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Специальное предложение</a></li>
</ul>
</li>Добавьте этот код внутри <ul class="nav flex-column"> на вашей боковой панели. Это создает выпадающее меню для "Продуктов".
Делаем боковую панель адаптивной
Одна из задач с боковыми панелями - это сделать их хорошо работающими на мобильных устройствах. Давайте сделаем нашу боковую панель адаптивной:
<div class="container-fluid">
<div class="row">
<!-- Боковая панель -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Переключить Боковую Панель
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... содержимое боковой панели ... -->
</div>
</div>
<!-- Основное содержимое -->
<div class="col-md-9 main-content">
<!-- ... основное содержимое ... -->
</div>
</div>
</div>Мы добавили кнопку переключения, которая появляется только на малых экранах (d-md-none), и обернули содержимое нашей боковой панели в collapsible div. На больших экранах боковая панель всегда будет видна (d-md-block).
Оформление боковой панели
Наконец, давайте добавим немного пользовательского CSS, чтобы наша боковая панель выглядела еще лучше:
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Добавьте это в <head> вашего HTML. Этот CSS делает боковую панель полной высоты, добавляет легкую тень и стилизует навигационные ссылки.
Заключение
Поздравляю! Вы только что создали полностью функциональную, адаптивную боковую панель Bootstrap. Помните, что практика makes perfect, так что не бойтесь экспериментировать с различными макетами и стилями.
Вот таблица, резюмирующая ключевые классы Bootstrap, которые мы использовали:
| Класс | Назначение |
|---|---|
| container-fluid | Создает контейнер полной ширины |
| row | Создает горизонтальную группу колонок |
| col-md-3 | Создает колонку 3 единицы wide на средних экранах и выше |
| bg-light | Добавляет легкий цвет фона |
| nav | Indicates a navigation component |
| nav-item | Styles a navigation item |
| nav-link | Styles a navigation link |
| dropdown | Создает выпадающее меню |
| btn | Styles a button |
| form-control | Styles form inputs |
Продолжайте кодить, продолжайте учиться и, самое главное, получайте удовольствие! Помните, каждый мастер когда-то был начинающим. Ваш путь в веб-разработке только начинается, и я兴奋 чтобы увидеть, куда он васведет!
Credits: Image by storyset