بررسی منوها در بوت استرپ
منوها
اکثر صفحات وب دارای یک نوع منو می باشند.
در HTML اغلب یک منو، در یک لیست نامنظم(<ul>) شبیه زیر تعریف می شود:
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
بوت استرپ دو راه را برای نمایش دادن منوی بالا ارائه می دهد: تب ها و pillها:
تب ها
تب ها به وسیله ی عبارت <ul class="nav nav-tabs"> ایجاد می شوند.
نکته: همواره صفحه ی جاری را با <li class="active"> مشخص کنید.
مثال زیر، تب های ناوبری را ایجاد می کند:
مثال (بررسی منو)
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
خودتان امتحان کنید »
تب ها به همراه منوی کشویی
تب ها می توانند در درون خود منوهای کشویی را داشته باشند.
مثال زیر یک منوی کشویی را به "Menu1" اضافه می کند:
مثال (بررسی منو)
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
خودتان امتحان کنید »
قرص ها(pills)
pill ها به وسیله ی عبارت <ul class="nav nav-pills"> ایجاد می شوند. همچنین می توانید صفحه ی جاری را با عبارت <li class="active">مشخص کنید:
مثال (بررسی منو)
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
خودتان امتحان کنید »
قرص های عمودی
pill ها همچنین می توانند به صورت عمودی نمایش داده شوند. فقط کافی است که کلاس nav-stacked. را اضافه کنید.
مثال زیر منوی pill عمودی را درون آخرین ستون قرار می دهد. بنابراین در یک صفحه ی نمایش بزرگ، منوی مورد نظر در سمت راست نمایش داده می شود. اما در یک صفحه نمایش کوچک، محتوا به طور اتوماتیک خودش را به صورت تک ستونه تنظیم می کند.
مثال (بررسی منو)
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
خودتان امتحان کنید »
قرص ها به همراه منوهای کشویی
قرص ها(pill ها) همچنین می توانند منوهای کشویی را در خود نگه دارند.
مثال زیر، یک منوی کشویی را به "Menu1" اضافه می کند:
مثال (بررسی منو)
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 14527
دیدگاه‌ها
با سلام و تشکر یک سوال داشتم:
میخواستم بدونم در بوتسترپ امکانش هست رنگ منو ها را به دلخواه عوض کنیم .البته میتونم css مربوط بهش را پیدا کنم و رنگش را عوض کنم ولی احتمالا با اینکار مشکل پیدا میشه لطفا راهنمایی کنید .و سوال دیگه اینکه اگه از منو های جی کویری در یک بدنه بوتسترپ استفاده کنم اشکالی توی واکنشگرایی پیدا نمیشه؟
با سلام و تشکر.
بهترین کار این هست که در کنار فایل بوت استرپ یه فایل CSSجدا بذارید و کلاسهایی رو که دوست دارید ، بر حسب نیاز تغییر بدید و اگر نیاز دارید حتما برای شما اعمال بشه، کنار هر خصوصیت از important! هم استفاده کنید.
اگر موارد واکنشگرایی رو در سایت رعایت کنید، مشکلی برای استفاده از منو در هر کجا پیش نخواهد آمد.