امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت منو با بوت استرپ ۴
نویسنده پیام
nooshin88 آفلاین
عضو انجمن
عضو


ارسال‌ها:
93
تاریخ عضویت:
Jan 2016
اعتبار:
0
تشکر ها: 0
1 تشکر شده در 1 ارسال
ارسال: #1
ساخت منو با بوت استرپ ۴
[تصویر:  navbar-bootstrap4-intro.jpg]

امروز قصد داریم به چگونگی طراحی و پیاده سازی منوی ریسپانسیو با بکارگیری فریم ورک بوت استرپ ورژن ۴ بپردازیم. این منو در عین سادگی، می‌تواند برای شما بسیار پرکاربرد باشد. همه ما به خوبی می‌دانیم که منوی اصلی یک وب سایت مهمترین بخش آن است و بطور معمول در هدر وب سایت قرار می‌گیرد. از این رو در این آموزش، تصمیم داریم تا با یکدیگر یک منوی ریسپانسیو زیبا، بر اساس ویژگی‌ها و امکانات بوت استرپ ۴ طراحی کنیم.

پیش از آغاز طراحی منو، به شما پیشنهاد می‌کنم چنانچه تا کنون مطالعه‌ای در زمینه فریم ورک بوت استرپ نداشته‌اید، نخست پیش مطالعه‌ای در این زمینه داشته باشید و سپس به سراغ آموزش طراحی منوی وب سایت بیایید.

برای استفاده از بوت استرپ ۴ نیاز است فایل‌های CSS و JS زیر را در کدهای خود قرار دهید.

لینک فایل ‌CSS زیر را در <head> خود قبل از تمام فایل‌های استایل خود قرار دهید:


کد:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


لینک فایل های جاوا اسکریپت زیر را هم در انتهای کدهای خود قبل از تگ </body> بگذارید.


کد:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

منوی ریسپانسیو با ویژگی بوت استرپ ۴ درواقع دربرگیرنده‌‌ای ساده برای جایدهی لوگو، منو و دیگر المان‌های ضروری در بخش هدر سایت شماست. به کد زیر دقت کنید:


کد:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
 <li class="nav-item active">
 <a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۳</a>
 </li>
 </ul>
 </div>
 </nav>


تمامی المان‌های منوی خود را داخل تگ <nav> قرار دهید و از کلاس‌های navbar و navbar-expand{-sm|-md-|-lg|-xl}،علاوه بر کلاس‌های مربوط به رنگ منو، استفاده کنید.

برای آنکه در حالت ریسپانسیو و دستگاه‌های موبایل / تبلت ویژگی بسته و باز شدن منو را بتوانید به خوبی ببینید حتماً از المان <button> به همراه کلاس navbar-toggler استفاده کنید، همچنین برای نمایش آیکون مربوط به منوی ریسپانسیوتان از یک تگ span به همراه کلاس navbar-toggler-icon استفاده کنید.

برای تعریف لیستی از آیتم‌های منو از تگ ul به همراه کلاس navbar-nav استفاده کنید.

به ازای هریک از آیتم‌های منو تگ li اضافه کنید.

به ازای هر لینک در منو تگ a بکار ببرید.

منوی ریسپانسیو به همراه خاصیت دراپ داون

شما می‌توانید در طراحی سایت خود، خیلی راحت ویژگی منوی دراپ دان را به آیتم‌های منوی اصلی اضافه کنید. چگونه؟ کافی است تنها کلاس dropdown را در liیی که قرار است ویژگی دراپ داونی بگیرد، بکار بگیرید .

کد:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
 <li class="nav-item active">
 <a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۲</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 دراپ داون
 </a>
 <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
 <a class="dropdown-item" href="#">لینک ۱</a>
 <a class="dropdown-item" href="#">لینک ۲</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">لینک ۳</a>
 </div>
 </li>
 </ul>
 </div>
 </nav>


برای وب سایت های فارسی:

بطور پیش فرض منوهای دراپ داون در محل ۱۰۰٪ از بالا و سمت چپ  پدر (Parent) خود قرار گرفته‌اند. اما شما می‌توانید با اضافه کردن کلاس dropdown-menu-right در کنار dropdown-menu منوی دراپ داون خود را در سمت راست قرار دهید.

مشخص کردن منوی جاری:

این حالت را می‌توان با بکارگیری کلاس active به لینک / تگ li آن آیتم منو، به خوبی نمایش داد. همچنین می‌توانید با بکارگیری یک تگ span با کلاس sr-only آیتمی را از دید تمامی دستگاه‌ها بغیر از مفسران صفحه نمایش مخفی کنید.


کد:
 <nav class="navbar navbar-expand-lg navbar-light bg-light">

 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">

 <a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#">لینک ۲</a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#">لینک ۳</a>

 </li>

 </ul>

 </div>

 </nav>


منو به همراه نوار جستجو:

شما می‌توانید در منوی خود از فرم‌هایی نظیر فرم جستجو استفاده کنید. برای این کار بعد از بسته شدن تگ ul، باید یک تگ فرم را باز کنید و به آن کلاس form-inline را اضافه کنید. اگر دقت داشته باشید در کد پایین از کلاس mr-auto برای تگ ul استفاده کردیم تا بتوانیم منو را تا آنجا که مقدور است به سمت راست هدایت کنیم و  به تبع آن نوار جستجو را در نهایت سمت چپ صفحه داشته باشیم.


کد:
 <nav class="navbar navbar-expand-lg navbar-light bg-light">

 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">

 <li class="nav-item active">

 <a class="nav-link" href="#">خانه<span class="sr-only">(current)</span></a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#">لینک ۱</a>

 </li>

 <li class="nav-item dropdown">

 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

 دراپ داون

 </a>

 <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">

 <a class="dropdown-item" href="#">لینک ۱</a>

 <a class="dropdown-item" href="#">لینک ۲</a>

 <div class="dropdown-divider"></div>

 <a class="dropdown-item" href="#">لینک ۳</a>

 </div>

 </li>

 </ul>

 <form class="form-inline my-2 my-lg-0">

 <input class="form-control mr-sm-2" type="search" placeholder="جستجو" aria-label="Search">

 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">جستجو</button>

 </form>

 </div>

 </nav>


ترازبندی:

شما می‌توانید از کلاس‌های مربوط به ایجاد فاصله‌ها همانند ml-auto و یا ویژگی‌های مربوط به flexbox همانند justify-content-start برای ترازبندی المان‌هایتان در منو استفاده کنید.


کد:
<nav class="navbar navbar-expand-sm navbar-light bg-light">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<!-- Brand -->
 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<!-- Links -->
 <div class="collapse navbar-collapse justify-content-start" id="nav-content">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۱</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">لینک ۳</a>
 </li>
 </ul>
 </nav>

کلاس‌های flexbox معمولاً از ترکیب نام آن ویژگی در flexbox بهمراه مقدار آن‌‌ها مشخص می‌شود. این تعریف می‌تواند به شما کمک کند تا بتوانید در مواجه با موقعیت‌های گوناگون نام کلاس flex-box مربوطه را به راحتی حدس بزنید.

از سویی دیگر شما می‌توانید برای تعیین ترازبندی منوی خود از کلاس‌های ریسپانسیو نیز استفاده کنید برای مثال:

کلاس justify-content-lg-start در واقع کلاس حالت ریسپانسیو justify-content:start می‌باشد که برای دستگاه‌ها و صفحه نمایش‌های بزرگتر از 992 px اعمال خواهد شد.

مدارک و مستندات بوت استرپ شامل لیست کاملی از کلاس‌های flexbox هستند که شما می‌توانید به آن به عنوان یک مرجع کامل مراجعه کنید.

رنگ ها:

جالب است بدانید، بوت استرپ گزینه‌های متنوعی را برای افزودن رنگ به منوهای شما فراهم کرده‌است. به اینصورت که، می‌توانید با کمک کلاس‌های navbar-light و یا navbar-dark تیره و روشن بودن پیش زمینه منوی تان را به راحتی مشخص کنید و در نهایت با کمک همان کلاس‌های بوت استرپ رنگ تکست‌های منو را تعیین کنید. همانند (bg-primary , bg-dark) 
در مثال قبل می‌توانید کلاس‌های مربوط به رنگ را که در کد بکار برده شده‌است، مشاهده کنید.

استفاده از رنگ primary و روشن:

برای این کار در ادامه کلاس navbar-light از کلاسbg-primary استفاده کردیم.


کد:
<nav class="navbar navbar-expand-sm navbar-right bg-primary">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<!-- Brand -->
 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<!-- Links -->
 <div class="collapse navbar-collapse" id="nav-content">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۱</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۳</a>
 </li>
 </ul>
 </nav>

استفاده از رنگ primary و تیره:

در اینجا ما از کلاس bg-primary در ادامه کلاس navbar-dark استفاده می‌کنیم.


کد:
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<!-- Brand -->
 <a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<!-- Links -->
 <div class="collapse navbar-collapse" id="nav-content">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۱</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-light" href="#">لینک ۳</a>
 </li>
 </ul>
 </nav>


استفاده از رنگ شخصی و دلخواه:

برای آنکه بتوانید رنگ دلخواه خودتان را اعمال کنید کافی است ابتدا هر کلاسی با مشخصه bg-* را (همانند bg-primary) حذف و سپس رنگ دلخواهتان را با بکارگیری Css اعمال کنید.



کد:
<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>

<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content"> 
<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>

منوی ثابت:

بسته به نوع طراحی سایت، شما می‌توانید منوی خود را در بالا و یا در پایین صفحه نمایشی بصورت ثابت نگهدارید. برای این کار می‌توانید از کلاس‌های fixed-top یا fixed-bottom استفاده کنید.

ثابت در بالا:


کد:
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-dark">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<!-- Brand -->
 <a class="navbar-brand mr-0 ml-5 text-white" href="#">لوگو</a>

<!-- Links -->
 <div class="collapse navbar-collapse" id="nav-content">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۱</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۳</a>
 </li>
 </ul>
 </nav>

ثابت در پایین:


کد:
<nav class="navbar fixed-bottom navbar-expand-sm navbar-light bg-dark">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<!-- Brand -->
 <a class="navbar-brand mr-0 ml-5 text-white" href="#">لوگو</a>

<!-- Links -->
 <div class="collapse navbar-collapse" id="nav-content">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۱</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۲</a>
 </li>
 <li class="nav-item">
 <a class="nav-link text-white" href="#">لینک ۳</a>
 </li>
 </ul>
 </nav>


ترفند

منوی بوت استرپ با خاصیت Hover

در انتهای این مقاله تصمیم گرفتم تا به شما یک ترفند بسیار کاربردی با Jquery آموزش دهم. شما با این ترفند خواهید توانست زیر منوهای خود را به صورت hover مشاهده کنید. برای اینکار کافی است تنها  از تکه کد jquery زیر در لابلای کدهای خود استفاده کنید.

کد:
 $('ul.navbar-nav li.dropdown').hover(function() {

 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);

 }, function() {

 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);

 });

مقایسه بوت استرپ ۴ و بوت استرپ ۳

بوت استرپ ۳ از کلاس‌های navbar-fixed-top و navbar-fixed-bottom برای ثابت نگه داشتن منوها استفاده می‌کند و بوت استرپ ۴ به سادگی با کلاس‌های fixed-top و fixed-bottom اینکار را انجام می‌دهد.


منبع: طراحی سایت ارزان
جستجو پاسخ با نقل قول


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  کلاس های بوت استرپ گرید nooshin88 0 153 04-29-2019، 10:48
آخرین ارسال: nooshin88
  معرفی قالب های هدر بوت استرپ آماده nooshin88 0 237 02-18-2019، 11:15
آخرین ارسال: nooshin88
  معرفی قالب ‌های گالری کارآمد با کمک بوت استرپ ۴ nooshin88 0 301 01-01-2019، 12:25
آخرین ارسال: nooshin88
  چهار قالب گالری بوت استرپ nooshin88 0 813 08-15-2017، 10:14
آخرین ارسال: nooshin88
  معرفی سه فرم بوت استرپ کاربردی و زیبا nooshin88 0 849 01-03-2017، 11:48
آخرین ارسال: nooshin88
  ساخت و طراحی وب سایت با فریم ورک لاراول Laravel sitedarali 1 2,054 07-05-2016، 13:24
آخرین ارسال: marjanparsa
  ساخت جدول‌های قیمت کارآمد در طراحی سایت nooshin88 0 801 04-24-2016، 11:08
آخرین ارسال: nooshin88
  ساخت منوی آبشاری به کمک دستورات css nooshin88 0 729 04-11-2016، 13:14
آخرین ارسال: nooshin88
  راهنمای جامع طراحی و ساخت سایت و شرح اصول sitedarali 0 1,023 07-15-2015، 11:42
آخرین ارسال: sitedarali
  آموزش ساخت اپلیکیشن تحت اندروید (0 تا 100) - مشکلات Mohamm@d 9 4,846 06-30-2014، 02:03
آخرین ارسال: kanoonreza

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
یوهاستینگ در بهمن سال 1389 با هدف ارائه خدمات میزبانی وب تاسیس گردید که در مدت زمانی نچندان کوتاه توانست در چهارمین جشنواره وب ایران سال 1390 عنوان هاستینگ برگزیده را به دست آورد.