آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

مثال های گرید سیستم بوت استرپ

دوره های مرتبط با این مقاله

در این درس مثال هایی از Layout های اساسی درشبکه بندی BootStrap ارائه شده اند.

سه ستون برابر (Three Equal Columns)

نمونه 1

.col-sm-4
.col-sm-4
.col-sm-4
امتحان کنید

سه ستون نا برابر (Three Unequal Columns)

مثال پایین نحوه ی ایجاد سه ستون با عرض متفاوت را نشان می دهد که سایز آنها، از تبلت تا کامپیوترهای رومیزی بزرگ، مقیاس گذاری می شود:

نمونه 2

.col-sm-3
.col-sm-6
.col-sm-3
امتحان کنید

دو ستون نابرابر (Two Unequal Columns)

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

نمونه 3

.col-sm-4
.col-sm-8
امتحان کنید

دو ستون همراه با دو ستون تو در تو (Nested)

مثال پایین نحوه ی ایجاد دو ستون با عرض مختلف را نشان می دهد که سایز آنها، از تبلت تا کامپیوترهای رومیزی بزرگ، مقیاس گذاری می شود، و در عین حال دو ستون دیگر (با عرض یکسان) نیز درون ستون بزرگتر گنجانده شده اند (در گوشی های موبایل این ستون ها به همراه ستون های موجود در آنها، Stack (دسته بندی) می شوند):

نمونه 4

.col-sm-8
.col-sm-6
.col-sm-6
.col-sm-4
امتحان کنید

ترکیب: موبایل و کامپیوتر رومیزی

سیستم شبکه بندی BootStrap دارای چهار کلاس می باشد: xs (موبایل)، sm (تبلت ها)، md(رایانه های رومیزی)، lg (رایانه های رومیزی بزرگتر). می توان این کلاس ها را با هم ترکیب نمود و layout های منعطف تر و داینامیک تری ایجاد نمود.

نکته:

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

نمونه 5

.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
.col-xs-6 .col-md-10
.col-xs-6 .col-md-2
.col-xs-6
.col-xs-6
امتحان کنید
نکته:

به یاد داشته باشید که حداکثر می توان 12 ستون را به هر سطر اضافه کرد. اگر تعداد ستون ها بیشتر باشند، بدون در نظر گرفتن viewport دسته بندی (stack) می شوند

ترکیب: موبایل، تبلت، و رایانه های رومیزی

مثال:

نمونه 6

.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
امتحان کنید

حذف Float ها

به منظور جلوگیری از بسته بندی های نامتعارف که دارای محتوای نامطلوب می باشند، Float های حاوی کلاس .clearfix را در نقاط انفصال معین، پاکسازی نمایید.

مثال:

نمونه 7

Column 1
Resize the browser window to see the effect.
Column 2
Column 3
Column 4
امتحان کنید

Offset کردن ستون ها

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

نمونه 8

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
امتحان کنید

فشار دادن و کشیدن (Pull and Push) – تغییر ترتیب ستون ها

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

نمونه 9

.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4
امتحان کنید
  • 1524
  •    872
  • تاریخ ارسال :   1395/10/17

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .