سبد (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>

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

آموزش صوتی Bootstrap

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

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

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