آموزش ساخت منو ریسپانسیو در bootstrap
یکی از چالش هایی که طراحان وب با آن دست و پنجه نرم میکنند، ایجاد کردن یک منوی دراپ دان و ریسپانسیو کردن آن در حالت موبایل و تبلت می باشد. در این ویدئوی آموزشی به طور کامل با ساختن منوی در بوت استرپ 3 آشنا می شویم
- 3/2/1398 22/5/1400
ساختار کلی یک منوی ریسپانسیو در بوت استرپ 3
مهمترین مسئله ای که در طراحی سایت responsive مطرح است، طراحی کردن منوی ریسپانسیو است. خوشبختانه بوت استرپ به طور کامل به این نیاز پاسخ داده است. هر چند اگر بخواهید خودتان از ابتدا یک منوی ریسپانسیو طراحی کنید کار زیاد سختی نیست. فقط نیاز است با دستورات مدیا کوئری در css و همینطور کمی jquery بلد باشید.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
آیا برای ساخت منوی موبایلی الزام است از بوت استرپ استفاده کنیم؟
پاسخ قطعا خیر است. اگر شما با دستورات css به خوبی آشنا باشید، میتوانید منوی سایت خود را بر اساس سلیقه و نیاز خود طراحی کنید. هیچ لزومی ندارد که حتما از Bootstrap Navbar در پروژه های خود استفاده کنید. ولی اگر دانش کمی در زمینه jquery , css دارید، میتوانید از ساختار منوی بوت استرپ استفاده کنید.
منوی ریسپانسیو فارسی
یکی از مشکلاتی که کاربران تازه کار با آن مواجه می شوند، ایجاد کردن یک منوی ریسپانسیو فارسی است. خوشبختانه در بوت استرپ این کار به سادگی انجام می شود. فقط کافی است فایل boostrap-rtl.css را به صفحه خود متصل کنید.
در فیلم آموزشی و سورس کدی که در اختیار شما قرار میگیرد این فایل وجود دارد.
ارسال نظر درباره این موضوع
زمانی که شما از یک صفحه به صفحه دیگری منتقل میشوید بهش میگن PostBack شدن. زمانی که یک صفحه HTML به اصطلاح PostBack میشه کل صفحه رفرش شده و همه چیز از اول ساخته میشه برای اینکه این اتفاق نیوفته باید از ایجکس و یا فریم ورک هایی نظیر Vuejs,react,angular استفاده کنید
شما میتونید توی navbar بوت استرپ هرچیزی دلتون میخواد بذارید
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_form_addon&stacked=h
این لینک رو بررسی کنید
سلام. کلا روشی که استفاده میکنید استاندارد نیست. شاید روی هاست بوت استرپ ورژن 4 هست که این مشکلات برای شما بوجود اومده
با سلام لطفا فایل پروژه خودتون رو توی picofile.com آپلود کنید ولینک رو قرار بدید تا بررسی کنم
لطفا سورس کد خودتون رو در سایت picofile.com آپلود کنید ولینک رو توی همین کامنت قرار دهید
سلام لطفا سورس کدتون یه جایی آپلود کنید تا بتونم بررسی کنم
سلام. توی همین کامنت لینکش رو میذارم الان دسترسی ندارم متاسفانه به فایل های آموزشی
سلام لطفا یک دموی آنلاین از کارتون برام ارسال کنید تا بتونم بهتر راهنمایی کنم.
با سلام. لطفا یک دموی آنلاین بهم بدید تا بتونم کدهاتون رو بررسی کنم
سلام. خوشحالم که تونستم بهتون کمک کنم. بابت اینکه وقتی ماوس بخواد بره روی منو و زیر منو ظاهر بشه باید یه فیلم آموزشی جدا ضبط بکنم براتون توضیح دادنش سخت میشه اینجوری
خواهش میکنم.
خواستم بینهایت تشکر کنم ازتون ، اموزش واقعا عالی بود و کاربردی ، در کوتاه ترین زمان تمامیه مسایل رو پوشش دادین ، خسته نباشید واقعا
خواهش میکنم دوست عزیز. امیدوارم که از آموزش ها استفاده ببرید
سلام .خواهش میکنم. سورس کدها تا آخر هفته روی سایت قرار میگیره فعلا میتونید فایل بوت استرپ راست چین رو از این لینک دانلود کنید http://s8.picofile.com/file/8360058792/bootstrap_rtl.css.html
این فایلی که توی آموزش استفاده کردیم برای بوت استرپ ورژن 3 کاربرد داره. اگر از ورژن 4 استفاده میکنید این فایل رو دانلود کنید http://s2.picofile.com/file/8369574676/bootstrap_rtl.css.html