بوت استرپ

داربست

Bootstrap بر روی یک شبکه 12 ستونی پاسخگو ساخته شده است. ما همچنین طرح‌بندی‌هایی با عرض ثابت و سیال را بر اساس آن سیستم قرار داده‌ایم.

سبک های جهانی برای بازنشانی CSS، تایپوگرافی و پیوندها

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

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

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

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

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

از Bootstrap 2، بازنشانی سنتی CSS برای استفاده از عناصر Normalize.css تکامل یافته است ، پروژه ای توسط Nicolas Gallagher که HTML5 Boilerplate را نیز تامین می کند .

بازنشانی جدید همچنان در reset.less یافت می شود ، اما بسیاری از عناصر برای اختصار و دقت حذف شده اند.

سیستم شبکه پیش فرض 12 ستون با پیچ و تاب پاسخگو

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

سیستم شبکه پیش‌فرض ارائه شده به عنوان بخشی از Bootstrap، یک شبکه ۱۲ ستونی با عرض ۹۴۰ پیکسل است .

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

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

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


تنظیم ستون ها

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

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

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

مثال

ردیف‌های تودرتو باید شامل مجموعه‌ای از ستون‌ها باشد که به تعداد ستون‌های اصلی آن اضافه می‌شود. به عنوان مثال، دو .span3ستون تو در تو باید در یک قرار داده شوند .span6.

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

سیستم شبکه سیال 12 ستون پاسخگو و مبتنی بر درصد

ستون های سیال

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

درصد، نه پیکسل

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

ردیف های سیال

هر ردیفی را به سادگی با تغییر .rowبه سیال بسازید .row-fluid. ستون‌ها دقیقاً یکسان می‌مانند و چرخش بین طرح‌بندی ثابت و سیال را بسیار ساده می‌کنند.

نشانه گذاری

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

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

تودرتو با شبکه های سیال کمی متفاوت است: نیازی نیست تعداد ستون های تودرتو با والد مطابقت داشته باشد. در عوض، ستون‌های شما در هر سطح بازنشانی می‌شوند، زیرا هر ردیف 100٪ از ستون اصلی را اشغال می‌کند.

مایع 12
مایع 6
مایع 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     سطح 1 ستون
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > سطح 2 </div> 
  6.       <div class = "span6" > سطح 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

سفارشی سازی شبکه

متغیر مقدار پیش فرض شرح
@gridColumns 12 تعداد ستون ها
@gridColumnWidth 60 پیکسل عرض هر ستون
@gridGutterWidth 20 پیکسل فضای منفی بین ستون ها

متغیرها در LESS

تعبیه شده در بوت استرپ تعداد انگشت شماری از متغیرها برای سفارشی سازی سیستم شبکه پیش فرض 940px است که در بالا مستند شده است. همه متغیرهای شبکه در متغیرهای.less ذخیره می‌شوند.

نحوه سفارشی سازی

اصلاح گرید به معنای تغییر سه @grid*متغیر و کامپایل مجدد Bootstrap است. متغیرهای گرید را در variables.less تغییر دهید و از یکی از چهار روش مستند شده برای کامپایل مجدد استفاده کنید . اگر ستون‌های بیشتری اضافه می‌کنید، حتماً CSS را برای کسانی که در grid.less هستند اضافه کنید.

پاسخگو ماندن

سفارشی‌سازی شبکه فقط در سطح پیش‌فرض، شبکه ۹۴۰ پیکسلی کار می‌کند. برای حفظ جنبه‌های پاسخ‌گوی Bootstrap، همچنین باید شبکه‌ها را در responsive.less سفارشی کنید.

Layouts الگوهای اساسی برای ایجاد صفحات وب

چیدمان ثابت

طرح‌بندی پیش‌فرض و ساده با پهنای 940 پیکسل، تقریباً برای هر وب‌سایت یا صفحه‌ای که توسط یک صفحه ارائه می‌شود <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 سفارشی را فراهم می‌کنند، اما معمولاً بر روی min-widthو max-width.

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

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

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

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

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

به متا تگ نیاز دارد

برای اطمینان از اینکه دستگاه‌ها صفحات واکنش‌گرا را به درستی نشان می‌دهند، متا تگ Viewport را نیز اضافه کنید.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

با استفاده از پرسش های رسانه ای

بوت استرپ به طور خودکار این پرسش‌های رسانه‌ای را شامل نمی‌شود، اما درک و افزودن آنها بسیار آسان است و به حداقل تنظیمات نیاز دارد. شما چند گزینه برای گنجاندن ویژگی های واکنش گرا Bootstrap دارید:

  1. از نسخه پاسخگوی کامپایل شده، bootstrap-responsive.css استفاده کنید
  2. @import "responsive.less" را اضافه کنید و Bootstrap را دوباره کامپایل کنید
  3. responsive.less را به عنوان یک فایل جداگانه تغییر دهید و دوباره کامپایل کنید

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

  1.   // تلفن های افقی و پایین
  2.   @media ( حداکثر عرض : 480 پیکسل ) { ... }     
  3.  
  4.   // تلفن افقی به تبلت پرتره
  5.   @media ( حداکثر عرض : 767 پیکسل ) { ... }     
  6.  
  7.   // تبلت پرتره به منظره و دسکتاپ
  8.   @media ( حداقل عرض : 768 پیکسل ) و ( حداکثر عرض : 979 پیکسل ) { ... }        
  9.  
  10.   // دسکتاپ بزرگ
  11.   @media ( حداقل عرض : 1200 پیکسل ) { ... }

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

آنها چه هستند

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

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

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

برای مثال، ممکن است <select>عنصری را برای ناوبری در طرح‌بندی‌های تلفن همراه نشان دهید، اما نه در رایانه‌های لوحی یا رایانه‌های رومیزی.

کلاس های پشتیبانی

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

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

مورد آزمایشی

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

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

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

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

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

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

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