آموزش ساخت منو ریسپانسیو در bootstrap

جلسه چهارم - ساخت منوی ریسپانسیو

یکی از چالش هایی که طراحان وب با آن دست و پنجه نرم میکنند، ایجاد کردن یک منوی دراپ دان و ریسپانسیو کردن آن در حالت موبایل و تبلت می باشد. در این ویدئوی آموزشی به طور کامل با ساختن منوی در بوت استرپ 3 آشنا می شویم

بخش اول - ویدئوی آموزش ساخت منو در پایه ترین حالت بوت استرپ

بخش دوم - ساخت منوی دو سطحی در بوت استرپ

بخش سوم - قرار دادن گزینه های اضافی در انتهای منو

بخش چهارم - ریسپانسیو کردن منو در بوت استرپ

ساختار کلی یک منوی ریسپانسیو در بوت استرپ 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 را به صفحه خود متصل کنید.

در فیلم آموزشی و سورس کدی که در اختیار شما قرار میگیرد این فایل وجود دارد.


ارسال نظر درباره این موضوع


  • ب (شنبه, 21 اردیبهشت 1398 ساعت 09:20:30)
    سلام. با تشکر از آموزش های عالی تون. سورس کد رو چجوری می تونیم دانلود کنیم؟ به خصوص که فایل bootstap.rtl من با شما متفاوت است. چون وقتی از navbar-left استفاده می کنم سمت راست قرار می گیرد.

    • (شنبه, 21 اردیبهشت 1398 ساعت 09:49:27)

      سلام .خواهش میکنم. سورس کدها تا آخر هفته روی سایت قرار میگیره فعلا میتونید فایل بوت استرپ راست چین رو از این لینک دانلود کنید http://s8.picofile.com/file/8360058792/bootstrap_rtl.css.html


      • ب (شنبه, 21 اردیبهشت 1398 ساعت 10:24:33)
        خیلی ممنون. لطف کردید.

      • کاربر (چهار شنبه, 23 مرداد 1398 ساعت 00:59:38)
        ایا این rtl با کلیه بوت استرپ های ورژن 3 سازگاری داره؟ (یا مثلا فقط با 3.4.1) و اینکه کسایی که میخوان با ورژن 4 کار کنن در مورد فارسی سازی باید چکار کنن؟

        • (چهار شنبه, 23 مرداد 1398 ساعت 09:28:52)

          این فایلی که توی آموزش استفاده کردیم برای بوت استرپ ورژن 3 کاربرد داره. اگر از ورژن 4 استفاده میکنید این فایل رو دانلود کنید http://s2.picofile.com/file/8369574676/bootstrap_rtl.css.html


  • mohamad (چهار شنبه, 23 مرداد 1398 ساعت 12:36:56)

    خواستم بینهایت تشکر کنم ازتون ، اموزش واقعا عالی بود و کاربردی ، در کوتاه ترین زمان تمامیه مسایل رو پوشش دادین ، خسته نباشید واقعا


    • (پنج شنبه, 24 مرداد 1398 ساعت 11:20:56)

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


  • فرزاد (چهار شنبه, 06 شهریور 1398 ساعت 13:55:19)
    واقعا" سپاس

    • (چهار شنبه, 06 شهریور 1398 ساعت 20:32:57)

      خواهش میکنم.