در خدمت شما هستیم با آموزش Bootstrap 4 جلسه نوزدهم (Navbar)
آموزش Bootstrap 4 جلسه نوزدهم (Navbar) از سری آموزش های تک قسمتی است.
منو ناوبری
منو ناوبری تمامی امکاناتی هست که ما میتوانیم در نوار منو خود جای دهیم این موارد میتواند شامل موارد زیر باشد
- لینک ها و منو ها
- نوشته ساده
- کادر جستجو
- لوگو نوشتاری و عکسی
- نحوه قرار گیری نوار منو در صفحه
- فعال یا غیر فعال بودن گزینه های منو
به کمک این موارد میتوانیم امکانات گوناگونی را به منو های خود اضافه کنیم و دسترسی کاربر به سایت خود را ساده کنیم.
ساخت منو ناوبری ساده
بوت استرپ برای ساخت ناوبری ها نیز فکری کرده است و کلاس هایی را ایجاد کرده است کافیست شما این کلاس ها را در تگ های مناسب قرار دهید تا به امکانات خوبی برسید برای ساخت ناوبری ساده نیاز به تگ nav و ul و li داریم کل محتوا را داخل تگ nav قرار میدهیم و به آن کلاس navbar را میدهیم اگر میخواهیم منو افقی باشد کلاس navbar-expand-sm را نیز اضافه کنید.
حال نوبت به ul میرسد که باید کلاس navbar-nav را به آن بدهیم و به li های داخل آن کلاس nav-item اگر میخواهید داخل li های خود از تگ a استفاده کنید باید از کلاس nav-link برای آنها استفاده کنید.برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> |
ساخت منو عمودی
ساخت منو ناوبری عمودی بسیار راحت تر از منو ساده است کافیست شما یک کلاس را حذف کنید تا منو شما از حالت افقی به عمودی تغییر پیدا کند کلاس navbar-expand-sm را از تگ nav خود حذف کنید. به همین راحتی میتوانید منو عمودی بسازید.
ساخت منو ناوبری وسط چین
اگر قصد دارید منو خود را در وسط صفحه قرار دهید به کمک بوت استرپ میتوانید این کار را انجام دهید. کافیست به کلاس های بوت استرپ مراجعه کنید و کلاس justify-content-center را به تگ nav خود اضافه کنید. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
1 2 3 | <nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav> |
منو های رنگی
درست است میتوانید منو های ناوبری رنگارنگ داشته باشید برای این کار کافیست از کلاس های رنگی بوت استرپ استفاده کنید.اگر خاطرتان باشد در آموزش های قبلی گفتیم که با استفاده از bg و کلاس های رنگی میتوان زمینه را رنگی کرد به عنوان مثال bg-success که به ما رنگ سبز را میدهد. کافیست این کلاس را به تگ nav خود بدهید تا منوی شما رنگ بگیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
1 | <nav class="navbar navbar-expand-sm bg-primary">...</nav> |
اضافه کردن برند و لوگو به منو
به ۲ روش لوگو را در منو میتوان جای داد یا نام آن را نوشت و یا تصویر لوگو در این قسمت میخواهیم درباره نوشتن نام لوگو صحبت کنیم.شما میتوانید در ابتدای منو خود نام تجاری خود را قرار دهید و آن را به هرجایی لینک کنید برای این کار کافیست بعد از تگ nav باز یک تگ a با کلاس navbar-brand بسازید و در آن نام برند خود را بنویسید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
1 2 3 4 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav> |
اما اگر بخواهید تصویر لوگو خود را قرار دهید:
برای این کار کافیست در تگ a که در قسمت بالا گفتیم یک تگ img قرار دهید و تصویر برند خود را در آن لود کنید بهتر است یک width با اندازه ۴۰ نیز به تصویر خود بدهید برای واضح شدن موضوع از کد زیر کمک بگیرید:
1 2 3 4 5 6 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav> |
ناوبری رسپانسیو
اگر قصد ساخت منو رسپانسیو را دارید این قسمت از آموزش را با دقت مطالعه کنید . بعد از باز کردن تگ nav یک button تعریف میکنیم و به آن کلاس navbar-toggle میدهیم سپس attribute با نام data-toggle و با مقدار collapse و بعد از آن وقت تعیین هدف است که attribute با نام data-target و مقدار آن را یک نام دلخواه همراه با # قرار میدهیم از این نام استفاده خواهیم کرد.
قبل از بستن تگ button یک span با کلاس navbar-toggler-icon میسازیم این span آیکن منو مارا میسازد حال نوبت منو ها است که ul ها هستند اما قبل ul باید یک div با کلاس collapse و کلاس navbar-collapse بسازیم و id با نامی که به صورت اختیاری در بالا ساختیم ایجاد کنیم این div قبل از تگ nav بسته میشود باقی موارد مشابه قبل است برای واضح شدن موضوع از کد زیر کمک بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <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" href="#">Link</a> </li> </ul> </div> </nav> |
navbar با قابلیت زیر منو
به کمک کلاس های بوت استرپ میتوانید برای منو خود زیر منو ایجاد کنید که البته به استفاده از چند تگ نیز نیازمندیم . برای این کار li که قرار است زیر منو داشته باشد را انتخاب میکنیم و در کنار کلاس nav-item کلاس dropdown را نیز قرار میدهیم . سپس به تگ a آن کنار کلاس nav-link کلاس dropdown-toggle را اضافه میکنیم هم چنین باید attribute با نام data-toggle و مقدار dropdown را نیز به آن بدهیم حال تمام زیر منو ها که نیاز داریم را داخل یک div با کلاس dropdown-menu قرار میدهیم این زیر منو ها تگ a هستند که باید کلاس dropdown-item بگیرند برای واضح شدن موضوع از کد زیر کمک بگیرید:
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 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav> |
قرار دادن سرچ در navbar
اگر میخواهید در منو خود باکس سرچ داشته باشید کافیست بعد از باز شدن تگ nav یک تگ form ایجاد کنید و به آن کلاس form-inline را بدهید حال در داخل این فرم به ۲ مورد نیاز است :
- باکس جستجو
- دکمه سرچ
یک input با کلاس form-control میسازیم و سپس یک button با کلاس btn و کلاس رنگی مد نظر برای واضح شدن موضوع ز کد زیر کمک بگیرید:
1 2 3 4 5 6 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav> |
قرار دادن متن در منو
برای نوشتن متن در منو کافیست هر کجا که خواستید یک تگ span با کلاس navbar-text بسازید.
برای واضح شدن موضوع از کد زیر کمک بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav> |
منو ناوبری ثابت
اگر میخواهید منو ثابتی در بالا یا پایین سایت خود داشته باشید کافیست روش زیر را پیگیری کنید:
برای ساخت منو ثابت بالا کلاس fixed-top را به nav خود بدهید و برای منو ثابت پایین کلاس fixed-bottom را به nav بدهید. برای واضح شدن موضوع از کد زیر کمک بگیرید:
1 2 3 | <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> |
منو چسپان (sticky)
و اما در نهایت ساخت منو چسبان !!
برای ساخت منو چسبان کافیست کلاس sticky-top را به nav خود بدهید به همین سادگی
به پایان آموزش navbar رسیدیم امیدوارم برای شما مفید بوده باشد.
برای راحتی شما کدی شامل کل آموزش را آماده کرده ایم:
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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 | <!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar bg-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm justify-content-center"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-info navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-warning navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-danger navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-secondary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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="#">Disabled</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="logo" style="width:40px;"> </a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <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" href="#">Link</a> </li> </ul> </div> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav> ---------------------------------------------------------------------------- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </nav> ---------------------------------------------------------------------------- <div style="height:1500px"> <div class="container-fluid"> <br> <h3>Sticky Navbar</h3> <p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p> <p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> <a class="navbar-brand" href="#">Logo</a> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </nav> <div class="container-fluid"><br> <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p> <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p> <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p> <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p> </div> </div> <br> </body> </html> |
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه هجدهم (Navs)
آموزش Bootstrap 4 جلسه بیستم (form)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.
اگر این مطلب آموزنده بود به ما امتیاز دهید
(3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...