آموزش ساخت منو ریسپانسیو در 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)

      خواهش میکنم.


  • علی (جمعه, 10 آبان 1398 ساعت 23:55:31)
    با سلام و عرض ادب واقغا فوق العاده بود بالاخره تونستم منوی دلخواهم رو بسازم ممنووووووووون فقط یه سوال داشتم منوهایی که زیر منو دارن باید باید با کلیک باز بشن چطور میشه با حرکت موس روی آن ها باز بشن؟ باز هم ممنونم

    • (شنبه, 11 آبان 1398 ساعت 10:33:56)

      سلام. خوشحالم که تونستم بهتون کمک کنم. بابت اینکه وقتی ماوس بخواد بره روی منو و زیر منو ظاهر بشه باید یه فیلم آموزشی جدا ضبط بکنم براتون توضیح دادنش سخت میشه اینجوری


  • سعید (چهار شنبه, 13 آذر 1398 ساعت 13:20:37)
    با سلام خدمت شما یه سوال داشتم .من این کدهارو روی firefox اجرا کردم در حالت عادی و ریسپانسیو کار میکنه ولی روی chrom کار نمیکنه حالت ریسپانسیوش کار نمیکنه ممنون میشم راهنمایی کنید

    • (چهار شنبه, 13 آذر 1398 ساعت 13:33:35)

      با سلام. لطفا یک دموی آنلاین بهم بدید تا بتونم کدهاتون رو بررسی کنم


  • محمد امین (شنبه, 30 آذر 1398 ساعت 11:12:04)
    با سلام. من وقتی این کد ها رو پیاده میکنم منو به درستی ساخته میشه ولیدکمه منو در حالت موبایل کار نمی کنه. حتی وقتی این رو کپی می کنم بازم نمیشه.id رو عین هم وارد می کنم.لطفا راهنمایی کنید.ممنون

    • (یک شنبه, 01 دی 1398 ساعت 08:49:33)

      سلام لطفا یک دموی آنلاین از کارتون برام ارسال کنید تا بتونم بهتر راهنمایی کنم. 


  • reyhaneh (شنبه, 21 دی 1398 ساعت 05:57:17)
    سلام . نوشتید که سورس بخش منوی ریسپانسیو رو قرار می دید ولی من پیداش نکردم . میشه راهنمایی کنید با تشکر

    • (یک شنبه, 22 دی 1398 ساعت 09:55:45)

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


  • علی دلیر (جمعه, 11 بهمن 1398 ساعت 22:37:00)
    خیلی از ممنون خوب بود

  • فری (دو شنبه, 14 بهمن 1398 ساعت 02:20:19)
    سلام ممنون بابت اموزش من یه مشکلی دارم در حالت موبایل که میزارم منو درست نشون نمیده چیکار باید کرد منو مرتب نمایش بده سورس اموزش بالا رو اگه امکان داره بزارید

    • (سه شنبه, 15 بهمن 1398 ساعت 08:38:28)

      سلام لطفا سورس کدتون یه جایی آپلود کنید تا بتونم بررسی کنم


  • محمد امینی (یک شنبه, 18 اسفند 1398 ساعت 18:37:03)
    با سلام. من این کد را اجرا کردم ولی هنگام کوچک شدن عرض دکمه سه خطی کار نمی کند. کدام فایل های بوت استرپ را باید انکلود کنیم.لطفا راهنمایی کنید.

    • (سه شنبه, 20 اسفند 1398 ساعت 08:57:32)

      لطفا سورس کد خودتون رو در سایت picofile.com آپلود کنید ولینک رو توی همین کامنت قرار دهید


  • محمد (دو شنبه, 26 اسفند 1398 ساعت 02:30:40)
    سلام من بخش اول را هرکاری کزدم نه رنگ درست شد نه چیزی افقی شد منو اما رنگ نگرفت و...

    • (دو شنبه, 26 اسفند 1398 ساعت 08:42:06)

      با سلام لطفا فایل پروژه خودتون رو توی picofile.com آپلود کنید ولینک رو قرار بدید تا بررسی کنم


  • محمدجواد (پنج شنبه, 21 فروردین 1399 ساعت 14:00:25)
    با سلام و تشکر از محتوای خوب و قابل استفاده شما .من مسئول بارگذاری محتوا در یک سایت هستم و در cpanel قسمتی دارد که من میتوانم محتوا بگذارم البته فقط من میتوانم کد htmlبنویسم و cssهای آن در هاست ازقبل بارگذاری شده و فقط من میتوانم cssبصورت inlineبنویسم، من چک کردم در cssهای موجود در سایت bootstrap.cssدر قسمت styleموجود بود ولی وقتی با مراحل تدریس شما پیش میروم و کدها را مینویسم ، مثلا در درس ایجاد منو، منوی من بصورت افقی در نمیآید و یا در درس قبل که col-xsو غیره را میدادید مثلا کلاس container مستطیلهای من در حالت دسکتاب از صفحه کاری بیرون میرفت و من مجبور میشدم در خود کلاس containerعرض بدهم و یا برای ایجاد منوی افقی از دستور inlineاستفاده کنم . بفرمایید من چطور میتوانم با شما پیش بروم

    • (پنج شنبه, 21 فروردین 1399 ساعت 19:19:27)

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


  • paria (پنج شنبه, 12 تیر 1399 ساعت 16:42:41)
    سلام،ممنون از آموزش عالیتون، اگر بالای منو ی بخش باشه ک لوگو سرچ و ورود باشه ریسپانسیو کردنش چه جوری میشه؟

  • مهدی (یک شنبه, 09 شهریور 1399 ساعت 21:50:58)
    سلام و ارادت؛ بسیار ممنونم از آموزش خوبتان من یک منوی بوت استرپ دارم. زمانی که روی لینک کلیک زیرمنو میکنم و صفحه رفرش میشه و صفحه دیگه ای لود میشه نمیخوام منو بسته بشه و میخوام ساب منوی کلیک شده باز بمونه. چجور میتونم اینکارو کنم؟ ممنونم

    • (دو شنبه, 10 شهریور 1399 ساعت 10:55:43)

      زمانی که شما از یک صفحه به صفحه دیگری منتقل میشوید بهش میگن PostBack شدن. زمانی که یک صفحه HTML به اصطلاح PostBack میشه کل صفحه رفرش شده و همه چیز از اول ساخته میشه برای اینکه این اتفاق نیوفته باید از ایجکس و یا فریم ورک هایی نظیر Vuejs,react,angular استفاده کنید