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

هدایت عباسی آموزش بوت استرپ

در این بخش از آموزش بوت استرپ 4 با طراحی و ساخت منوی عمودی با بوت استرپ آشنا می شوید. در این آموزش چندین منوی عمودی به زبان فارسی آموزش می دهیم. از کدهای زیر می توانید در پروژه های خود استفاده نمایید.

در این بخش از آموزش بوت استرپ 4 از تاپ سایت 98 به سراغ ساخت منوی عمودی با بوت استرپ می رویم.

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

در این بخش قصد داریم یک منوی عمودی ساده با بوت استرپ را آموزش دهیم.

در زیر یک مثال از منوی عمودی را مشاهده می کنید.

پس از فراخوانی فایل های بوت استرپ کد زیر را در فایل قرار دهید و اجرا نمایید.

برای دانلود بوت استرپ 4 فارسی و سپس فراخوانی فایل ها می توانید کلیک کنید.

خروجی یک منوی عمودی می باشد.

برای ساخت منو معمولا از تگ ul استفاده می کنند.

<div class="col-sm-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">html</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">css</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">jquery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">php</a>
</li>
</ul>
</div>

منوی عمودی زیبا با بوت استرپ

در زیر یک مثال منوی عمودی زیبا با بوت استرپ قرار داده ایم.

پس از فراخوانی فایل های بوت استرپ این کد را در فایل قرار داده و تست نمایید.

خروجی یک منوی عمودی زیبا میباشد.

<div class="col-sm-4">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>

منوی عمودی dropdown با بوت استرپ

در بخش زیر با ساخت منوی عمودی dropdown با بوت استرپ 4 آشنا می شوید.

یکی دیگر از راه های ساخت و طراحی منوی عمودی در بوت استرپ استفاده از dropdown می باشد.

یک تگ div را با کلاس dropdown ایجاد کرده ، سپس یک button در آن قرار می دهیم.

با کلیک روی دکمه ، منوی عمودی نمایش داده می شود.

برای اجرای منو کافی است فایل های js , css بوت استرپ و جی کوئری را فراخوانی کنید ، سپس کد زیر را در میان قسمت body قرار داده و سپس ذخیره و اجرا نمایید.

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">html</a>
<a class="dropdown-item" href="#">css</a>
<a class="dropdown-item" href="#">TopSite98.com</a>
</div>
</div>

امیدواریم این آموزش مورد توجه شما عزیزان قرار گرفته باشد.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید