مسار التنقل Bootstrap 5 Breadcrumb
-
بنتعلم في هذا الدرس شو يعني Breadcrumb والي من خلالو بنحدد موقع الصفحة الحالية داخل التسلسل الهرمي navigational hierarchy للتنقل الذي يضيف فواصل تلقائيًا عبر CSS.ويستخدم class باسم breadcrumb هنا
لتطبيق هذا الكلام بنستخدم القوائم المرتبة او غير المرتبة ordered or unordered list .
نطبق المثال التالي حتى نفهم كيف بتم التطبيق:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة
اضافة Dividers
تتم إضافة Dividers تلقائيًا في CSS من خلال before:: والمحتوى. في المثال السابق كان Dividers هو الاشارة / طيب هل ممكن نغير هذا الرمز؟؟
اكيد ممكن. يوجد طريقتين يمكن تغيير Dividers من خلالهم :
الطريقة الأولى باستخدام CSS custom property التالية: bs-breadcrumb-divider--
الطريقة الثانية : استخدام Sass variable المسمى breadcrumb-divider$
بنطبق الطريقة الأولى في المثال التالي:
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
------------------------------------
<nav style="--bs-breadcrumb-divider: @@#>@@#;" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</body>
</html>
والنتيجة بتكون :
لاحظ ان تم اضافة الرمز < بين الرمزين @@# @@# في
--bs-breadcrumb-divider: @@#>@@#يمكن ايضا تضمين من الممكن أيضًا استخدام SVG icon. قم بتطبيقه عبر خاصية CSS المخصصة الخاصة بنا ، أو استخدم متغير Sass.
طبق المثال التالي لتفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns=@@#http://www.w3.org/2000/svg@@# width=@@#8@@# height=@@#8@@#%3E%3Cpath d=@@#M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z@@# fill=@@#currentColor@@#/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</body>
</html>
النتيجة بتكون :
يمكنك أيضًا إزالة Dividers عن طريق اضافة لا شي بين الرمزين @@# @@# للكود :
--bs-breadcrumb-divider: @@#@@#طبق الكود التالي :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<nav style="--bs-breadcrumb-divider: @@#>@@#;" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns=@@#http://www.w3.org/2000/svg@@# width=@@#8@@# height=@@#8@@#%3E%3Cpath d=@@#M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z@@# fill=@@#currentColor@@#/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav style="--bs-breadcrumb-divider: @@#@@#;" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</body>
</html>
النتيجة:
اترك تعليقك