%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (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>

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

دیدگاه‌ها  

+5 # minampr 1394-08-23 22:23
سلام وقت بخیر
برای شبکه بندی با بوت استرپ برای هر چهار تا حالت log , md ,sm,xm به سطر ها مقدار دادم ،
اما زمانی که عرض صفحه رو با موس کوچک میکنم تغییر میدم در یک سری عرض های صفحه علاوه بر اینکه سطر ها بهم میریزه دابوها فاصله شان نسبت بهم بهم میریزه و به هم میچسبن عکسش رو گذاشتم مشکل چیه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-08-23 22:31
با سلام و تشکر.
خاطرنشان می‌کنم انجمن سایت بیاموز راه‌اندازی شد. از این پس می‌تونید با درج سؤال خود در انجمن از امکانات و تخصص سایر کاربران بهره‌مند شوید.

اما در مورد سؤالتون! دقت کنید عبارت xs برای دستگاه‌های خیلی کوچک، sm برای دستگاه‌های با سایز کوچک، md برای سایز متوسط و lg برای سایزهای بزرگ هست.زمانی که سایز صفحه رو کوچک می کنید، با توجه به سایز معمولا یکی از کلاسهای xs یا sm اعمال میشه.
اگر کدهای خودتون رو قرار بدید، راحت‌تر میشه فهمید مشکل از کجاست.
برای اینکار ترجیحاً از انجمن سایت به آدرس http://beyamooz.com/forum/ استفاده کنید. در انجمن امکانات متنوعی برای درج سؤال، از جمله درج کد وجود داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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