Bootstrap 5 Navs
-
يستخدم nav لانشاء قائمة أفقية horizontal menu بسيطة ،لعمل ذلك بنضيف class باسم nav. إلى ul> element> ، وبعدها بنضيف class باسم بـ nav-item. لكل <li> وايضا بنضف class باسم nav-link. إلى الروابط.
تمام نطبق مثال بسيط حتى نفهم الفكره.
<!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 m-5 ">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
النتيجة بتكون :
تمام نفهم الكود وشو عملنا.
اضفنا <ul> وطبقنا عليها class باسم nav الي بتكون الحاوية الاب للمحتويات. وبعدها اضغنا Items في هذا القائمة الافقيه. وكل Item طبقنا عليه class باسم nav-item. واذا كان المطلوب عرض هذا item على شكل رابط بنستخدم <a>، وبنطبق عليها class باسم nav-link.
اول رابط طبقنا عليه class باسم active الى بيدل على ان هذا الرابط نشط active
اخر رابط طبقنا عليه class باسم disabled الي بيدل على ان هذا الرابط غير مفعل
محاذاة القائمة Aligned Nav
يمكن التحكم بمكان واتجاه القائمة في Bootstrap عن طريق تطبيق مجموعه من classes
الوضع الافتراضي للقائمة بكون باتجاه اليسار الى اليمين.
الجدول التالي يوضح كل class واتجاه المحاذاه
| اسم class | المحاذاه |
| justify-content-center | محاذاه الى المنتصف |
| justify-content-end | محاذاه الى اليمين |
نطبق مثال حتى نفهم الموضوع.
<!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 m-5 ">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
النتيجة:
تطبيق قائمة بشكل رأسي Vertical
ممكن عرض القائمة على شكل راسي باستخدام class باسم flex-column. هذا class بعمل على تكديس الروابط فوق بعض.
نطبق مثال حتى نفهم.
<!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 m-5 ">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">ش
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
النتيجة:
التبويب Tabs
علامات التبويب هي فواصل تستخدم لفصل مكونات المحتوى حسب النوع وبكون كل نوع في جزء منفصل. ويمكن عرض جزء واحد فقط في كل مرة.
يمكن انشاء Tabs باستخدام nav-tabs class.
ملاحظة: tabs بتشتغل باستخدام JavaScript لذا من الضروري اضافة ملفات ال Jquery الي بتحتوي على كود Javascript شوف الرابط تحت بالاصفر اضفنا رابط لملف Jquery
نطبق مثال حتى نفهم الموضوع:
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Devkum Home , Devkum Home, Devkum Home
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Devkum Profile, Devkum Profile, Devkum Profile,
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Devkum Contact, Devkum Home Profile, Devkum Home Profile,
</div>
</div>
</div>
</body>
</html>
النتيجة:
تمام التمام نفهم شو عملنا.
اضفنا <nav> الاب ب Id يساوي MyTab وطبقنا عليه class باسم nav nav-tabs. وبعد هيك اضفنا Items المطلوب عرضها في القائمة وكل item طبقنا عليه class باسم nav-item، وداخل كل item اضفنا رابط باستخدام <a> وطبقنا عليها class باسم nav-link.
كل رابط <a> تم اضافة Id له. وفي كل واحد استخدمنا الكود "data-toggle="tab الي بيدل على ان هذا رابط مع tab وبعدها اضفنا href لكل واحد وعملنا ربط بين هذا الرابط والمحتوي المطلوب اظهاره.
الكود:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
</ul>
المحتوى المطلوب اظهاره تم اضافته في <div> وتم تطبيق class باسم tab-content عليه. واضفنا داخلو مجموعه من <div> وتم اضافة Id لكل واحد الي هو نفس Id الي ربطنا معو من الرابط السابق.
الكود: (لاحظ مثلا المحتوي الاول الو id يساوي home وهو نفس الاسم الى تم الربط فيه في "href="#home
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Devkum Home , Devkum Home, Devkum Home
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Devkum Profile, Devkum Profile, Devkum Profile,
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Devkum Contact, Devkum Home Profile, Devkum Home Profile,
</div>
</div>
تطبيق Pills
لتطبق Pills على tabs نفس الكود السابق الفرق الوحيد هو استخدام class باسم .nav-pills
مثال
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Devkum Home , Devkum Home, Devkum Home
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Devkum Profile, Devkum Profile, Devkum Profile,
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Devkum Contact, Devkum Home Profile, Devkum Home Profile,
</div>
</div>
</div>
</body>
</html>
النتيجة:
تطبيق Fill and justify
الفكره هون هو تطبيق العرض الكامل للروابط في القائمة حسب العرض المتاح. بهدف ملء جميع المساحة المتاحة بشكل متناسب مع nav-items
لتطبيق هذا الكلام بنستخدم class باسم nav-fil. بناء عليه بتكون النتيجة ان كل المساحه الافقيه horizontal space مشغوله. واكيد عرض كل item مختلف حسب حجم المحتوي الموجود فيه.
نطبق المثال التالي:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Devkum Home , Devkum Home, Devkum Home
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Devkum Profile, Devkum Profile, Devkum Profile,
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Devkum Contact, Devkum Home Profile, Devkum Home Profile,
</div>
</div>
</div>
</body>
</html>
النتيجة:
حاول تكبر وتصغر حجم الشاشة ، اكيد بكون حجم الرابط متغير حسب حجم الشاشة.
Tabs with Dropdown
نشوف كيف ممكن نضيف قائمة منسدله داخل tabs على شكل منيو افقيه.
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Devkum Home , Devkum Home, Devkum Home
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Devkum Profile, Devkum Profile, Devkum Profile,
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Devkum Contact, Devkum Home Profile, Devkum Home Profile,
</div>
</div>
</div>
</body>
</html>
النتيجة:
اترك تعليقك