أشرطة التنقل

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">العلامة التجارية</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#">الميزات</a> </li> <li class="nav-item"> <a class="nav-link" href="#">الأسعار</a> </li> </ul> </div> </div> </nav>

<!-- علامة نصية --> <a class="navbar-brand" href="#">علامتي التجارية</a> <!-- علامة صورة --> <a class="navbar-brand" href="#"> <img src="logo.png" alt="الشعار" height="30"> </a> <!-- صورة + نص --> <a class="navbar-brand" href="#"> <img src="logo.png" alt="الشعار" height="30" class="d-inline-block align-text-top"> علامتي التجارية </a>

<ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#">عن</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> الخدمات </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">تصميم الويب</a></li> <li><a class="dropdown-item" href="#">التطوير</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">معطل</a> </li> </ul>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <!-- محتوى شريط التنقل هنا --> </div>

<!-- شريط تنقل فاتح --> <nav class="navbar navbar-light bg-light">...</nav> <!-- شريط تنقل داكن --> <nav class="navbar navbar-dark bg-dark">...</nav> <!-- شريط تنقل أساسي --> <nav class="navbar navbar-dark bg-primary">...</nav> <!-- لون مخصص --> <nav class="navbar navbar-dark" style="background-color: #563d7c;">...</nav>

<!-- ثابت في الأعلى --> <nav class="navbar fixed-top">...</nav> <!-- ثابت في الأسفل --> <nav class="navbar fixed-bottom">...</nav> <!-- لاصق في الأعلى --> <nav class="navbar sticky-top">...</nav>

<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand">شريط التنقل</a> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث"> <button class="btn btn-outline-success" type="submit">بحث</button> </form> </div> </nav>

<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">شريط التنقل</a> <span class="navbar-text"> نص شريط التنقل مع عنصر مضمن </span> </div> </nav> <!-- عناصر محاذاة لليمين --> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#">تسجيل الدخول</a> </li> </ul>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="" height="30"> تطبيقي </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNav"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#">الميزات</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">المزيد</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">آخر</a></li> </ul> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="بحث"> <button class="btn btn-outline-light" type="submit">بحث</button> </form> </div> </div> </nav>