راه اندازی مجدد
راهاندازی مجدد، مجموعهای از تغییرات CSS خاص عنصر در یک فایل واحد، راهاندازی بوت استرپ را شروع میکند تا پایهای زیبا، منسجم و ساده برای ایجاد بر اساس آن ارائه دهد.
رویکرد
راهاندازی مجدد بر اساس Normalize ساخته میشود، و بسیاری از عناصر HTML را با سبکهای تا حدودی با استفاده از انتخابگرهای عنصر ارائه میکند. یک ظاهر طراحی اضافی فقط با کلاس ها انجام می شود. برای مثال، ما برخی از <table>
سبکها را برای یک خط پایه سادهتر راهاندازی مجدد میکنیم و بعداً .table
، .table-bordered
و موارد دیگر را ارائه میکنیم.
در اینجا دستورالعملها و دلایل ما برای انتخاب مواردی که در راهاندازی مجدد باید نادیده گرفته شود، آمده است:
- برخی از مقادیر پیش فرض مرورگر را برای استفاده از
rem
s به جایem
s برای فاصله گذاری اجزای مقیاس پذیر به روز کنید. - اجتناب کنید
margin-top
. حاشیه های عمودی می توانند فرو بریزند و نتایج غیرمنتظره ای به همراه داشته باشند. مهمتر از همه، یک جهت واحد ازmargin
یک مدل ذهنی ساده تر است. - برای مقیاسبندی آسانتر در اندازههای دستگاه، عناصر بلوک باید از
rem
s برایmargin
s استفاده کنند. - اعلامیههای
font
مربوط به ویژگیهای مرتبط را به حداقل برسانید و درinherit
صورت امکان از آن استفاده کنید.
متغیرهای CSS
اضافه شده در نسخه 5.1.1
با نسخه 5.1.1، ما @import
s های مورد نیاز خود را در تمام بسته های CSS خود استاندارد کردیم (از جمله bootstrap.css
، bootstrap-reboot.css
و bootstrap-grid.css
شامل _root.scss
. این :root
متغیرهای سطح CSS را به همه بسته ها اضافه می کند، صرف نظر از اینکه چه تعداد از آنها در آن بسته استفاده می شود. در نهایت Bootstrap 5 به متغیرهای CSS بیشتری را ببینید که در طول زمان اضافه شده است.
پیش فرض های صفحه
عناصر <html>
و <body>
برای ارائه پیشفرضهای بهتر در سراسر صفحه بهروزرسانی میشوند. به طور خاص:
- به
box-sizing
صورت سراسری بر روی هر عنصر تنظیم شده است - از جمله*::before
و*::after
بهborder-box
. این تضمین می کند که از عرض اعلام شده عنصر به دلیل لایه بندی یا حاشیه هرگز تجاوز نمی کند.- هیچ پایه
font-size
ای در اعلان نشده است<html>
، اما16px
فرض می شود (پیش فرض مرورگر). برای مقیاسبندی آسان نوع پاسخگو از طریق پرسشهای رسانهای در حالی که به ترجیحات کاربر احترام میگذارد و رویکردی در دسترستر را تضمینfont-size: 1rem
میکند، روی آن اعمال میشود .<body>
این پیش فرض مرورگر را می توان با تغییر$font-size-root
متغیر لغو کرد.
- هیچ پایه
- همچنین
<body>
یک جهانی،،،font-family
وfont-weight
راline-height
تنظیمcolor
می کند. این بعداً توسط برخی از عناصر فرم به ارث می رسد تا از تناقضات فونت جلوگیری شود. - برای ایمنی،
<body>
دارای یک اعلانbackground-color
شده، پیش فرض به#fff
.
پشته فونت بومی
Bootstrap از یک "پشته فونت بومی" یا "پشته قلم سیستم" برای رندر متن بهینه در هر دستگاه و سیستم عامل استفاده می کند. این فونتهای سیستمی بهطور خاص با در نظر گرفتن دستگاههای امروزی طراحی شدهاند، با رندر بهتر روی صفحهنمایش، پشتیبانی از فونت متغیر و موارد دیگر. در این مقاله مجله Smashing درباره پشته های فونت بومی بیشتر بخوانید .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
توجه داشته باشید که از آنجایی که پشته فونت شامل فونتهای ایموجی است، بسیاری از کاراکترهای رایج نماد/دینگبات یونیکد بهعنوان تصویر نگارههای چند رنگ ارائه میشوند. ظاهر آنها بسته به سبک استفاده شده در فونت ایموجی بومی مرورگر/پلتفرم متفاوت خواهد بود، و تحت تاثیر هیچ color
سبک CSS قرار نخواهند گرفت.
این font-family
به <body>
طور خودکار در سراسر Bootstrap به ارث می رسد. برای تغییر حالت جهانی ، Bootstrap را font-family
بهروزرسانی و دوباره کامپایل کنید.$font-family-base
متغیرهای CSS
همانطور که Bootstrap 5 به رشد خود ادامه می دهد، سبک های بیشتری با متغیرهای CSS به عنوان وسیله ای برای ارائه سفارشی سازی بیشتر در زمان واقعی بدون نیاز به کامپایل مجدد Sass ساخته می شوند. رویکرد ما این است که متغیرهای Sass منبع خود را گرفته و آنها را به متغیرهای CSS تبدیل کنیم. به این ترتیب، حتی اگر از متغیرهای CSS استفاده نکنید، باز هم تمام قدرت Sass را دارید. این هنوز در حال انجام است و اجرای کامل آن زمان می برد.
به عنوان مثال، این :root
متغیرهای CSS را برای <body>
سبک های رایج در نظر بگیرید:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
در عمل، آن متغیرها در راه اندازی مجدد به صورت زیر اعمال می شوند:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
که به شما امکان می دهد هر طور که دوست دارید سفارشی سازی های بلادرنگ انجام دهید:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
سرفصل ها و پاراگراف ها
همه عناصر عنوان - به عنوان مثال، <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
. ما همچنین padding-left
روشن <ul>
و <ol>
عناصر را بازنشانی کرده ایم.
- همه لیست ها حاشیه بالایی خود را حذف می کنند
- و حاشیه پایین آنها عادی شد
- لیست های تودرتو حاشیه پایینی ندارند
- به این ترتیب ظاهر یکدست تری دارند
- به خصوص هنگامی که با موارد بیشتری از لیست دنبال می شود
- بالشتک سمت چپ نیز تنظیم مجدد شده است
- در اینجا یک لیست سفارش داده شده است
- با چند مورد لیست
- ظاهر کلی یکسانی دارد
- مانند لیست نامرتب قبلی
برای استایل ساده تر، سلسله مراتب واضح و فاصله بهتر، لیست های توضیحات margin
s را به روز کرده اند. <dd>
را بازنشانی margin-left
کنید 0
و اضافه کنید margin-bottom: .5rem
. <dt>
s پررنگ هستند .
- لیست های توضیحات
- لیست توضیحات برای تعریف اصطلاحات عالی است.
- مدت، اصطلاح
- تعریف اصطلاح.
- تعریف دوم برای همان اصطلاح.
- یک اصطلاح دیگر
- تعریف این اصطلاح دیگر.
کد درون خطی
قطعات درون خطی کد را با <code>
. مطمئن شوید که از براکت های زاویه HTML فرار کنید.
<section>
باید به صورت خطی پیچیده شود.
For example, <code><section></code> should be wrapped as inline.
بلوک های کد
از <pre>
s برای چندین خط کد استفاده کنید. یک بار دیگر، برای رندر مناسب، مطمئن شوید که از هر زاویه ای در کد فرار کنید. عنصر <pre>
برای حذف آن margin-top
و استفاده از rem
واحدها برای آن بازنشانی می margin-bottom
شود.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
متغیرها
برای نشان دادن متغیرها از <var>
تگ استفاده کنید.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ورودی کاربر
برای <kbd>
نشان دادن ورودی هایی که معمولاً از طریق صفحه کلید وارد می شوند از علامت استفاده کنید.
برای ویرایش تنظیمات، فشار دهید ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
خروجی نمونه
برای نشان دادن نمونه خروجی از یک برنامه از <samp>
تگ استفاده کنید.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
جداول
جدولها کمی برای استایل <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 تغییر اندازه داده می شود تا فقط به صورت عمودی قابل تغییر باشد زیرا تغییر اندازه افقی اغلب طرح بندی صفحه را "شکست می دهد".<button>
عناصر s و<input>
دکمه دارایcursor: pointer
وقتی:not(:disabled)
هستند.
این تغییرات و موارد دیگر در زیر نشان داده شده است.
پشتیبانی از ورودی تاریخ و رنگ
به خاطر داشته باشید که ورودی های تاریخ به طور کامل توسط همه مرورگرها، یعنی Safari، پشتیبانی نمی شوند.
اشاره گر روی دکمه ها
راه اندازی مجدد شامل بهبودی برای role="button"
تغییر مکان نما پیش فرض به pointer
. برای کمک به نشان دادن تعاملی بودن عناصر، این ویژگی را به عناصر اضافه کنید. این نقش برای <button>
عناصری که تغییرات خاص خود را دارند لازم نیست cursor
.
<span role="button" tabindex="0">Non-button element button</span>
عناصر متفرقه
نشانی
این <address>
عنصر برای بازنشانی پیش فرض مرورگر font-style
از italic
به همچنین اکنون به ارث رسیده و اضافه شده است. s برای ارائه اطلاعات تماس نزدیکترین اجداد (یا کل مجموعه کار) است. حفظ قالب بندی با پایان دادن به خطوط با .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 نام کامل
[email protected]
مسابقه
پیش فرض margin
در blockquotes است 1em 40px
، بنابراین ما آن را 0 0 1rem
برای چیزی سازگارتر با عناصر دیگر تنظیم می کنیم.
یک نقل قول شناخته شده، موجود در یک عنصر blockquote.
شخصی معروف در عنوان منبع
عناصر درون خطی
این <abbr>
عنصر یک ظاهر طراحی اولیه را دریافت می کند تا در میان متن پاراگراف برجسته شود.
خلاصه
پیشفرض cursor
خلاصهای است text
، بنابراین ما آن را به تنظیم مجدد میکنیم تا pointer
نشان دهیم که میتوان با کلیک روی آن عنصر با آن تعامل داشت.
برخی جزئیات
اطلاعات بیشتر در مورد جزئیات
حتی جزئیات بیشتر
در اینجا جزئیات بیشتری در مورد جزئیات وجود دارد.
[hidden]
ویژگی HTML5
HTML5 یک ویژگی جهانی جدید به نام[hidden]
اضافه می کند که به صورت display: none
پیش فرض استایل بندی شده است. با قرض گرفتن یک ایده از PureCSS ، این پیشفرض را با ایجاد [hidden] { display: none !important; }
کمک به جلوگیری display
از لغو تصادفی آن بهبود میدهیم.
<input type="text" hidden>
ناسازگاری جی کوئری
[hidden]
$(...).hide()
با jQuery و $(...).show()
متدها سازگار نیست . بنابراین، ما در حال حاضر بهویژه [hidden]
تکنیکهای دیگر را برای مدیریت display
عناصر تأیید نمیکنیم.
برای اینکه صرفاً نمایان بودن یک عنصر را display
تغییر دهید، به این معنی که تغییری در آن وجود ندارد و عنصر همچنان می تواند بر جریان سند تأثیر بگذارد، به جای آن از .invisible
کلاس استفاده کنید.