Bootstrap - Cover Demo
Добро пожаловать,野心勃勃 веб-разработчики! Сегодня мы окунемся в захватывающий мир Bootstrap и рассмотрим красивый компонент под названием "Cover." Как ваш добрососедский учитель компьютера, я рад помочь вам в этом путешествии. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это кодирование приключение вместе со мной!
Что такое Cover?
Прежде чем мы перейдем к коду, давайте поймем, что такое "cover" в контексте веб-дизайна. Cover, часто называемый "герой секцией" или "джumbotron", это большая, привлекающая внимание область в верхней части веб-страницы. Это как обложка книги – предназначена для того, чтобы привлечь внимание и дать访客ам быстрый обзор того, о чем ваш сайт.
Представьте, что вы входите в модный ресторан. Первое, что вы видите, это beautifully decorated вход, который задает тон вашему обеденному опыту. Именно так cover делает для вашего веб-сайта!
Настройка нашего проекта
Чтобы начать, нам нужно настроить наш проект с 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>Моя потрясающая обложка страницы</title>
<!-- Мы добавим Bootstrap CSS здесь -->
</head>
<body>
<!-- Наш cover будет здесь -->
</body>
</html>Это как если бы мы настроили наш холст перед тем, как начать рисовать. Мы создали пустой HTML документ с заголовком и телом.
Шаг 2: Добавление Bootstrap CSS
Теперь добавим немного магии Bootstrap! Добавьте эту строку внутри <head>:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">Эта строка ссылается на CSS файл Bootstrap. Это как если бы мы дали нашей веб-странице модный гардероб для выбора!
Создание Cover
Теперь, когда у нас есть основа, давайте создадим наш cover!
Шаг 3: Добавление структуры cover
Внутри тега <body>, добавьте следующий код:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Главная</a>
<a class="nav-link" href="#">Функции</a>
<a class="nav-link" href="#">Контакт</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Закройте свою страницу.</h1>
<p class="lead">Cover - это одностаничный шаблон для создания простых и красивых домашних страниц. Скачать, отредактировать текст и добавить собственное полноэкранное фоновое изображение, чтобы сделать его своим.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Узнать больше</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Шаблон Cover для <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, автор <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>Ух, это много кода! Давайте разберем его:
- Внешний
<div>создает гибкий контейнер для нашего cover. - Внутри, у нас три основные секции:
<header>,<main>, и<footer>. -
<header>содержит заголовок и навигационные ссылки. - Секция
<main>содержит нашу основную информацию - заголовок, описание и кнопку. -
<footer>предоставляет некоторые crédits (которые вы можете настроить).
Шаг 4: Добавление некоторого пользовательского CSS
Чтобы сделать наш cover еще лучше, добавим немного пользовательского CSS. В секции <head>, добавьте:
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>Этот CSS делает несколько вещей:
- Устанавливает максимальную ширину для нашего cover
- Даёт телу темный фон и белый текст
- Добавляет некоторые微妙ные тени для глубины
- Оформляет наши навигационные ссылки
Соединение всех частей
Теперь, когда у нас есть все части, давайте посмотрим на наш красивый cover в действии! Вот完整的 код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя потрясающая обложка страницы</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Главная</a>
<a class="nav-link" href="#">Функции</a>
<a class="nav-link" href="#">Контакт</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Закройте свою страницу.</h1>
<p class="lead">Cover - это одностаничный шаблон для создания простых и красивых домашних страниц. Скачать, отредактировать текст и добавить собственное полноэкранное фоновое изображение, чтобы сделать его своим.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Узнать больше</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Шаблон Cover для <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, автор <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>Заключение
Поздравляю! Вы только что создали свою первую обложку страницы Bootstrap. Не правда ли, несколько строк HTML и CSS могут создать такой профессионально выглядящий дизайн?
помните, это только начало. Не стесняйтесь экспериментировать с разными цветами, добавлять свой контент или даже включать фоновое изображение, чтобы сделать его по-настоящему вашим. Мир веб-разработки полон возможностей, и вы только что сделали свой первый шаг в это захватывающее путешествие!
Заканчивая, вот quick table ключевых классов Bootstrap, которые мы использовали:
| Класс | Назначение |
|---|---|
| cover-container | Создает гибкий контейнер для cover |
| d-flex | Применяет flexbox макет |
| w-100, h-100 | Устанавливает ширину и высоту на 100% |
| p-3 | Добавляет отступ |
| mx-auto | Центрирует контейнер горизонтально |
| flex-column | Устанавливает направление flex в столбец |
| mb-auto, mt-auto | Добавляет отступ сверху или снизу |
| nav-masthead | Пользовательский класс для стилизации навигации |
| btn btn-lg btn-secondary | Оформляет кнопку |
Продолжайте практиковаться, stay curious, и, самое главное, получайте удовольствие от программирования! До下一次 встречи, счастливого веб-дизайна!
Credits: Image by storyset