دليل الأساسيات لـ Bootstrap4

النموذج في Bootstrap4 شريط التصفح في Bootstrap4

واجهة تحديد المسار في Bootstrap4 (Breadcrumb)

واجهة تحديد المسار هي خطة توجيه تُظهر للمستخدم موقع الصفحة الحالية في الموقع أو التطبيق. يمكن لـ واجهة تحديد المسار في التوجيه أن تزيد من قابلية الوصول إلى المواقع التي تحتوي على عدد كبير من الصفحات أو بنية توجيه معقدة.

واجهة تحديد المسار هي طريقة عرض تعتمد على معلومات الطبقات في الموقع. على سبيل المثال، يمكن لـ واجهة تحديد المسار في المدونة عرض تاريخ النشر أو الفئة أو العلامة. إنها تمثل موقع الصفحة في بنية التوجيه، وهي وسيلة مساعدة في واجهة المستخدم للتنقل.

تعرف واجهة تحديد المسار في Bootstrap كواجهة بسيطة تحتوي على .breadcrumb قائمة غير مرتبة لـ class. يمكن إضافة علامات الترقيم من خلال CSS (bootstrap.min.css) باستخدام ::before و content، وتكون الكلاسات التالية مضافة تلقائيًا كما يظهر أدناه:

.breadcrumb-item + .breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: #6c757d;
　　content: "/";
}

يمكنك استخدام ميزة .breadcrumb في القائمة المرتبة لإنشاء تصميم خبز ثابت باستخدام Bootstrap، مثل مثال توجيهات الخبزBootstrap4 التالية

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">المنزل</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">المنزل</a></li>
　　<li class="breadcrumb-item active">المكتبة</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">المنزل</a></li>
　　<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
　　<li class="breadcrumb-item active">بيانات</li>
</ol>
</body>
</html>

اختبار لرؤية ‹/›

يمكننا أيضًا عدم استخدام شكل القائمة:

مثال على توجيهات الخبزBootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="breadcrumb">
　　<a class="breadcrumb-item" href="#">Home</a>
　　<a class="breadcrumb-item" href="#">Library</a>
　　<a class="breadcrumb-item" href="#">Data</a>
　　<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</body>
</html>

اختبار لرؤية ‹/›

تأثير التشغيل كما يلي:

النموذج في Bootstrap4 شريط التصفح في Bootstrap4