تغییرات بیشتر در طراحی واکنش گرا

تغییرات بیشتر در طراحی واکنش گرا

 

میتوانید عکس های متعددی را در صفحه خود ایجاد کنید.

<div class="row">

      <div class="col-12 col-m-12 menu">

            <img src="7.jpg">

      </div>

</div>

تغییرات بیشتر در طراحی واکنش گرا
 

و در ادامه :

عکس ها را میتوانید با اشغال تعداد ستون های متفاوت قرار دهید.همه چیز بستگی به سلیقه شما دارد.

 

<div class="row">

      <div class="col-4 col-m-6 menu">

            <img src="8.jpg">

      </div>




      <div class="col-8 col-m-6 menu">

            <img src="9.jpg">

      </div>

</div>
تغییرات بیشتر در طراحی واکنش گرا
 

سایز تبلت:

تغییرات در طراحی واکنش گرا
 

طراحی navbar:

برای طراحی navbar در سایز های تبلت و موبایل، تبدیل به منو سه خطی شود.

برای این کار یک بخش برای منو در نظر بگیرید.

در بخش هایی که نیاز دارید navbar وجود داشته باشد، display را block قرار داده و هر قسمتی که نیاز به open menu داشتیم، باید display را block قرار دهیم.

و بالعکس هر قسمتی که باید از بین برود، باید display را none قرار دهیم.

<div class="row btn2">

      Open Menu

</div>

 

[class*="col-"] {
  width: 100%;
}

.btn2{
  display: block;
}

.btn{
    display: none;
  }

.hide-menu{
  display: block;
}

body{
  background-color: #b55c69;
}


@media only screen and (min-width: 600px){
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}

  body{
    background-color: #7d0006;
    color: white;
  }
  .btn{
    display: none;
  }

  .hide-menu{
  display: none;
}
}

@media only screen and (min-width: 768px){
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  body{
    background-color: #e3e3e3;
    color: black;
  }

  .btn2{
  display: none;
}

  .btn{
    display: block;
  }

  .hide-menu{
  display: block;
}
}

 

 

$(function(){

      $(".btn2").click(

            function(){

                  $(".btn").slideToggle();

            });

});

آموزش طراحی واکنش گرا

 

 

آموزش طراحی سایت
 

 

آموزش رایگان طراحی واکنش گرا
 

 

طراحی واکنش گرا
 

قسمت قبل آموزش (تنظیمات عکس و ویدیو در طراحی واکنش گرا)

قسمت بعد آموزش (آموزش کار با bootstrap)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *