سبد خرید (0)

تبلیغات

بررسی ستون بندی در بوت استرپ

طرح بندی چند ستونه

Wiki

ایجاد یک طرح چند ستونه(multicolumn) در بوتسترپ بسیار آسان می باشد.

بوتسترپ، یک سیستم شبکه بندی 12 ستونه و واکنش گرا و پاسخگرا به مبایل را ارائه می دهد.

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

برخی قواعد شبکه بندی:

  • همواره با یک ظرف شروع کنید(<div class="container">).
  • یک ردیف را به وسیله ی عبارت <div class="row"> به ظرف اضافه کنید.
  • برای سرعت بیشتر در ایجاد ستون های شبکه بندی، می توانید از کلاس های از پیش تعریف شده ی ستون ها استفاده کنید.  مثلا می توانید از کلاس های .col-md-4 و .col-md-6 استفاده کنید.
  • ستون های شبکه بندی با مشخص کردن 12 ستون قابل گسترش ایجاد می شوند، بعنوان مثال برای ایجاد سه ستون مساوی می توانید از کلاس .col-md-4 استفاده کنید.
  • همواره باید جمع اعداد داخل کلاس .col-*-*  برای هر ردیف(row) برابر با 12 باشد.
  • محتوا نیز درون ستون های شبکه بندی قرار می گیرند.

مثال زیر نشان می دهد که چطور، 4 ستون با عرض مساوی را ایجاد کنیم:

مثال (گزینه ستون های چندگانه)

<div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-3"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
  </div>
  <div class="col-md-3"> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>

خودتان امتحان کنید »

ستون ها با عرض های متفاوت

Wiki

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

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

مثال (ستون های چندگانه)

 <div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-6"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>

خودتان امتحان کنید »

دیدگاه‌ها  

+2 # gol 1395-07-20 16:53
با سلام اگر بخواهم طوری برنامه ریزی کنم که تعدادی از div ها توی رزولوشن smو xs نشان داده نشوند چکار باید انجام بدهم؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-20 17:05
با سلام.
کافیه برای اون عنصر از کلاس‌های hidden-sm-up یا hidden-sm-down استفاده کنید.
up برای این هست که از اون رزولوشن به بعد مخفی بشه و down هم برای از اون رزولوشن کمتر.

لینک زیر میتونه شما رو کامل راهنمایی کنه.
v4-alpha.getbootstrap.com/layout/responsive-utilities/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی