رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

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

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

در این صفحه

رویکرد

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

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

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

متغیرهای CSS

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

با نسخه 5.1.1، ما @imports های مورد نیاز خود را در تمام بسته های 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>عناصر را بازنشانی کرده ایم.

  • همه لیست ها حاشیه بالایی خود را حذف می کنند
  • و حاشیه پایین آنها عادی شد
  • لیست های تودرتو حاشیه پایینی ندارند
    • به این ترتیب ظاهر یکدست تری دارند
    • به خصوص هنگامی که با موارد بیشتری از لیست دنبال می شود
  • بالشتک سمت چپ نیز تنظیم مجدد شده است
  1. در اینجا یک لیست سفارش داده شده است
  2. با چند مورد لیست
  3. ظاهر کلی یکسانی دارد
  4. مانند لیست نامرتب قبلی

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

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

کد درون خطی

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

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

<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 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ورودی کاربر

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

برای تغییر دایرکتوری ها، cdنام دایرکتوری را تایپ کنید.
برای ویرایش تنظیمات، فشار دهید 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)هستند.

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

مثال افسانه

100

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

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

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

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

دکمه عنصر بدون دکمه 
<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کلاس استفاده کنید.