بوت استرپ

داربست

Bootstrap بر روی شبکه‌ها، طرح‌بندی‌ها و مؤلفه‌های 12 ستونی پاسخگو ساخته شده است.

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

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 پیکسل، ستون ها سیال می شوند و به صورت عمودی روی هم قرار می گیرند.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

شبکه اصلی HTML

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

  1. <div class = "ردیف" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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

تنظیم ستون ها

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

4
3 افست 2
3 افست 1
3 افست 2
6 افست 3 
  1. <div class = "ردیف" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

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

ستون سطح 1
سطح 2
سطح 2 
  1. <div class = "ردیف" > 
  2.   <div class = "span9" > 
  3.     ستون سطح 1
  4.     <div class = "ردیف" > 
  5.       <div class = "span6" > سطح 2 </div> 
  6.       <div class = "span3" > سطح 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

سیستم شبکه سیال

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

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

افست سیال

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

4
4 افست 4
3 افست 3
3 افست 3
6 افست 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

مایع 12
مایع 6
مایع 6
مایع 6
مایع 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     مایع 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         مایع 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > سیال 6 </div> 
  9.           <div class = "span6" > سیال 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > سیال 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

طرح بندی ها

چیدمان ثابت

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

  1. <بدن>
  2.   <div class = "کانتینر" > 
  3.     ...
  4.   </div>
  5. </body>

چیدمان سیال

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--محتوای نوار کناری-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--محتوای بدنه-->
  8.     </div>
  9.   </div>
  10. </div>

طراحی تعاملی

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

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

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <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 پیکسل و کمتر ستون های سیال، بدون عرض ثابت 
  1. /* رومیزی بزرگ */
  2. @media ( حداقل عرض : 1200 پیکسل ) { ... }     
  3.  
  4. /* تبلت پرتره به منظره و دسکتاپ */
  5. @media ( حداقل عرض : 768 پیکسل ) و ( حداکثر عرض : 979 پیکسل ) { ... }        
  6.  
  7. /* تلفن افقی تا تبلت پرتره */
  8. @media ( حداکثر عرض : 767 پیکسل ) { ... }     
  9.  
  10. /* تلفن های افقی و پایین */
  11. @media ( حداکثر عرض : 480 پیکسل ) { ... }

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

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

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

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

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

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

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

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

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

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

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

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

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