آموزش ساخت قالب واکنشگرا در بوتسترپ

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

- پیش نیاز ها:  HTML - CSS - Bootstrap

- پیش نمایش: مشاهده پیش نمایش یا Demo

- خرید و دانلود پروژه: دانلود با لینک مستقیم

- حجم فایل: 8.77 مگابایت

آموزش ساخت قالب واکنشگرا در بوتسترپ

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

این قالب در تمامی دستگاه ها به خوبی نمایش داده می شود و به طور اتوماتیک برای هر دستگاه، اندازه ی آن تنظیم می شود.

 نحوه ی آموزش این قالب به صورت خط به خط می باشد، بعنوان مثال برای ایجاد نوار هدایتی قالب، آموزش به صورت زیر می باشد:

27- ایجاد نوار هدایتی:برای ایجاد نوار هدایتی، یک تگ nav ایجاد کرده و به آن آی دی mainNav را می دهیم.به کلاس های به کار برده شده در این تگ دقت کنید. کلاس navbar-fixed-topباعث می شود که نوار هدایتی در صفحه به صورت ثابت باشد.

قالب واکنشگرا - خط 27

27: <nav id=”mainNav” class=”navbar navbar-default navbar-fixed-top">

28- در خط 28 مشاهده می کنید که یک ظرف از نوع container-fluid را ایجاد کرده ایم. استفاده از کلاس container-fluid باعث می شود که نوار هدایتی ما به صورت تمام صفحه باشد.

قالب واکنشگرا - خط 28

28: <div class="container-fluid">

29- در کدهای خط 30 تا 38 قصد داریم که یک منوی دکمه ای برای دستگاه ها با صفحات کوچک ایجاد کنیم.بدین ترتیب هرموقع که صفحه ی ما در دستگاه های مبایل با صفحه های بسیار کوچک نمایش داده شود، منوی بزرگ ما که بسیار جاگیر می باشد نشان داده نمی شود و به جای آن یک منوی کشویی دکمه ای کوچک نمایش داده می شود.

قالب واکنشگرا - خط 29 و 30

29: <!-- Brand and toggle get grouped for better mobile display -->
30: <div class="navbar-header">

31- در خط 31 دکمه ی مورد نظر را ایجاد می کنیم. برای اینکه به طور اتوماتیک منوی کشویی را ایجاد کنیم، تنها کافی است عباراتdata-targetو "data-toggle=”collapseرا به دکمه ی مورد نظر اضافه کنید. توجه داشته باشید که در data-target آی دی دایوی که منوها در آن قرار گرفته اند و می خواهیم به صورت کشویی در دستگاه های کوچک باشند را مشخص می کنیم.

قالب واکنشگرا - خط 31

31: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 

32- در خط 32، یک عبارت را برای screen readerها یا همان صفحه خوان ها تعریف می کنیم.

قالب واکنشگرا - خط 32

32: <span class="sr-only">Toggle navigation</span> 

 33- در خط 33 تا 35 برای ایجاد دکمه ی مورد نظر، سه خط کوچک افقی را ایجاد می کنیم. و در خط 36 تگ دکمه را می بندیم.

قالب واکنشگرا - خط33 تا 36

33: <span class="icon-bar"></span>
34: <span class="icon-bar"></span>
35: <span class="icon-bar"></span>
36: </button>

 37- در آخر نیز برند سایت که در گوشه ی سمت راست نوار هدایتی قرار می گیرد را مشخص می کنیم. همان طور که در خط زیر مشاهده می کنید، در تگ a از کلاس page-scroll استفاده شده است. با اضافه کردن این کلاس و مشخص کرده یک id از یک عنصر هدف، با کلیک کردن به روی این لینک، صفحه به طور اتوماتیک به سمت عنصر هدف اسکرول می شود.توجه کنید که آی دی page-top در عنصر body تعریف شده است.

قالب واکنشگرا - خط 37 و 38

37: <a class="navbar-brand page-scroll" href="#page-top">شروع کار با بوتسترپ</a>
38: </div>