کامپوننتهای Nav در بوت استرپ 4
کامپوننتهای گروه Nav، در نگارش 4 آن به علت استفادهی از Flexbox، تغییرات بسیاری داشتهاند و در نتیجهی آن، انعطاف پذیرتر و سادهتر شدهاند.
در ابتدا لیست سادهی زیر را در نظر بگیرید. تنظیمات ابتدایی آن برای تبدیل به منوی راهبری بالای سایت به صورت زیر است:
<body> <div class="container"> <div class="row"> <section class="col-12"> <ul class="nav"> <li class="nav-item"><a class="nav-link active" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Mission</a></li> <li class="nav-item"><a class="nav-link" href="#">Services</a></li> <li class="nav-item"><a class="nav-link" href="#">Staff</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Testimonials</a></li> </ul> </div> </div> </body>
در اینجا دو کلاس active و disabled نیز به لینکهای منوی راهبری اضافه شدهاند. البته این کلاسها تا تکمیل نهایی nav، ظاهر آنچنان متفاوتی را ارائه نمیدهند.
اولین شیوهنامهای را که میتوان به nav اضافه کرد، nav-pills است:
<ul class="nav nav-pills">
Pills شبیه به دکمهها هستند و در این حالت لینک active، واضحتر به نظر میرسد.
و یا میتوان nav-tabs را به nav افزود:
<ul class="nav nav-tabs">
روش دیگر تعریف nav، استفاده از المان nav و سپس حذف ul و li و همچنین nav-item است:
<nav class="nav nav-pills justify-content-center"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="#">Mission</a> <a class="nav-link" href="#">Services</a> <a class="nav-link" href="#">Staff</a> <a class="nav-link disabled" href="#">Testimonials</a> </nav>
کلاس دیگری را که در اینجا میتوان استفاده کرد، flex-column است تا آیتمهای nav، بجای نمایش در یک ردیف، در یک ستون ظاهر شوند:
و یا میتوان با استفاده از break-points، سبب شد تا اگر اندازهی صفحه بیش از sm بود، آیتمهای منوی راهبری، ردیفی و اگر کمتر از آن بود (حالت موبایل)، ستونی نمایش داده شوند:
<nav class="nav nav-pills justify-content-center flex-column flex-sm-row">
ایجاد navbars در بوت استرپ 4
Navbar بوت استرپ 4، بازنویسی کامل شده و کار کردن با آن نسبت به نگارش سوم آن بسیار سادهتر شدهاست.
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> </div> </nav> <div class="container">
در اینجا، کار با افزودن کلاس navbar به المان nav شروع میشود. سپس هر لینک داخل آن، کلاسهای nav-item nav-link را پیدا میکند. در اینجا اگر آیتمی قرار است به صفحهی جاری اشاره کند، با کلاس active مشخص خواهد شد.
سپس توسط کلاسهای bg-dark navbar-dark، رنگهای پس زمینه و رنگ متن مشخص شدهاند. برای مثال میتوان bg-light navbar-light را نیز آزمایش کرد:
<nav class="navbar bg-light navbar-light navbar-expand-sm">
و یا بجای این رنگهای پیشفرض، در بوت استرپ 4 میتوان به سادگی رنگ navbar را توسط یک background-color دلخواه، سفارشی سازی کرد:
<nav class="navbar navbar-dark navbar-expand-sm" style="background-color:red">
کاری که در نگارشهای پیشین بوت استرپ به سادگی میسر نبود.
همچنین اگر دقت کرده باشید از کلاس navbar-expand-sm نیز استفاده شدهاست. حالت پیشفرض نمایش آیتمهای navbar، ستونی است و برای حالت موبایل درنظر گرفته شدهاست. استفادهی از navbar-expand-sm سبب میشود تا پس از عرض sm، آیتمهای navbar همانند شکلهای فوق، در طی یک ردیف نمایش داده شوند و در عرض کمتر از sm، به صورت یک ستون:
به علاوه آیتمهای navbar را داخل یک container قرار دادهایم:
<div class="container"> <div class="navbar-nav">
تعریف متون و لوگو در navbar بوت استرپ 4
برای تعریف متن لوگوی سایت در navbar به صورت زیر عمل میشود:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <div class="navbar-brand"> Wisdom Pet Medicine </div> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> </div> </nav> <div class="container">
و یا میتوان بجای div، از المان anchor نیز استفاده کرد تا به صورت لینک نمایش داده شود:
<a class="navbar-brand" href="#"> Wisdom Pet Medicine </a>
برای تعریف متنی در navbar از کلاس navbar-text استفاده میشود:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <a class="navbar-brand d-none d-sm-inline-block" href="#"> Wisdom Pet Medicine </a> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> <span class="navbar-text d-none d-xl-inline-block">The best in traditional and alternate medicine</span> </div> </nav> <div class="container">
همین تنظیم را به navbar-brand، در اندازهی sm نیز اضافه کردهایم تا لوگوی سایت در اندازههای موبایل ظاهر نشود.
افزودن drop downs به navbar در بوت استرپ 4
برای تبدیل یکی از آیتمهای منوی راهبری، به منو، از dropdown استفاده میشود که نمونهای از آنرا در مثال زیر مشاهده میکنید:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <a class="navbar-brand d-none d-sm-inline-block" href="#"> <img src="images/wisdompetlogo.svg" style="width:40px;" alt=""> Wisdom Pet Medicine </a> <div class="navbar-nav ml-sm-auto"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <div class="dropdown"> <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" id="servicesDropdown" aria-haspopup="true" aria-expanded="false" href="#">Services</a> <div class="dropdown-menu" aria-labelledby="servicesDropdown"> <a href="#" class="dropdown-item">Grooming</a> <a href="#" class="dropdown-item">General Health</a> <a href="#" class="dropdown-item">Nutrition</a> <a href="#" class="dropdown-item">Pest Control</a> <a href="#" class="dropdown-item">Vaccinations</a> </div> </div> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> <span class="navbar-text d-none d-xl-inline-block">The best in traditional and alternate medicine</span> </div> </nav> <div class="container">
- دراپداون نیاز به یک container دارد که آنرا با تعریف یک div با کلاس dropdown تعریف کردهایم.
- سپس به لینکی که قرار است آنرا نمایش دهد، کلاس dropdown-toggle را اضافه میکنیم تا آیکن مثلثی رو به پایینی را نمایان کند. وجود این مثلث، بیانگر وجود منویی به همراه آن است.
- اکنون با تنظیم data-toggle به dropdown، کدهای جاوا اسکریپتی بوت استرپ، این المان را به صورت یک dropdown پردازش میکنند و نیازی به افزودن اسکریپتی به صفحه برای فعالسازی آن نیست. ویژگیهای aria-expanded و aria-haspopup نیز به مقدار دهی پیشفرضهای کدهای جاوا اسکریپتی آن کمک میکنند.
- خود منو توسط دربرگیرندهای با کلاس dropdown-menu و آیتمهایی با کلاس dropdown-item تشکیل میشود.
- در ادامه برای متصل کردن این دربرگیرنده به لینک نمایش دهندهی منو، یک id را به لینک انتساب میدهیم (به نام servicesDropdown) و سپس aria-labelledby دربرگیرنده را به این id، مقدار دهی میکنیم.
- در این مثال با استفاده از کلاس navbar-nav ml-sm-auto، سبب شدهایم تا منوی سایت، از لبهی سمت راست صفحه پس از عرض sm، شروع شود.
افزودن المانهای فرمها به منوی راهبری سایت
برای اضافه کردن المانهای فرم به منوی راهبری سایت، ابتدا نیاز است کلاس form-inline را بر روی container این فرم قرار داد و سپس به ورودیهای این فرم، کلاس form-control را اضافه میکنیم. اگر نیاز بود، توسط کلاسهای margin و padding مخصوص بوت استرپ 4 مانند mr-2 نیز میتوان بین آنها فاصله ایجاد کرد:
<body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link" href="#">Testimonials</a> </div> <form class="form-inline"> <input type="text" placeholder="Search..." class="form-control mr-2"> <button class="btn btn-outline-light" type="submit">Go</button> </form> </div> </nav> <div class="container">
بوت استرپ در اندازهی بزرگتر صفحه، فرم را به سمت راست و آیتمهای منو را در سمت چپ نمایش میدهد.
کنترل محل قرارگیری المانها در منوی راهبری سایت
توسط کلاسهایی مانند fixed-top (قرار گرفتن در بالای صفحه)، fixed-bottom (قرار گرفتن در پایین صفحه) و sticky-top، میتوان محل قرارگیری منوی راهبری را تغییر داد. این کلاسها را در مطلب «طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم» پیشتر بررسی کردیم.
برای توضیح حالت sticky-top، فرض کنید بالای منو، تصویر بزرگی از لوگوی سایت را دارید و این منو زیر آن قرار گرفتهاست. زمانیکه صفحه به سمت پایین اسکرول میشود، این منو نیز پایین خواهد آمد تا جائیکه در لبهی بالای صفحه قرار گیرد. پس از آن، این منو در همین ناحیه باقی مانده و شبیه به fixed-top عمل میکند.
یک نکته: اگر fixed-bottom را مورد استفاده قرار دادید:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm fixed-bottom">
<div class="container mb-5">
اضافه کردن منوی همبرگری به منوی راهبری سایت
در مورد کلاس navbar-expand-sm در این مطلب توضیح دادیم. هرچند قابلیت عمودی و افقی شدن خودکار آیتمهای منوی راهبری بسیار جالب و کاربری است، اما در صفحات نمایشی کوچک، این نمایش عمودی میتواند ارتفاع قابل ملاحظهای را به خود اختصاص دهد. به همین جهت میخواهیم نمایش آیتمهای آنرا وابسته به تصمیم کاربر کنیم.
<body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> <a href="#" class="navbar-brand">Wisdom Pet Medicine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myToggle" aria-controls="myToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="myToggle"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link" href="#">Testimonials</a> </div> </div> </div> </nav> <div class="container">
- ابتدا نیاز است دکمهی این منو اضافه شود که توسط کلاس navbar-toggler مشخص شدهاست. سپس با توجه به اینکه این کامپوننت توسط کدهای جاوا اسکریپتی بوت استرپ کار میکند، اطلاعات مورد نیاز آنرا توسط ویژگیهای data-toggle، data-target و aria مشخص میکنیم.
- این دکمه نیاز دارد تا به یک div با کلاس collapse navbar-collapse متصل شود. این اتصال نیز از طریق id آن صورت میگیرد که در ویژگی data-target مقدار دهی شدهاست.
- اگر این دکمه را پس از navbar-brand قرار دهیم، در سمت چپ صفحه و اگر پیش از آن قرار دهیم، در سمت راست صفحه ظاهر میشود.
در حالت نمایش sm، آیتمهای منو مخفی شده:
با کلیک بر روی دکمهی منوی همبرگری آن، گزینههای منو نمایش داده میشوند:
و در حالت اندازهی بزرگتر صفحه، محو میشود:
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_07.zip