سبد (0)

مثال های شبکه بندی در بوت استرپ

در زیر چند مثال از سیستم شبکه بندی بوت استرپ آورده شده است:


سه ستون مساوی

Wiki

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

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

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

سه ستون نامساوی

Wiki

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

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-3">.col-md-3</div>
  <div class="col-sm-6">.col-md-6</div>
  <div class="col-sm-3">.col-md-3</div>
</div>

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

دو ستون نامساوی

Wiki

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

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

دو ستون به همراه دو ستون تو در تو

Wiki

مثال زیر نشان می دهد که چطور دو ستون را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ ایجاد کنیم به طوری که دو ستون دیگر(با عرض برابر) در داخل ستون بزرگتر باشند. (در موبایل، این ستون ها و ستون های تو در تو به طور اتوماتیک دسته بندی خواهند شد).

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

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

مخلوط: مبایل و رایانه

Wiki

سیستم شبکه بندی بوتسترپ شامل 4 کلاس می باشد: xs( برای موبایل ها) و sm( برای تبلت ها) و md( برای رایانه های رومیزی) و lg( برای رایانه های رومیزی بزرگ). این کلاس ها می توانند با یکدیگر ترکیب شوند تا بتوان طرح بندی های داینامیک و قابل انعطاف را ایجاد کرد.

نکته: مقیاس هر کلاس افزایش می یابد، بنابراین اگر می خواهید یک عرض یکسان برای کلاس های xs و sm داشته باشید، تنها نیاز دارید تا کلاس xs را تعریف کنید.

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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

توجه داشته باشید که تعداد ستون های شبکه بندی برای هر ردیف 12 عدد می باشد. در صورتی که بیش از 12 ستون تعریف شود، ستون ها بدون توجه به منطقه ی دید(viewport) دسته بندی خواهند شد.


مخلوط : مبایل و تبلت و رایانه

Wiki

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

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

حذف شناور بودن

Wiki

برای اجتناب از بسته بندی عجیب و ناهموار می توانید از کلاس clearfix استفاده کنید:

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

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

جبران ستون ها

Wiki

می توان با استفاده از کلاس .col-md-offset-* ستون ها را به سمت راست متمایل کرد.  این کلاس ها margin سمت چپ را از یک ستون به وسیله ی ستون های * افزایش می دهد:

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

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

فشار دادن و کشیدن-تغییر دادن ترتیب ستون ها

Wiki

 می توانیم  با استفاده از کلاس های .col-md-push-* و .col-md-pull-*  ترتیب ستون های شبکه بندی را تغییر دهیم:

مثال (مثال های شبکه بندی بوت استرپ)

<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>

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

آموزش صوتی Bootstrap

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

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

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