سیستم شبکه‌ای
محتویات
سیستم شبکه ای بوت استرپ
سیستم شبکه ای بوت استرپ امکان تقسیم صفحه به حداکثر ۱۲ ستون را فراهم می‌کند.[۱]
اگر نمی‌خواهید همه ۱۲ ستون را جداگانه استفاده کنید، می‌توانید ستون‌ها را با هم گروه‌بندی کرده تا ستون‌های عریض‌تری ایجاد شوند:
ساخت نمونه مثال این بخش در دست اقدام است.
سیستم شبکه ای بوت استرپ واکنش گرا است و ستون‌ها برحسب سایز صفحه نمایش هر دستگاهی مجدداً تنظیم می‌شوند.
کلاس های Grid (به فارسی: شبکه)
سیستم شبکه ای بوت استرپ چهار کلاس دارد:
xs(برای موبایل‌ها - صفحه نمایش‌های با عرض کمتر از ۷۶۸ پیکسل)sm(برای تبلت‌ها - صفحه نمایش‌های با عرض ۷۶۸ پیکسل یا بزرگتر)md(برای لپ تاپ‌های کوچک - صفحه نمایش‌های با عرض ۹۹۲ پیکسل یا بزرگتر)lg(برای لپ تاپ‌ها یا رایانه‌های رومیزی - صفحه نمایش‌های با عرض ۱۲۰۰ پیکسل یا بزرگتر) کلاس‌های بالا را می‌توان ترکیب کرد تا چیدمان پویاتر یا منعطف‌تری ایجاد شود
ساختار سادهٔ یک شبکه بوت استرپ
کد زیر ساختار سادهٔ یک شبکهٔ بوت استرپ را نشان می‌دهد:
1 <div class="row">
2 <div class="col-*-*"></div>
3 <div class="col-*-*"></div>
4 </div>
5 <div class="row">
6 <div class="col-*-*"></div>
7 <div class="col-*-*"></div>
8 <div class="col-*-*"></div>
9 </div>
10 <div class="row">
11 ...
12 </div>
ابتدا؛ یک ردیف ایجاد کنید (<div class="row">). سپس، تعداد مورد نظر ستون‌ها را اضافه کنید (تگ‌های با کلاس‌های .col-*-*). توجه کنید که عددها در .col-*-* برای هر ردیف همیشه باید حداکثر تا ۱۲ باشند.
در ادامه ما چند مثال ساده از چیدمان شبکهٔ بوت استرپ ذکر کرده‌ایم.
سه ستون مساوی
ساخت نمونه مثال این بخش در دست اقدام است.
مثال زیر نشان می‌دهد چگونه سه ستون با عرض مساوی داشته باشیم که با اندازه تبلت شروع و در نهایت تا اندازه رایانه‌های رومیزی بزرگ مقیاس می‌شود. در موبایل‌ها یا صفحه نمایش‌هایی که عرض کمتر از ۷۶۸ پیکسل دارند، ستون‌ها بطور خودکار مرتب می‌شوند:
مثال
1 <div class="row">
2 <div class="col-sm-4">.col-sm-4</div>
3 <div class="col-sm-4">.col-sm-4</div>
4 <div class="col-sm-4">.col-sm-4</div>
5 </div>
دو ستون برابر
ساخت نمونه مثال این بخش در دست اقدام است.
مثال زیر نشان می‌دهد چگونه دو ستون با عرض‌های متفاوت داشته باشیم که با اندازه تبلت آغاز می‌شوند و به اندازه رایانه‌های رومیزی بزرگ مقیاس می‌شوند:
مثال
1 <div class="row">
2 <div class="col-sm-4">.col-sm-4</div>
3 <div class="col-sm-8">.col-sm-8</div>
4 </div>
منابع آموزشی