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

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

در این صفحه

رویکرد

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

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

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

متغیرهای CSS

اضافه شده در نسخه 5.2.0

با نسخه 5.1.1، ما @imports های مورد نیاز خود را در تمام بسته های CSS خود (از جمله bootstrap.css، bootstrap-reboot.cssو و bootstrap-grid.css) استاندارد کردیم تا شامل _root.scssشود. این :rootمتغیرهای سطح CSS را به همه باندل ها اضافه می کند، صرف نظر از اینکه چه تعداد از آنها در آن بسته استفاده شده است. در نهایت Bootstrap 5 همچنان شاهد اضافه شدن متغیرهای CSS بیشتری در طول زمان خواهد بود تا سفارشی‌سازی زمان واقعی بیشتری را بدون نیاز به کامپایل مجدد Sass فراهم کند. رویکرد ما این است که متغیرهای Sass منبع خود را گرفته و آنها را به متغیرهای CSS تبدیل کنیم. به این ترتیب، حتی اگر از متغیرهای CSS استفاده نکنید، باز هم تمام قدرت Sass را دارید. این هنوز در حال انجام است و اجرای کامل آن زمان می برد.

به عنوان مثال، این :rootمتغیرهای CSS را برای <body>سبک های رایج در نظر بگیرید:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

در عمل، آن متغیرها در راه اندازی مجدد به صورت زیر اعمال می شوند:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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

عناصر <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.

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

بوت استرپ از یک "پشته فونت بومی" یا "پشته فونت سیستم" برای ارائه بهینه متن در هر دستگاه و سیستم عامل استفاده می کند. این فونت‌های سیستمی به‌طور خاص با در نظر گرفتن دستگاه‌های امروزی، با رندر بهتر روی صفحه‌نمایش، پشتیبانی از فونت متغیر و موارد دیگر طراحی شده‌اند. در این مقاله مجله 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

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

همه عناصر عنوان - به عنوان مثال، <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. عنوان بوت استرپ

قوانین افقی

عنصر <hr>ساده شده است. مانند پیش‌فرض‌های مرورگر، <hr>s از طریق استایل‌بندی می‌شوند border-top، یک پیش‌فرض دارند opacity: .25، و به‌طور خودکار border-colorاز طریق color، از جمله زمانی که colorاز طریق والد تنظیم می‌شود، به ارث می‌برند. آنها را می توان با ابزارهای متن، حاشیه و کدورت تغییر داد.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

لیست ها

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

تمام لیست ها حاشیه بالایی خود را حذف می کنند
و حاشیه پایین آنها عادی شد
لیست های تودرتو حاشیه پایینی ندارند
- به این ترتیب ظاهر یکدست تری دارند
- به خصوص زمانی که با موارد بیشتری از لیست دنبال می شود
بالشتک سمت چپ نیز تنظیم مجدد شده است

در اینجا یک لیست سفارش داده شده است
با چند مورد لیست
ظاهر کلی یکسانی دارد
مانند لیست نامرتب قبلی

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

لیست های توضیحات: لیست توضیحات برای تعریف اصطلاحات عالی است.
مدت، اصطلاح: تعریف اصطلاح.; تعریف دوم برای همان اصطلاح.
یک اصطلاح دیگر: تعریف این اصطلاح دیگر.

کد درون خطی

قطعات درون خطی کد را با <code>. مطمئن شوید که از براکت های زاویه HTML فرار کنید.

به عنوان مثال، <section>باید به صورت خطی پیچیده شود.

html

For example, <code>&lt;section&gt;</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>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

متغیرها

برای نشان دادن متغیرها از <var>تگ استفاده کنید.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ورودی کاربر

برای <kbd>نشان دادن ورودی هایی که معمولاً از طریق صفحه کلید وارد می شوند از علامت استفاده کنید.

برای تغییر دایرکتوری ها، cdنام دایرکتوری را تایپ کنید.
برای ویرایش تنظیمات، فشار دهید ctrl + ,

html

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>تگ استفاده کنید.

این متن به عنوان خروجی نمونه از یک برنامه کامپیوتری در نظر گرفته می شود.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

جداول

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

تشکیل می دهد

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

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

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

مثال افسانه

ورودی نمونه

ایمیل نمونه

تلفن مثال

آدرس نمونه

شماره نمونه

جستجوی مثال

محدوده نمونه

نمونه ورودی فایل

انتخاب نمونه

این کادر را علامت بزنید

گزینه یک این و آن است گزینه دو چیز دیگری است که برای نشان دادن پیچیدگی این کنترل های فرم فانتزی نیز بسیار طولانی است. گزینه سه غیرفعال است

منطقه متنی مثال

تاریخ مثال

زمان مثال

رمز عبور مثال

مثال datetime-local

هفته نمونه

ماه مثال

رنگ نمونه

خروجی نمونه 100

پشتیبانی از ورودی تاریخ و رنگ

به خاطر داشته باشید که ورودی های تاریخ به طور کامل توسط همه مرورگرها، یعنی Safari، پشتیبانی نمی شوند.

اشاره گر روی دکمه ها

راه اندازی مجدد شامل بهبودی برای role="button"تغییر مکان نما پیش فرض به pointer. برای کمک به نشان دادن تعاملی بودن عناصر، این ویژگی را به عناصر اضافه کنید. این نقش برای <button>عناصری که تغییرات خاص خود را دارند لازم نیست cursor.

دکمه عنصر بدون دکمه

html

<span role="button" tabindex="0">Non-button element button</span>

عناصر متفرقه

نشانی

این <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برای چیزی سازگارتر با عناصر دیگر تنظیم می کنیم.

یک نقل قول شناخته شده، موجود در یک عنصر blockquote.

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

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

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

عنصر مخفف HTML .

خلاصه

پیش‌فرض 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کلاس استفاده کنید.

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

رویکرد

متغیرهای CSS

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

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

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

قوانین افقی

لیست ها

کد درون خطی

بلوک های کد

متغیرها

ورودی کاربر

خروجی نمونه

جداول

تشکیل می دهد

پشتیبانی از ورودی تاریخ و رنگ

اشاره گر روی دکمه ها

عناصر متفرقه

نشانی

مسابقه

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

خلاصه

[hidden]ویژگی HTML5

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

`[hidden]`ویژگی HTML5