%45 تخفیف، با کد GhorbanTaGhadir روی تمام آموزش ها، بمناسبت عید قربان و غدیر
زمان باقی مانده (آخرین فرصت)
سبد (0)

تبلیغات

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

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

Wiki

سیستم شبکه بندی بوت استرپ اجازه ی استفاده از حداکثر 12 ستون را در صفحه به ما می دهد.

در صورتی که نمی خواهید از تمام 12 ستون به طور جداگانه استفاده کنید، می توانید ستون ها را با یکدیگر ادغام کنید تا گسترده تر شوند. 

سیستم شبکه بندی بوتسترپ، واکنش گرا(responsive) می باشد , و ستون ها به طور اتوماتیک بر اساس اندازه ی صفحه ی نمایش، تنظیم خواهند شد.

Note

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


کلاس های شبکه بندی

Wiki

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

  • کلاس xs(برای موبایل ها)
  • کلاس sm( برای تبلت ها)
  • کلاس md(برای رایانه های رومیزی)
  • کلاس lg(برای رایانه های بزرگتر)

کلاس های بالا می توانند با یکدیگر ترکیب شوند. بنابراین به وسیله ی آنها می توان طرح های داینامیک و قابل انعطاف را ایجاد کرد.

نکته:  کلاس های بوت استرپ قابلیت پوشش دادن یکدیگر را دارند. بعنوان مثال اگر می خواهید برای موبایل ها(کلاس xs) و تبلت ها(کلاس sm) یک عرض یکسان را ایجاد کنید، تنها لازم است که آن را برای موبایل ها(کلاس xs) تنظیم کنید. با انجام این کار، تبلت ها نیز پوشش داده خواهند شد. 


قواعد سیستم شبکه بندی

Wiki

برخی قواعد سیستم شبکه بندی بوت استرپ:

  • ردیف ها (row) برای هم ترازی و padding مناسب باید در داخل یک کلاس container.(عرض ثابت) یا کلاس container-fluid.(عرض کامل) قرار بگیرند.
  • شما می توانید یک ردیف را به چند ستون تقسیم کنید. 
  • سپس باید محتوای خود را در داخل ستون های ایجاد شده در ردیف مورد نظر قرار دهید. به این نکته توجه کنید که تنها ستون ها می توانند فرزند ردیف ها باشند. 
  • ستون های شبکه بندی قابل گسترش هستن.  بعنوان مثال برای ایجاد سه ستون مساوی می توانید از سه کلاس col-sm-4. استفاده کنید.

ساختار پایه شبکه  بندی بوتسترپ

Wiki

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

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

بنابراین برای ایجاد هر طرح بندی، یک (container) ایجاد کنید،  سپس یک ردیف(row) را ایجاد کنید. آنگاه به تعداد دلخواه ستون ایجاد کنید(با استفاده ازتگ ها با کلاس .col-*-*)،  توجه داشته باشید که جمع مقادیر کلاس های  col  در هر ردیف باید برابر با 12 باشد. 


گزینه های شبکه بندی

Wiki

جدول زیر به طور خلاصه نشان می دهد که چطور سیستم شبکه بندی بوت استرپ برای وسایل مختلف کار می کند:

  وسایل بسیار کوچک
موبایل ها (<768px)
وسایل کوچک
تبلت ها (>=768px)
وسایل متوسط
رایانه های رومیزی (>=992px)
وسایل بزرگ
رایانه های رومیزی (>=1200px)
رفتار شبکه بندی همواره عمودی می باشد

در صورت بزرگ بودن صفحه نمایش ستون ها افقی اند و 

در غیر این صورت ستون ها عمودی خواهند بود.

در صورت بزرگ بودن صفحه ی نمایش ستون ها افقی اند و

در غیر این صورت ستون ها عمودی خواهند بود.

در صورت بزرگ بودن صفحه ی نمایش ستون ها افقی اند و 

در غیر این صورت ستون ها عمودی خواهند بود.

عرض ظرف هیچ (auto) 750px 970px 1170px
پیشوند کلاس .col-xs- .col-sm- .col-md- .col-lg-
تعداد ستون ها 12 12 12 12
عرض ستون Auto ~62px ~81px ~97px
عرض شکاف 30px(در هر طرف از ستون 15px) 30px(در هر طرف از ستون 15px) 30px(در هر طرف از ستون 15px) 30px(در هر طرف از ستون 15px)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
مرتب شدن ستون ها  Yes Yes Yes Yes

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

در فصل بعد، مثال هایی در مورد سیستم شبکه بندی برای دستگاه های مختلف وجود دارند:

دیدگاه‌ها  

0 # Guest 1398-05-25 21:40
سلام
چطوری یک دکمه را داخل یک TextBox قرار بدم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1398-05-26 09:03
سلام
<input type="text" />
<button>si</button>



input[type="text"]
{
width:200px;
height:40px;
}

button
{
position:absolu te;
left:165px;
top:10px;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # فروزان موسوی نژاد 1398-04-02 18:22
مثلا میخوام یه تگ رو با bootstrap با همین بحث گرید ها تو سایتم بذارم نمیتونم!!! مثلا یه تگ p رو میخوام با عرض 95٪ زیر نوار منوم بذارم باید چیکار کنم ضمنا باید این تگ p وسط باشه و محتویات خود p هم وسط چین باشه
ممنون میشم کمک کنین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1398-04-02 23:19
سلام، برای شما یک مثال در آدرس زیر ایجاد کردیم. که در اون ابتدا یک منوی ساده با بوت استرپ ساخته شده و سپس یک row یا ردیف ایجاد شده است و در داخل اون یک پاراگراف ایجاد کرده ایم. برای این پاراگراف یک id ایجاد کردیم و متنی را بین این پاراگراف قرار دادیم. و با ستفاده از ویژگی text-align متن داخل پاراگراف را در خود پاراگراف وسط چین کردیم و سپس برای اینکه پاراگراف در داخل row وسط چین شود، از دستورات margin-left:aut o و margin-right:au to استفاده کردیم. همچنین با استفاده از دستور width، عرض پاراگراف را برابر با 95 درصد قرار دادیم. لازم به ذکر است که row ما در داخل یک div با کلاس container-flow قرار دارد که باعث می شود تمام عرض صفحه اشغال شود. موفق باشید.
codepen.io/sbaloot/pen/xodPEQ?editors=1100
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # فروزان موسوی نژاد 1398-04-03 10:05
سلام خیلی ممنونم
فقط یه سوال دارم اینکه مگه نباید از کلاس بندی های گرید هم استفاده کرد؟ ینی فرزندان row مگه نباید حتما از کلاسای گرید استقاده کنن؟ اما اینجا شما استفاده نکردیین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1398-04-03 11:21
سلام. شما فرمودید که عرض پاراگراف باید 95 درصد باشه. و به این خاطر بنده از کلاس های شبکه بندی استفاده نکردم. اما شما می تونید مثلا row مورد نظر رو به سه قسمت تقسیم کنید(با استفاده از شبکه بندی) بعدش پاراگراف خودتون رو در قسمت وسط قرار بدهید و بخش های سمت راست و چپ رو با css به رنگ سفید یا پس زمینه در بیارید. بزرگی قسمت ها به خودتون بستگی داره، به مثال زیر توجه کنید:
codepen.io/sbaloot/pen/pXPqBX?editors=1100
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # فروزان موسوی نژاد 1398-04-02 18:15
سلام خسته نباشید من اصلا نمیتونم با grid ها کار کنم توی پروژه واقعی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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