راه اندازی مجدد

راه‌اندازی مجدد، مجموعه‌ای از تغییرات CSS خاص عنصر در یک فایل واحد، راه‌اندازی بوت استرپ را شروع می‌کند تا پایه‌ای زیبا، منسجم و ساده برای ایجاد بر اساس آن ارائه دهد.

رویکرد

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

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

برخی از مقادیر پیش فرض مرورگر را برای استفاده از rems به جای ems برای فاصله گذاری اجزای مقیاس پذیر به روز کنید.
اجتناب کنید margin-top. حاشیه های عمودی می توانند فرو بریزند و نتایج غیرمنتظره ای به همراه داشته باشند. مهمتر از همه، یک جهت واحد از marginیک مدل ذهنی ساده تر است.
برای مقیاس‌بندی آسان‌تر در اندازه‌های دستگاه، عناصر بلوک باید از rems برای margins استفاده کنند.
اعلامیه‌های fontمربوط به ویژگی‌های مرتبط را به حداقل برسانید و در inheritصورت امکان از آن استفاده کنید.

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

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

به box-sizingصورت سراسری بر روی هر عنصر تنظیم شده است - از جمله *::beforeو *::afterبه border-box. این تضمین می کند که از عرض اعلام شده عنصر به دلیل لایه بندی یا حاشیه هرگز تجاوز نمی کند.
- هیچ پایه font-sizeای در اعلان نشده است <html>، اما 16pxفرض می شود (پیش فرض مرورگر). برای مقیاس‌بندی آسان نوع پاسخگو از طریق پرسش‌های رسانه‌ای در حالی که به ترجیحات کاربر احترام می‌گذارد و رویکردی در دسترس‌تر را تضمین font-size: 1remمی‌کند، روی آن اعمال می‌شود .<body>
همچنین <body>یک جهانی font-family، line-heightو و را تنظیم text-alignمی کند. این بعداً توسط برخی از عناصر فرم به ارث می رسد تا از تناقضات فونت جلوگیری شود.
برای ایمنی، <body>دارای یک اعلان background-colorشده، پیش فرض به #fff.

پشته فونت بومی

فونت‌های وب پیش‌فرض (Helvetica Neue، Helvetica و Arial) در Bootstrap 4 حذف شده‌اند و با یک «پشته فونت بومی» برای ارائه متن بهینه در هر دستگاه و سیستم‌عامل جایگزین شده‌اند. در این مقاله مجله Smashing درباره پشته های فونت بومی بیشتر بخوانید .

$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;

این font-familyبه <body>طور خودکار در سراسر Bootstrap به ارث می رسد. برای تغییر حالت جهانی ، Bootstrap را font-familyبه‌روزرسانی و دوباره کامپایل کنید.$font-family-base

سرفصل ها و پاراگراف ها

همه عناصر عنوان - به عنوان مثال، <h1>- و بازنشانی <p>می شوند تا margin-topحذف شوند. سرفصل ها margin-bottom: .5remو پاراگراف margin-bottom: 1remهایی برای فاصله گذاری آسان اضافه شده است.

سرفصل	مثال
`<h1></h1>`	h1. عنوان بوت استرپ
`<h2></h2>`	h2. عنوان بوت استرپ
`<h3></h3>`	h3. عنوان بوت استرپ
`<h4></h4>`	h4. عنوان بوت استرپ
`<h5></h5>`	h5. عنوان بوت استرپ
`<h6></h6>`	h6. عنوان بوت استرپ

لیست ها

همه لیست ها- <ul>،، <ol>و <dl>- margin-topحذف شده اند و یک margin-bottom: 1rem. لیست های تودرتو هیچ margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- زخم های پوروس سودال
- Sem porttitor وستیبولوم laoreet
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

برای استایل ساده تر، سلسله مراتب واضح و فاصله بهتر، لیست های توضیحات margins را به روز کرده اند. <dd>را بازنشانی margin-leftکنید 0و اضافه کنید margin-bottom: .5rem. <dt>s پررنگ هستند .

لیست های توضیحات: لیست توضیحات برای تعریف اصطلاحات عالی است.
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>برای حذف آن margin-topو استفاده از remواحدها برای آن بازنشانی می margin-bottomشود.

.example-element {
  حاشیه-پایین: 1rem;
}

جداول

جدول‌ها کمی برای استایل <caption>s تنظیم می‌شوند، حاشیه‌ها جمع می‌شوند و از ثابت بودن text-alignدر سرتاسر اطمینان می‌دهند. تغییرات اضافی برای حاشیه‌ها، بالشتک‌ها و موارد دیگر با کلاس .tableارائه می‌شود .

این یک جدول نمونه است و این عنوان آن برای توصیف مطالب است.
عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول

تشکیل می دهد

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

<fieldset>هیچ حاشیه، بالشتک یا حاشیه ای ندارند، بنابراین می توان آنها را به راحتی به عنوان بسته بندی برای ورودی های فردی یا گروهی از ورودی ها استفاده کرد.
<legend>s، مانند مجموعه‌های فیلد، نیز برای نمایش به عنوان سرفصل مجدداً طراحی شده‌اند.
<label>s تنظیم شده اند display: inline-blockتا اجازه marginاعمال شود.
<input>s، <select>s، <textarea>s و <button>s عمدتاً توسط Normalize خطاب می شوند، اما Reboot آنها را نیز حذف می کند marginو تنظیم line-height: inheritمی کند.
<textarea>s تغییر اندازه داده می شود تا فقط به صورت عمودی قابل تغییر باشد زیرا تغییر اندازه افقی اغلب طرح بندی صفحه را "شکست می دهد".

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

عناصر متفرقه

نشانی

این <address>عنصر برای بازنشانی پیش فرض مرورگر font-styleاز italicبه همچنین اکنون به ارث رسیده و اضافه شده است. s برای ارائه اطلاعات تماس نزدیکترین اجداد (یا کل مجموعه کار) است. حفظ قالب بندی با پایان دادن به خطوط با .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

نام کامل
[email protected]

مسابقه

پیش فرض marginدر blockquotes است 1em 40px، بنابراین ما آن را 0 0 1remبرای چیزی سازگارتر با عناصر دیگر تنظیم می کنیم.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.

شخصی معروف در عنوان منبع

عناصر درون خطی

این <abbr>عنصر یک ظاهر طراحی اولیه را دریافت می کند تا در میان متن پاراگراف برجسته شود.

Nulla attr vitae elit libero، یک pharetra augue.

خلاصه

پیش‌فرض cursorخلاصه‌ای است text، بنابراین ما آن را به تنظیم مجدد می‌کنیم تا pointerنشان دهیم که می‌توان با کلیک روی آن عنصر با آن تعامل داشت.

برخی جزئیات

اطلاعات بیشتر در مورد جزئیات

حتی جزئیات بیشتر

در اینجا جزئیات بیشتری در مورد جزئیات وجود دارد.

`[hidden]`ویژگی HTML5

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

<input type="text" hidden>

ناسازگاری جی کوئری

[hidden]$(...).hide()با jQuery و $(...).show()متدها سازگار نیست . بنابراین، ما در حال حاضر به‌ویژه [hidden]تکنیک‌های دیگر را برای مدیریت displayعناصر تأیید نمی‌کنیم.

برای اینکه صرفاً نمایان بودن یک عنصر را displayتغییر دهید، به این معنی که تغییری در آن وجود ندارد و عنصر همچنان می تواند بر جریان سند تأثیر بگذارد، به جای آن از .invisibleکلاس استفاده کنید.