داربست

به نوع doctype HTML5 نیاز دارد

بوت استرپ از عناصر خاص HTML و ویژگی های CSS استفاده می کند که نیاز به استفاده از doctype HTML5 دارند. آن را در ابتدای همه پروژه های خود قرار دهید.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

تایپوگرافی و پیوندها

بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. به طور خاص، ما:

marginبر روی بدن حذف کنید
تنظیم background-color: white;بر رویbody
از @baseFontFamily, @baseFontSizeو @baseLineHeightویژگی ها به عنوان پایه تایپوگرافی خود استفاده کنید
رنگ پیوند سراسری را از طریق تنظیم کنید @linkColorو فقط زیر خطوط پیوند را روی آن اعمال کنید:hover

این سبک ها را می توان در scaffolding.less یافت .

بازنشانی از طریق Normalize

با Bootstrap 2، بلوک بازنشانی قدیمی به نفع Normalize.css حذف شد ، پروژه ای توسط Nicolas Gallagher و Jonathan Neal که HTML5 Boilerplate را نیز تامین می کند . در حالی که ما بیشتر از Normalize در reset.less خود استفاده می کنیم، برخی از عناصر را به طور خاص برای Bootstrap حذف کرده ایم.

مثال شبکه زنده

سیستم پیش‌فرض شبکه بوت استرپ از 12 ستون استفاده می‌کند که یک ظرف پهن 940 پیکسلی را بدون فعال کردن ویژگی‌های پاسخگو ایجاد می‌کند. با افزودن فایل CSS واکنش‌گرا، بسته به نمای شما، شبکه با عرض 724 پیکسل و 1170 پیکسل سازگار می‌شود. در زیر درگاه های نمایش 767 پیکسل، ستون ها سیال می شوند و به صورت عمودی روی هم قرار می گیرند.

شبکه اصلی HTML

برای یک چیدمان دو ستونی ساده، یک را ایجاد کنید .rowو تعداد مناسب .span*ستون را اضافه کنید. از آنجایی که این یک شبکه 12 ستونی است، هر کدام .span*تعدادی از آن 12 ستون را در بر می گیرد و همیشه باید تا 12 برای هر سطر (یا تعداد ستون های والد) جمع شود.

<div class = "ردیف" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

با توجه به این مثال، ما .span4و را داریم .span8که برای کل 12 ستون و یک سطر کامل ایجاد می کنیم.

تنظیم ستون ها

.offset*با استفاده از کلاس ها، ستون ها را به سمت راست حرکت دهید . هر کلاس حاشیه سمت چپ یک ستون را با یک ستون کامل افزایش می دهد. به عنوان مثال، روی چهار ستون .offset4حرکت می کند ..span4

3 افست 2

3 افست 1

3 افست 2

6 افست 3

<div class = "ردیف" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

ستون های تودرتو

برای قرار دادن محتوای خود با شبکه پیش‌فرض، یک ستون جدید .rowو مجموعه‌ای از .span*ستون‌ها را در یک ستون موجود اضافه .span*کنید. ردیف‌های تودرتو باید شامل مجموعه‌ای از ستون‌ها باشد که به تعداد ستون‌های اصلی آن اضافه می‌شود.

ستون سطح 1

سطح 2

<div class = "ردیف" > 
  <div class = "span9" > 
    ستون سطح 1
    <div class = "ردیف" > 
      <div class = "span6" > سطح 2 </div> 
      <div class = "span3" > سطح 2 </div> 
    </div>
  </div>
</div>

مثال شبکه سیال زنده

سیستم شبکه سیال از درصد به جای پیکسل برای عرض ستون استفاده می کند. قابلیت‌های پاسخ‌گویی مشابه سیستم شبکه ثابت ما را دارد و نسبت‌های مناسب را برای وضوح‌های صفحه کلید و دستگاه‌ها تضمین می‌کند.

شبکه سیال پایه HTML

.rowهر ردیفی را با تغییر به "سیال" کنید .row-fluid. کلاس های ستون دقیقاً یکسان می مانند و چرخش بین شبکه های ثابت و سیال را آسان می کند.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

افست سیال

به همان روشی که تعدیل سیستم شبکه ثابت عمل می کند: .offset*به هر ستونی اضافه کنید تا با این تعداد ستون افست شود.

4 افست 4

3 افست 3

6 افست 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

لانه سازی سیال

شبکه های سیال از تودرتو به طور متفاوتی استفاده می کنند: هر سطح تو در تو از ستون ها باید تا 12 ستون جمع کند. این به این دلیل است که شبکه سیال برای تنظیم عرض از درصد استفاده می کند، نه پیکسل.

مایع 12

مایع 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    مایع 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        مایع 6
        <div class = "row-fluid" > 
          <div class = "span6" > سیال 6 </div> 
          <div class = "span6" > سیال 6 </div> 
        </div>
      </div>
      <div class = "span6" > سیال 6 </div> 
    </div>
  </div>
</div>

چیدمان ثابت

یک طرح مشترک با عرض ثابت (و به صورت اختیاری پاسخگو) با تنها <div class="container">مورد نیاز ارائه می دهد.

<بدن>
  <div class = "کانتینر" > 
    ...
  </div>
</body>

چیدمان سیال

یک صفحه روان و دو ستونی با <div class="container-fluid">—برای برنامه‌ها و اسناد عالی ایجاد کنید.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--محتوای نوار کناری-->
    </div>
    <div class = "span10" > 
      <!--محتوای بدنه-->
    </div>
  </div>
</div>

فعال کردن ویژگی های واکنش گرا

CSS پاسخگو را در پروژه خود با قرار دادن متا تگ مناسب و شیوه نامه اضافی در <head>سند خود روشن کنید. اگر Bootstrap را از صفحه Customize کامپایل کرده اید، فقط باید متا تگ را وارد کنید.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

سر بالا!در حال حاضر بوت استرپ به طور پیش‌فرض ویژگی‌های واکنش‌گرا را شامل نمی‌شود، زیرا لازم نیست همه چیز واکنش‌گرا باشد. به جای تشویق توسعه دهندگان به حذف این ویژگی، بهتر است آن را در صورت نیاز فعال کنیم.

درباره بوت استرپ ریسپانسیو

پرس‌و‌جوهای رسانه‌ای بر اساس تعدادی از شرایط (نسبت‌ها، عرض‌ها، نوع نمایشگر و غیره) امکان CSS سفارشی را فراهم می‌کنند، اما معمولاً بر روی min-widthو max-width.

عرض ستون را در شبکه خود تغییر دهید
عناصر را به جای شناور در هر کجا که لازم است روی هم قرار دهید
اندازه سرفصل ها و متن را تغییر دهید تا برای دستگاه ها مناسب تر باشد

از پرسش های رسانه ای مسئولانه و تنها به عنوان شروعی برای مخاطبان تلفن همراه خود استفاده کنید. برای پروژه‌های بزرگ‌تر، پایه‌های کد اختصاصی را در نظر بگیرید نه لایه‌های پرس‌و‌جوهای رسانه‌ای.

دستگاه های پشتیبانی شده

بوت استرپ از تعداد انگشت شماری درخواست های رسانه ای در یک فایل پشتیبانی می کند تا به شما کمک کند پروژه های شما را در دستگاه های مختلف و وضوح صفحه نمایش مناسب تر کنید. در اینجا چیزی است که شامل می شود:

برچسب	عرض طرح	عرض ستون	عرض ناودان
نمایشگر بزرگ	1200 پیکسل به بالا	70 پیکسل	30 پیکسل
پیش فرض	980 پیکسل به بالا	60 پیکسل	20 پیکسل
تبلت های پرتره	768 پیکسل و بالاتر	42 پیکسل	20 پیکسل
گوشی به تبلت	767 پیکسل و کمتر	ستون های سیال، بدون عرض ثابت
تلفن ها	480 پیکسل و کمتر	ستون های سیال، بدون عرض ثابت

/* رومیزی بزرگ */
@media ( حداقل عرض : 1200 پیکسل ) { ... }     
 
/* تبلت پرتره به منظره و دسکتاپ */
@media ( حداقل عرض : 768 پیکسل ) و ( حداکثر عرض : 979 پیکسل ) { ... }        
 
/* تلفن افقی تا تبلت پرتره */
@media ( حداکثر عرض : 767 پیکسل ) { ... }     
 
/* تلفن های افقی و پایین */
@media ( حداکثر عرض : 480 پیکسل ) { ... }

کلاس های ابزار پاسخگو

برای توسعه سریع‌تر سازگار با موبایل، از این کلاس‌های ابزار برای نمایش و پنهان کردن محتوا توسط دستگاه استفاده کنید. در زیر جدولی از کلاس‌های موجود و تأثیر آن‌ها بر طرح‌بندی پرس و جو رسانه‌ای (برچسب‌شده توسط دستگاه) آمده است. آنها را می توان در پیدا کرد responsive.less.

کلاس	تلفن ها767 پیکسل و کمتر	قرص979 پیکسل تا 768 پیکسل	دسکتاپ هاپیش فرض
`.visible-phone`	قابل رویت	پنهان شده است	پنهان شده است
`.visible-tablet`	پنهان شده است	قابل رویت	پنهان شده است
`.visible-desktop`	پنهان شده است	پنهان شده است	قابل رویت
`.hidden-phone`	پنهان شده است	قابل رویت	قابل رویت
`.hidden-tablet`	قابل رویت	پنهان شده است	قابل رویت
`.hidden-desktop`	قابل رویت	قابل رویت	پنهان شده است

چه موقع باید استفاده کرد

به صورت محدود استفاده کنید و از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید. در عوض، از آنها برای تکمیل نمایش هر دستگاه استفاده کنید. ابزارهای پاسخگو نباید با جداول استفاده شوند و به همین دلیل پشتیبانی نمی شوند.

مورد آزمایشی ابزارهای پاسخگو

برای آزمایش کلاس های بالا، اندازه مرورگر خود را تغییر دهید یا در دستگاه های مختلف بارگذاری کنید.

قابل مشاهده در ...

تیک سبز نشان می دهد که کلاس در نمای فعلی شما قابل مشاهده است.

تلفن✔ تلفن
تبلت✔ تبلت
دسکتاپ✔ رومیزی

پنهان شده روی ...

در اینجا، تیک سبز نشان می دهد که کلاس در نمای فعلی شما پنهان است.

تلفن✔ تلفن
تبلت✔ تبلت
دسکتاپ✔ رومیزی

تنظیمات جهانی