شريط التنقل Bootstrap 5 Navbars
-
بنتلعم في هذا الدرس شو Navbars ولشو يستخدم وكيف ممكن نتحكم ونغير المواصفات الخاصه به. يعتبر شريط التنقل اداه قوية في Bootstrap واكيد بكون قابل للتعديل حسب حجم الشاشةresponsive navigation header. وعادتا بكون في راس الصفحه. يحتوي على الروابط الخاصة بالموقع
تمام وحتى نفهم الموضوع اولا نطبق مثال عملي:
طبق الكود التالي في صفحة 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://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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-fill">
<div class="container-fluid">
<a class="navbar-brand" href="#">Devkum Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</body>
</html>
النتيجة:
نفهم الكود:
في البداية طبقنا class باسم container-fluid الي بيعني تطبيق هذا Navbar على جميع الصفحة. بعد هيك اضنفا <nav> وطبقنا عليه مجموعة classes هي
navbar navbar-expand-lg navbar-light bg-light nav-fill
وهي المسؤوله عن عرض navbar بالشكل المطلوب. بعد هيك اضفنا <div>وطبقنا عليه class باسم container-fluid. بعد هيك اضفنا الروابط المطلوب عرضها في الشريط. بقية الكود حكينا عنو في الدروس السابقه.
نجرب نصغر الشاشة ونشوف النتيجة:
في هذا المثال طبقنا مجموعه من الاشياء مثل :
text box
Button
Drop down
تغير لون الخلفيه Colored Navbar
بنفس الطرق السابقه الي حكينا عنها ممكن نغير لون الخلفية باسخدام واحد من class الجاهزه في Bootstrap مثل :
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light
نجرب نطبق واحد من هذه classes مثلا bg-danger
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-danger nav-fill">
<div class="container-fluid">
<a class="navbar-brand" href="#">Devkum Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</body>
</html>
النتيجة بتكون:
اضافة الشعار / العلامة التجارية Brand / Logo
يمكن استخدام class باسم navbar-brand لتطبيق الشعار.
تمام نطبق هذا الكلام على المثال السابق :
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-fill">
<div class="container-fluid">
<img class="navbar-brand " src="logo.png" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</body>
</html>
النتيجة بتكون :
ممكن تطبيق class لجعل الصورة بشكل دائري وهذا class هو rounded-pill.
نطبق الكود التالي ونشوف النتيجة:
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-fill">
<div class="container-fluid">
<img class="navbar-brand rounded-pill border" style="width:80px;height:80px" src="avatar.jpg" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</body>
</html>
النتيجة:
طبقنا هنا مجموعه من classes وهي
navbar-brand يستخدم مع العلامات التجارية والشعارات.
rounded-pill هو المسؤول عن عرض الصورة بشكل دائري.
border اعطاء اطار للصورة .
تثبيت شريط التنقل Fixed Navigation Bar
يمكن تثبيت شريط التنقل في الشاشة في اعلى او اسفل الشاشة بحيث يبقى ظاهر عند عمل scroll للصفحة. ولتطبيق هذا الكلام بنستخدم classes التالية:
fixed-top. : تثبيت الشريط في الاعلى.
fixed-bottom. : تثبيت الشاشة في الاسفل.
تمام نطبق امثلة حتى نفهم الموضوع:
مثال على fixed-top.
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-fill fixed-top">
<div class="container-fluid">
<img class="navbar-brand rounded-pill border" style="width:80px;height:80px" src="avatar.jpg" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:80px">
<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top ) independent of the page scroll.</p>
<h1>Scroll this page to see the effect</h1>
</div>
</div>
</body>
</html>
النتيجة:
لاحظ ان scroll تحرك لتحت، لكن Navbar بقي مكان في اعلى الشاشة.
مثال على fixed-bottom.
نفس الكود السابق الفرق الوحيد هو اضافة class باسم fixed-bottom. بدل من fixed-top.
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid ">
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-fill fixed-bottom">
<div class="container-fluid">
<img class="navbar-brand rounded-pill border" style="width:80px;height:80px" src="avatar.jpg" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2 </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Service</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:200px">
<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top ) independent of the page scroll.</p>
<h1>Scroll this page to see the effect</h1>
</div>
</div>
</body>
</html>
النتيجة بتكون navbar ثابت اسفل الصفحة:
تطبيق sticky-top class.
في هذا class يتم تثبيت مكان Navbar في اعلى الشاشة عند تحرك Scroll الصفحة(ممكن يكون مكان Navbar في مكان غير اعلى الشاشة في البدايه). وبنطبق هذا الكلام باستخدام class باسم sticky-top
نفس الكود السابق لكن الفرق الوحيد هو استخدام class باسم sticky-top
اترك تعليقك