ساخت منو افقی با بوت استرپ
ساخت منو افقی با بوت استرپ 4 به زبان فارسی همراه با دانلود رایگان کدهای منوی افقی بوت استرپ همراه با مثال های متنوع و توضیحات کامل کدها. کدها همه تست شده میباشند کافی است آنها را اجرا کنید و نتیجه را ببینید.
در این بخش از آموزش بوت استرپ 4 فارسی از تاپ سایت 98 به سراغ ساخت منو افقی با بوت استرپ می رویم.
برای ساخت منوی افقی در بوت استرپ از تگ nav با کلاس navbar استفاده می کنیم.
مثال ساخت منوی افقی
در زیر مثال ساخت منوی افقی در بوت استرپ را مشاهده می کنید.
معمولا برای ساخت منو از تگ ul استفاده می کنیم.
در انتهای همین صفحه کد کامل منوی افقی با بوت استرپ 4 را می توانید دانلود کنید.
نتیجه این کد ، یک منوی افقی با پس زمینه مشکی خواهد بود.
<ul class="navbar-nav">
<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="#">bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">jquery</a>
</li>
</ul>
</nav>
ساخت منوی افقی ریسپانسیو با بوت استرپ
حال به سراغ ساخت منوی افقی ریسپانسیو با بوت استرپ 4 به زبان فارسی می رویم.
ساخت منو راست چین و چپ چین تفاوت زیادی با هم ندارند.
برای راست چین کردن منو می توانید به بخش دانلود بوت استرپ 4 راست چین فارسی بروید و از فایل های آن استفاده کنید.
برای ساخت منوی ریسپانسیو در بوت استرپ از کلاس های collapse و navbar-collapse استفاده می شود.
همچنین یک تگ button برای زمانی که صفحه کوچک می شود قرار می دهیم که معمولا با 3 خط در میان آن مشخص می شود.
مثال ساخت منوی افقی ریسپانسیو
در زیر مثال ساخت منوی افقی ریسپانسیو را مشاهده می کنید.
کد کامل مثال را می توانید در قسمت پایین دانلود کنید.
نتیجه این کد یک منوی افقی ریسپانسیو می باشد یعنی در کامپیوتر منو بصورت افقی دیده می شود و در موبایل منو پنهان شده و با کلیک روی دکمه منو بصورت عمودی دیده می شود.
<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="#">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>
</ul>
</div>
</nav>
ساخت منوی افقی با رنگ های مختلف
در این بخش ساخت منوی افقی با رنگ های مختلف را بررسی می کنیم.
ما می توانیم پس زمینه منو را با استفاده از ویژگی bg تغییر دهیم.
رنگ پس زمینه را می توانید تغییر دهید برای تغییر رنگ پس زمینه یا بک گروند می بایست کلاس bg-dark را تغییر دهید.
به عنوان مثال اگر می خواهید رنگ پس زمینه سبز شود کافی است کلاس bg-success را قرار دهید.
برای تغییر پس زمینه یا background منو کافی است همین یک خط را تغییر دهید.
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
کلاس navbar-brand
کلاس navbar-brand در هنگام کوچک شدن صفحه پنهان نمی شود و می توانید برای نمایش نام سایت از آن استفاده کنید.
در زیر نحوه استفاده از کلاس navbar-brand را مشاهده می کنید.
حتی می توانید بجای متن از تصویر استفاده نمایید.
در مثال زیر بجای متن از لوگو در منو استفاده کرده ایم.
سایز تصویر را نیز 40 پیکسل قرار داده ایم.
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="logo" style="width:40px;">
</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="#">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>
</ul>
</div>
</nav>
کلاس navbar در بوت استرپ
کلاس navbar در بوت استرپ برای ساخت منو استفاده می شود.
نوبار (navbar) دارای اهمیت زیادی میباشد چرا که در بیشتر سایت ها از منو استفاده می کنند.
با استفاده از نوبار (navbar ) می توانیم منوی افقی یا عمودی ایجاد کنیم.
در زیر نحوه استفاده از navbar در بوت استرپ را مشاهده می کنید.
دانلود منوی افقی بوت استرپ
در این بخش به سراغ دانلود منوی افقی بوت استرپ می رویم.
روی گزینه زیر کلیک کنید تا کدهای بوت استرپ و مثال های بالا را دانلود کنید.
امیدواریم از این آموزش لذت برده باشید.
موفق باشید.
منبع: دبلیو 3 اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-02-27 19:45:12
سلام.در منو ریپانسیو وقتی روی دکمه کلیک میکنیم اتفاقی نمی افته
سلام. اگر از بوت استرپ یا پلاگین های جی کوئری استفاده می کنید احتمالا فایل جی کوئری متصل نیست. آدرس را با دقت وارد کنید و یک تست ساده بگیرید که جی کوئری متصل باشد
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید