Автор темы
Иногда, пользователь должен знать на каком он странице находится, чтобы он постоянно не нажимал "Назад". Для этого, я спалю вот такую и удобную код:
Результат:
P.S Когда нибудь он вам пригодится
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Путь CodeBy</h2>
<p>На данный момент, вы находитесь:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">Premium Codeby</a></li>
<li class="breadcrumb-item"><a href="#">Покупка Codeby</a></li>
<li class="breadcrumb-item"><a href="#">Купить Premium через <strong>кошелек</strong></li></a>
</ul>
</div>
</body>
</html>P.S Когда нибудь он вам пригодится
- AI-выжимка (тезисы)
- Иногда, пользователь должен знать на каком он странице находится :: Хлебные крошки показывают текущую страницу, чтобы пользователь не жал «Назад» постоянно.
Разметка навигации — обычный Bootstrap-компонент breadcrumb со ссылками-элементами пути.
Путь CodeBy :: Пример пути из четырёх шагов: Главная → Premium Codeby → Покупка → покупка через кошелёк.
bootstrap/4.1.0/css/bootstrap.min.css :: Стили подключаются с CDN Bootstrap 4.1.0, свою CSS писать не нужно.
Результат: :: Готовый код с вложением-скриншотом можно скопировать целиком и сразу использовать.
Последнее редактирование модератором: