در این بخش با نوار ناوبری در بوت استرپ (Bootstrap Navbar) آشنا می شویم. نوار ناوبری در بوت استرپ یک سربرگ ناوبری قدرتمند و واکنش گرا است که به طور معمول در بالای صفحه قرار می گیرد و دسترسی سریع به بخش های مختلف سایت را فراهم می کند.
نحوه عملکرد نوار ناوبری در بوت استرپ
- برای ساخت یک نوار ناوبری پایه، کافی است از کلاس
.navbarاستفاده کنید. اگر می خواهید ویژگی واکنش گرا و قابلیت جمع شدن (Collapsing) را فعال کنید، باید کلاس.navbarرا همراه با.navbar-expand{-sm|-md|-lg|-xl|-xxl}به کار ببرید. این کلاس ها مشخص می کنند که نوار ناوبری در چه اندازه صفحه (کوچک، متوسط، بزرگ، خیلی بزرگ، یا خیلی خیلی بزرگ) به صورت عمودی چیده شود. - با استفاده از ویژگی
aria-current="page"می توانید آیتم جاری را مشخص کنید. همچنین ویژگیaria-current="true"برای تعیین آیتم فعلی در یک مجموعه کاربرد دارد. - برای افزایش دسترس پذیری (Accessibility) بهتر است نوار ناوبری را داخل تگ
<nav>قرار دهید. اگر از تگ عمومی مانند<div>استفاده می کنید، ویژگیrole="navigation"را به آن اضافه کنید. به این ترتیب، ابزارهای کمکی می توانند نوار ناوبری را به درستی شناسایی کنند. - در نسخه 5.2.0، می توانید نوار ناوبری را با کمک متغیرهای CSS به راحتی شخصی سازی کنید. این متغیرها محدود به کلاس پایه
.navbarهستند. در این نسخه، بوت استرپ کلاس.navbar-lightرا حذف کرده است و کلاس.navbar-darkاکنون فقط متغیرهای CSS را بازنویسی می کند و از افزودن استایل های اضافی خودداری می کند.
نوار ناوبری پایه در بوت استرپ
محتوای پشتیبانی شده
می توانید از کلاس های داخلی بوت استرپ برای ساخت نوار ناوبری استفاده کنید. در ادامه چند نمونه از این کلاس ها را معرفی می کنم:
-
از کلاس
.navbar-brandبرای نمایش نام شرکت، محصول یا پروژه استفاده کنید. -
کلاس
.navbar-navبه شما کمک می کند یک ناوبری سبک و تمام قد بسازید. این کلاس از منوهای کشویی نیز پشتیبانی می کند. -
با استفاده از کلاس
.navbar-togglerو افزونه collapse می توانید دکمه باز و بسته شدن نوار ناوبری ایجاد کنید. -
اگر می خواهید متن های کوتاه و وسط چین شده به نوار ناوبری اضافه کنید، از کلاس
.navbar-textاستفاده کنید. -
برای گروه بندی و جمع کردن محتوای نوار ناوبری بر اساس breakpoint والد، می توانید از کلاس
.collapse.navbar-collapseاستفاده کنید. -
اگر نیاز دارید ارتفاع نوار ناوبری را محدود کنید و امکان اسکرول برای محتوای باز شده فراهم کنید، از کلاس
.navbar-scrollاستفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">sourcebaran</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 disabled">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Blog 1</a></li> <li><a class="dropdown-item" href="#">Blog 2</a></li> </ul> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search Here" aria-label="Search"> <button class="btn btn-outline-warning" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری عمودی در بوت استرپ (Vertical Navbar)
برای ساخت یک نوار ناوبری که همیشه به صورت عمودی نمایش داده شود، کافی است کلاس .navbar-expand-* را از ساختار نوار ناوبری حذف کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#"> Item 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 3</a> </li> </ul> </div> </nav> <div class="container-fluid mt-3"> <h3>Vertical Navbar</h3> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری وسط چین در بوت استرپ (Centered Navbar)
برای نمایش نوار ناوبری به صورت وسط چین، باید کلاس .justify-content-center را به نوار ناوبری اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-light justify-content-center"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Item 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 3</a> </li> </ul> </nav> <div class="container-fluid mt-3"> <h3>Centered Navbar</h3> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برند (Brand)
برای نمایش نام برند یا نام پروژه در نوار ناوبری، از کلاس .navbar-brand استفاده کنید.
متن (Text)
برای افزودن متن دلخواه داخل یک عنصر (مانند لینک یا تگ دیگر) در نوار ناوبری، کافی است کلاس .navbar-brand را به آن عنصر اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-primary mt-2"> <div class="container-fluid"> <a class="navbar-brand" href="#">sourcebaran</a> </div> </nav> <nav class="navbar bg-light mt-2"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">sourcebaran</span> </div> </nav> </body> </html> |
تصویر در نوار ناوبری بوت استرپ
برای استفاده از تصویر به جای متن در بخش برند نوار ناوبری، کافی است محتوای داخل .navbar-brand را با یک تگ <img> جایگزین کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <div class="container"> <a class="navbar-brand" href="https://www.sourcebaran.com/"> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" alt="Bootstrap"> </a> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
تصویر و متن در نوار ناوبری بوت استرپ
می توانید با اضافه کردن چند کلاس کمکی، تصویر و متن را به صورت همزمان در بخش برند نوار ناوبری نمایش دهید. برای این کار، به تگ <img> کلاس های .d-inline-block و .align-text-top را اضافه کنید. این کلاس ها باعث می شوند تصویر در کنار متن و به درستی هم تراز با آن نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" alt="Logo" class="d-inock alline-blign-text-mid"> sourcebaran </a> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
ناوبری در بوت استرپ (Nav)
- لینک های ناوبری در نوار ناوبری بر پایه کلاس
.navساخته می شوند. این لینک ها دارای کلاس های کمکی مخصوص به خود هستند و برای ایجاد استایل واکنش گرا از کلاس.navbar-togglerاستفاده می کنند. - نوار ناوبری به گونه ای طراحی شده که به صورت خودکار تمام فضای افقی موجود را اشغال می کند تا بتواند محتوای نوار ناوبری را به شکل ایمن و منظم چینش کند.
- برای نمایش صفحه فعال، کافی است کلاس
.activeرا به لینک مورد نظر که دارای کلاس.nav-linkاست اضافه کنید.
همچنین فراموش نکنید که برای رعایت اصول دسترس پذیری (Accessibility)، باید ویژگی aria-current را نیز به لینک فعال .nav-link اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contanct us</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری بدون لیست در بوت استرپ
از آنجا که نوار ناوبری بوت استرپ برای ایجاد ناوبری از کلاس های مخصوص استفاده می کند، نیازی به استفاده از ساختار لیست (لیستی از آیتم ها) وجود ندارد. همان طور که در مثال زیر مشاهده می کنید، می توانید نوار ناوبری را بدون استفاده از لیست نیز پیاده سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">sourcebaran</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">About us</a> <a class="nav-link" href="#">Services</a> <a class="nav-link disabled">Contanct us</a> </div> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری همراه با منوی کشویی (Navbar with dropdown)
برای افزودن منوی کشویی (Dropdown) به نوار ناوبری بوت استرپ، کافی است از کلاس های .nav-item و .nav-link استفاده کنید. در مثال زیر می توانید نحوه استفاده از این کلاس ها را مشاهده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">sourcebaran</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <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="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Blog 1</a></li> <li><a class="dropdown-item" href="#">Blog 2</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
فرم ها در نوار ناوبری بوت استرپ
برای قرار دادن انواع فیلدهای فرم داخل نوار ناوبری، می توانید از کلاس .form-control استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-primary"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search Here.." aria-label="Search"> <button class="btn btn-outline-warning" type="submit">Search</button> </form> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
در نسخه های جدید، فرزندان کلاس .navbar به صورت پیش فرض از چیدمان Flex استفاده می کنند و خصوصیت justify-content: space-between روی آن ها اعمال می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search Here..." aria-label="Search"> <button class="btn btn-outline-info" type="submit">Search</button> </form> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر نوار ناوبری شما کاملاً شامل یک فرم است یا بیشتر محتوای آن از فرم تشکیل شده، بهتر است از تگ <form> به عنوان محتوای اصلی (container) نوار ناوبری استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <form class="container-fluid"> <div class="input-group"> <span class="input-group-text" id="basic-addon1">#</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </form> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
فرم های داخل نوار ناوبری از انواع دکمه ها پشتیبانی می کنند. برای این که بتوانید عناصر با اندازه های مختلف (مانند دکمه ها و فیلدهای ورودی) را به درستی تراز کنید، می توانید از کلاس های کمکی تراز عمودی (Vertical Alignment Utilities) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <form class="container-fluid justify-content-start"> <button class="btn btn-outline-primary me-2" type="button">Large Button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Small Button</button> </form> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
متن (Text)
برای تنظیم تراز عمودی و فاصله گذاری افقی متن در نوار ناوبری، می توانید از کلاس .navbar-text استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-text"> Welcome to the Tutorialspoint! </span> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
می توانید نوار ناوبری را با استفاده از سایر کامپوننت ها و کلاس های کمکی (Utilities) بر اساس نیاز خود سفارشی سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contanct us</a> </li> </ul> <span class="navbar-text"> Welcome to Tutorialspoint! </span> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
طرح های رنگی نوار ناوبری بوت استرپ
در نسخه 5.3.0، بوت استرپ نوار ناوبری تیره جدید معرفی کرده است. در این نسخه، استفاده از
.navbar-darkمنسوخ شده و به جای آن باید از ویژگیdata-bs-theme="dark"استفاده کنید. برای فعال کردن حالت رنگی تیره مخصوص نوار ناوبری، کافی است این ویژگی را به کلاس.navbarاضافه کنید.در نسخه 5.2.0، طرح های رنگی نوار ناوبری به کمک متغیرهای CSS مدیریت می شوند. در این نسخه نیز کلاس
.navbar-lightمنسوخ شده است. به طور پیش فرض، یک متغیر CSS روی.navbarاعمال می شود که به آن ظاهر “روشن” می دهد. در صورت نیاز، می توانید این متغیرها را در.navbar-darkبازنویسی کنید.
- به طور پیش فرض، نوار ناوبری دارای طرح روشن (light navbar) است و برای استفاده با پس زمینه های روشن مناسب می باشد.
- اگر می خواهید نوار ناوبری با پس زمینه تیره داشته باشید، کافی است ویژگی
data-bs-theme="dark"را به کلاس والد.navbarاضافه کنید. - علاوه بر این، می توانید ظاهر نوار ناوبری را با استفاده از کلاس های کمکی
.bg-*نیز به دلخواه سفارشی سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-dark" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contanct us</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> </div> </nav> <nav class="navbar bg-primary" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contanct us</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> </div> </nav> <nav class="navbar" style="background-color: #e3f2fd;"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contanct us</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
کانتینرها
می توانید به صورت اختیاری نوار ناوبری را داخل یک .container قرار دهید تا آن را در مرکز صفحه نمایش دهید. البته توجه داشته باشید که همچنان باید یک کانتینر داخلی در ساختار نوار ناوبری استفاده کنید.
برای این کار، کافی است یک عنصر با کلاس .container در داخل .navbar قرار دهید. این کار به شما کمک می کند که محتوای نوار ناوبری (چه در حالت ثابت در بالا – fixed، چه در حالت ایستا – static top) به شکل مرتب در مرکز صفحه نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="###">sourcebaran</a> </div> </nav> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای تعیین این که محتوای نوار ناوبری با چه عرضی نمایش داده شود، می توانید از کانتینرهای واکنش گرا (Responsive Containers) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-md"> <a class="navbar-brand" href="#">sourcebaran</a> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
محل قرارگیری نوار ناوبری در بوت استرپ
برای قرار دادن نوار ناوبری در موقعیت های غیر ایستا، می توانید از کلاس های کمکی موقعیت دهی (Position Helpers) استفاده کنید. گزینه های مختلفی در اختیار دارید:
-
چسباندن به بالای صفحه (Pin to top)
-
چسباندن به پایین صفحه (Pin to bottom)
-
ثابت کردن در بالای صفحه (Fixed to top)، به این صورت که هنگام اسکرول صفحه، نوار ناوبری در بالای صفحه باقی می ماند.
-
چسباندن به پایین به صورت چسبنده (Stickied to bottom)، به این صورت که نوار ناوبری تا رسیدن به انتهای صفحه اسکرول می شود و سپس در پایین متوقف می شود.
نوارهای ناوبری ثابت (Fixed navbars) از ویژگی position: fixed استفاده می کنند. به دلیل خارج شدن این عناصر از جریان عادی صفحه (Normal DOM Flow)، ممکن است نیاز داشته باشید با استفاده از CSS سفارشی (برای مثال، افزودن padding-top به عنصر <body>) از همپوشانی با سایر عناصر جلوگیری کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Default Navbar</a> </div> </nav> </body> </html> |
نوار ناوبری ثابت در بالا (Fixed top)
برای ایجاد نوار ناوبری ثابت در بالای صفحه، کافی است از کلاس .fixed-top استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar fixed-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar Fixed at Top</a> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری ثابت در پایین (Fixed bottom)
برای ایجاد نوار ناوبری ثابت در پایین صفحه، کافی است از کلاس .fixed-bottom استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"></div> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <nav class="navbar fixed-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar Fixed at Bottom</a> </div> </nav> </div> </body> </html> |
نوار ناوبری چسبان به بالا (Sticky top)
برای ایجاد نوار ناوبری چسبان به بالای صفحه، از کلاس .sticky-top استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar sticky-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar Stick at Top</a> </div> </nav> </body> </html> |
نوار ناوبری چسبان به پایین (Sticky bottom)
برای ایجاد نوار ناوبری چسبان به پایین صفحه، کافی است از کلاس .sticky-bottom استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p> <nav class="navbar sticky-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky bottom</a> </div> </nav> </div> </body> </html> |
اسکرول در نوار ناوبری بوت استرپ
- برای فعال کردن اسکرول عمودی در بخش محتوای جمع شونده (collapsed) نوار ناوبری، کافی است کلاس
.navbar-nav-scrollرا به عنصر.navbar-navاضافه کنید. - به طور پیش فرض، اسکرول در این حالت با ارتفاع ۷۵ درصد از ارتفاع پنجره مرورگر (75vh) فعال می شود. البته می توانید با استفاده از ویژگی CSS به نام
--bs-navbar-height، این ارتفاع را به دلخواه تغییر دهید. - به عنوان نمونه، می توانید از
.navbar-nav-scrollهمراه با استایلstyle="--bs-scroll-height: 100px;"استفاده کنید. همچنین می توانید برای داشتن فاصله گذاری بهتر، از کلاس های کمکی margin نیز بهره ببرید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Tutorialspoint</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarScroll"> <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;"> <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="#">Services</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Blog 1</a></li> <li><a class="dropdown-item" href="#">Blog 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search here..." aria-label="Search"> <button class="btn btn-outline-warning" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
رفتار واکنش گرا (Responsive behaviors)
نوارهای ناوبری بوت استرپ برای ایجاد رفتار واکنش گرا از کلاس های .navbar-toggler، .navbar-collapse و .navbar-expand{-sm|-md|-lg|-xl|-xxl} استفاده می کنند. با این ترکیب، محتوای نوار ناوبری هنگام کوچک شدن صفحه پشت یک دکمه (toggler button) جمع می شود.
اگر می خواهید نوار ناوبری هیچگاه جمع نشود (همیشه باز بماند)، باید به آن کلاس .navbar-expand را اضافه کنید. اما برای نوارهایی که می خواهید همیشه در حالت جمع شونده باشند، نباید کلاس .navbar-expand را به کار ببرید.
این بخش از آموزش، یکی از مهم ترین مباحثی است که در هر دوره تخصصی بوت استرپ به آن پرداخته می شود، چرا که پیاده سازی درست منوی واکنش گرا در طراحی سایت های مدرن اهمیت بالایی دارد.
دکمه Toggler
به طور پیش فرض، دکمه toggler در سمت چپ نوار ناوبری قرار می گیرد. اما اگر قبل از آن یک عنصر هم‌سطح (مانند .navbar-brand) وجود داشته باشد، دکمه به صورت خودکار در سمت راست نوار ناوبری قرار می گیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-expand" href="#">Tutorialspoint</a> <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="#">Services</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-outline-warning" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نام برند در سمت چپ و دکمه Toggler در سمت راست
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <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="#">Register here</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نام برند در سمت راست و دکمه Toggler در سمت چپ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <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="#">About us</a> </li> <li class="nav-item"> <a class="nav-link disabled">Contanct us</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
محتوای خارجی (External content)
برای نمایش محتوایی که از نظر ساختاری خارج از .navbar قرار دارد، باید از افزونه collapse استفاده کنید. این افزونه به شما امکان می دهد با استفاده از دکمه toggler، المان های بیرونی را نیز باز و بسته کنید.
اجرای این کار بسیار ساده است، زیرا افزونه collapse بر اساس تطابق بین id هدف و ویژگی data-bs-target عمل می کند. به این ترتیب می توانید به راحتی محتوای دلخواه بیرون از نوار ناوبری را کنترل کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-primary p-4"> <h5 class="text-white h4">Collapsed content</h5> <span class="text-body-light">Toggleable via the navbar brand</span> </div> </div> <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ناوبری Offcanvas در بوت استرپ
برای تبدیل نوار ناوبری قابل گسترش و جمع شدن (expanding and collapsing) به یک کشوی Offcanvas، می توانید این کار را بدون نیاز به استفاده مستقیم از کامپوننت offcanvas انجام دهید. کافی است از کلاس های .navbar-expand-* برای ترکیب استایل پیش فرض Offcanvas استفاده کنید. این کار به شما یک نوار ناوبری جانبی (navigation sidebar) دینامیک و منعطف می دهد.
اگر می خواهید نوار ناوبری به صورت Offcanvas در تمام سایزهای صفحه (در همه Breakpoints) جمع شود، می توانید به سادگی از اضافه کردن کلاس .navbar-expand-* صرف نظر کنید. در این حالت، نوار ناوبری همیشه در قالب یک کشوی Offcanvas عمل می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <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="#">About us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sign in</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul> </li> </ul> <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای ایجاد یک نوار ناوبری Offcanvas که در یک breakpoint مشخص (مثلاً در نمایشگرهای بزرگ‌تر) به نوار ناوبری عادی تبدیل شود، می توانید از کلاس .navbar-expand-lg استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <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="#">About us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sign in</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul> </li> </ul> <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای اینکه متن در نوار ناوبری تیره (Dark Navbar) به خوبی خوانا باقی بماند، باید پس زمینه Offcanvas را نیز تیره تنظیم کنید. برای این کار می توانید از ترکیب کلاس های زیر استفاده کنید:
-
به عنصر
.navbarکلاس های.navbar-darkو.bg-darkاضافه کنید تا نوار ناوبری به صورت تیره نمایش داده شود. -
به محتوای Offcanvas کلاس
.text-bg-darkاضافه کنید تا پس زمینه آن تیره و متن به درستی خوانا شود. -
به منوی کشویی (Dropdown Menu) کلاس
.dropdown-menu-darkاضافه کنید تا منو نیز با ظاهر تیره هماهنگ شود. -
به دکمه بستن (Close Button) کلاس
.btn-close-whiteبدهید تا آیکون بستن به رنگ سفید و روی پس زمینه تیره به خوبی دیده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navbar</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="navbar navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas dark navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <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="#">About us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item" href="#">Sign in</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Other's</a></li> </ul> </li> </ul> <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </div> </div> </div> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی
- انتشار: ۱۲ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
