آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

رویکرد

راه اندازی مجدد بر روی Normalize ایجاد می شود، و بسیاری از عناصر HTML را با سبک های قاطعانه و تنها با استفاده از selector ها انتخاب می کند. یک ظاهر جانبی اضافی فقط با کلاس ها انجام می شود. برای مثال، ما برخی از سبک های <table> را برای یک خط پایه ساده تر راه اندازی می کنیم و بعدها table، .table-bordered.، و ... را ارائه می دهیم.
در اینجا دستورالعمل ها و دلایل ما برای انتخاب آنچه در Reboot جایگزین می شود، هستند:

1-به روز رسانی مقادیر پیش فرض مرورگر برای استفاده از درخواست به جای ems برای محاسبه اجزای مقیاس پذیر.

2-برای مقیاس بندی ساده تر در اندازه های دستگاه، عناصر بلوک باید از حاشیه ها استفاده کنند.

3-اعلامیه های مربوط به ویژگی های مربوط به فونت را تا حد امکان کم کنید، با استفاده از هرکدام که ممکن است به ارث برده باشید.

 

پیش فرض های صفحه 

به طور خاص عناصر <html> و <body> برای بهینه سازی پیش فرض صفحه گسترده به روز می شوند.

1-جعبه اندازه بر روی هر عنصر از جملهbefore:: ::* وafter:: ::* از، به جعبه مرزی تنظیم شده است. این تضمین می کند که عرض اعلام شده عنصر به علت مرز موجود هرگز از بین نرفته است.

هیچ فونت اندازه پایه در <html> اعلام نشده است، اما فرض می شود که 16px باشد. font-size: 1rem در تگ <body> برای مقیاس تطبیق پذیری آسان از طریق نمایش اطلاعات رسانه ای اعمال می شود، در حالی که احترام به ترجیحات کاربر و اطمینان از یک رویکرد قابل دسترس بیشتر است.

2-<body> یک فونت خانوادگی، خط ارتفاع و متن را نیز تنظیم می کند. این بعد بعضی از عناصر فرم به ارث برده می شود تا از عدم تناسب فونت ها جلوگیری شود.

3-برای ایمنی، <body> به طور پیش فرض به #fff دارای پس زمینه است.

 

Native font stack

در Bootstrap 4 «پشته فونت بومی» برای تفسیر متن بهینه در هر دستگاه و سیستم عامل را جایگزین می کنیم. بیشتر بخوانید درباره ی native font stacks in this Smashing Magazine article.

 

 $font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

 

این فونت-خانواده به <body> اعمال می شود و به طور خودکار در سراسر بوت استرپ به طور مرتب به ارث برده می شود. برای تغییر فونت خانواده، به روز رسانی font-family-base$ و recompile بوت استرپ.

 

عنوان ها و پاراگراف ها 

تمام عناصر عنوان مثال <h1> و <p> تنظیم مجدد می شوند تا حاشیه بالا آنها حذف شود.

 

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

 

لیست ها

تمام لیست ها <ul>، <ol> و <dl> حاوی حاشیه بالا و حاشیه پایین هستند: 1rem. فهرست موجود در ليست بدون حاشیه پایین:

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

 

برای نمایش ساده تر، سلسله مراتب روشن و فاصله بهتر، لیست های فهرست حاشیه ها را به روز کنید. dd> s> بازنشانی حاشیه سمت چپ به 0 و اضافه کردن حاشیه پایین: .5rem. <dt> s bolded هستند

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

 

متن از پیش فرمت شده 

عنصر <pre> برای حذف حاشیه بالا و استفاده از واحد های rem برای حاشیه پایین بازنشانی می شود.

 

جدول ها

جداول کمی نسبت به سبک <caption> s تنظیم شده اند، مرزها سقوط می کنند و اطمینان از هماهنگی در متن متناسب با یکدیگر دارند. تغییرات اضافی برای مرزها، padding ها و... با کلاس table..

 

Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

 

فرم ها

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

1-<fieldset> هیچ حاشیه ای، ندارند، به طوری که آنها می توانند به راحتی به عنوان پلاگین برای ورودی های فردی یا گروه های ورودی استفاده شوند.

2-<legend>، مانند fieldsets، همچنین به عنوان یک عنوان از نوع نمایش داده شده است.

3-label> s> برای نشان دادن: inline-block برای اجازه دادن به حاشیه استفاده می شود.

4-input> s، <select> s، <textarea> s، و <button> s> عمدتا توسط Normalize مورد خطاب قرار می گیرند، اما Reboot حاشیه آنها را حذف می کند و خط ارتفاع را نیز مرتب می کند.

5-textarea> s> اصلاح شده اند که می توانند به صورت عمودی قابل اندازه گیری مجدد باشند زیرا تغییر اندازه افقی اغلب "طرح" صفحه را "شکسته" می کند.

این تغییرات و بیشتر در زیر نشان داده شده است.

Example legend

 

 

 

 

 

 

 100

  

  

 

آدرس ها

عنصر <address> برای بازنشانی فونت سبک پیش فرض مرورگر از کلاسیک به حالت عادی به روز می شود. خط ارتفاع نیز اکنون به ارث برده شده و حاشیه پایین: 1rem اضافه شده است. <آدرس> برای نشان دادن اطلاعات تماس برای نزدیکترین اجداد است. فرمت بندی را با پایان دادن به خطوط با <br> حفظ کنید.

 

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

 

مسابقه

حاشیه پیش فرض 1 در blockquotes عدد 40 پیکسل است، بنابراین برای تنظیم چیزی که بیشتر با سایر عناصر سازگار است، 0 0 1rem را بازنشانی می کنیم.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

 

عناصر درونی 

عنصر <abbr> یک ظاهر پایه را دریافت می کند تا آن را در میان متن پاراگراف قرار دهد.

Nulla attr vitae elit libero, a pharetra augue.

 

خلاصه 

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

 

ویژگی های HTML5 مخفی

HTML5 یک ویژگی جهانی جدید به نام [پنهان] اضافه می کند، که به صورت صفحه نمایش داده می شود: هیچ پیش فرضی نیست. با در نظر گرفتن یک ایده از PureCSS، ما با پیشی گرفتن از پیش فرض با ساختن { hidden] {display: none! important ] برای کمک به جلوگیری ازتصادف بودن صفحه نمایش خود است. در حالی که [پنهان] بومی توسط IE10 پشتیبانی نمی شود، اعلامیه صریح در CSS ما در مورد این مشکل حل می شود.

 

 <input type="text" hidden>

 

برای فقط مشاهده یک عنصر را تغییر دهید، به این معنا که صفحه نمایش آن اصلاح نشده و عنصر هنوز می تواند جریان سند را تحت تاثیر قرار دهد، به جای آن از کلاس invisible استفاده کنید.