Рестартирайте

Reboot, колекция от специфични за елемент CSS промени в един файл, стартира Bootstrap, за да осигури елегантна, последователна и проста базова линия, върху която да надграждате.

На тази страница

Приближаване

Reboot се основава на Normalize, предоставяйки много HTML елементи с донякъде упорити стилове, използвайки само селектори на елементи. Допълнителният стил се извършва само с класове. Например, ние рестартираме някои <table>стилове за по-проста базова линия и по-късно предоставяме .table, .table-borderedи още.

Ето нашите насоки и причини да изберете какво да замените в Reboot:

Актуализирайте някои стойности по подразбиране на браузъра, за да използвате rems вместо ems за мащабируемо разстояние между компонентите.
Избягвайте margin-top. Вертикалните полета могат да се свият, което води до неочаквани резултати. По-важното обаче е, че една посока на marginе по-прост мисловен модел.
За по-лесно мащабиране в размерите на устройството, блоковите елементи трябва да използват rems вместо margins.
Сведете до минимум декларациите за fontсвойства, свързани с -, като използвате, inheritкогато е възможно.

CSS променливи

Добавен във v5.2.0

С v5.1.1 ние стандартизирахме нашите необходими @imports във всички наши CSS пакети (включително bootstrap.css, bootstrap-reboot.cssи bootstrap-grid.css), за да включим _root.scss. Това добавя :rootCSS променливи на ниво към всички пакети, независимо колко от тях се използват в този пакет. В крайна сметка Bootstrap 5 ще продължи да вижда повече CSS променливи , добавени с течение на времето, за да осигури повече персонализиране в реално време, без да е необходимо винаги да прекомпилира Sass. Нашият подход е да вземем нашите изходни Sass променливи и да ги трансформираме в CSS променливи. По този начин, дори и да не използвате CSS променливи, все още имате цялата мощ на Sass. Това все още е в процес на изпълнение и ще отнеме време за пълно изпълнение.

Например, разгледайте тези :rootCSS променливи за общи <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};

На практика тези променливи след това се прилагат в Reboot така:

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.

Стек от естествени шрифтове

Bootstrap използва „стандартен стек от шрифтове“ или „стек от системни шрифтове“ за оптимално изобразяване на текст на всяко устройство и операционна система. Тези системни шрифтове са проектирани специално с оглед на съвременните устройства, с подобрено изобразяване на екрани, поддръжка на променливи шрифтове и др. Прочетете повече за естествените купчини шрифтове в тази статия на Smashing Magazine .

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

Обърнете внимание, че тъй като наборът от шрифтове включва шрифтове за емотикони, много често срещани символи за символи/дингбат Unicode ще бъдат изобразени като многоцветни пиктограми. Техният външен вид ще варира в зависимост от стила, използван в собствения шрифт на емотикони на браузъра/платформата, и няма да бъдат засегнати от CSS colorстилове.

Това font-familyсе прилага към <body>и автоматично се наследява глобално в Bootstrap. За да превключите глобалния font-family, актуализирайте $font-family-baseи прекомпилирайте Bootstrap.

Заглавия и параграфи

Всички заглавни елементи — напр. — и се <h1>нулират <p>, за да бъдат margin-topпремахнати. Заглавията са margin-bottom: .5remдобавени и абзаци margin-bottom: 1remза лесно разреждане.

Заглавие	Пример
`<h1></h1>`	h1. Заглавие на Bootstrap
`<h2></h2>`	h2. Заглавие на Bootstrap
`<h3></h3>`	h3. Заглавие на Bootstrap
`<h4></h4>`	h4. Заглавие на Bootstrap
`<h5></h5>`	h5. Заглавие на Bootstrap
`<h6></h6>`	h6. Заглавие на Bootstrap

Хоризонтални правила

Елементът <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-lefton <ul>и <ol>елементите.

Горното поле на всички списъци е премахнато
И долният им марж се нормализира
Вложените списъци нямат долно поле
- Така те имат по-равномерен вид
- Особено когато е последвано от повече елементи от списъка
Лявата подложка също е нулирана

Ето един подреден списък
С няколко елемента от списъка
Има същия общ вид
Както предишния неподреден списък

За по-опростен стил, ясна йерархия и по-добро разстояние списъците с описания са актуализирани margin. <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>са модифицирани, за да могат да се преоразмеряват само вертикално, тъй като хоризонталното преоразмеряване често „разваля“ оформлението на страницата.
<button>s и <input>елементите на бутона имат cursor: pointer, когато :not(:disabled).

Тези промени и други са показани по-долу.

Примерна легенда

Пример за въвеждане

Примерен имейл

Примерен телефон

Примерен url

Примерно число

Примерно търсене

Примерен диапазон

Пример за въвеждане на файл

Примерен избор

Поставете отметка в това квадратче

Вариант едно е това и това Вариант две е нещо друго, което също е супер дълго, за да демонстрира опаковането на тези фантастични контроли на формата. Опция три е деактивирана

Примерно текстово поле

Примерна дата

Примерно време

Примерна парола

Пример datetime-local

Примерна седмица

Примерен месец

Примерен цвят

Примерен изход 100

Поддръжка на въвеждане на дата и цвят

Имайте предвид, че въвеждането на дата не се поддържа напълно от всички браузъри, а именно Safari.

Указатели върху бутони

Рестартирането включва подобрение за role="button"промяна на курсора по подразбиране на pointer. Добавете този атрибут към елементите, за да укажете, че елементите са интерактивни. Тази роля не е необходима за <button>елементи, които получават собствена cursorпромяна.

Бутон за елемент без бутон

html

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

Разни елементи

Адрес

Елементът <address>се актуализира, за да нулира настройките на браузъра по подразбиране font-styleот italicна normal. line-heightсъщо вече е наследено и margin-bottom: 1remе добавено. <address>s са за представяне на информация за контакт за най-близкия предшественик (или цяла работа). Запазете форматирането, като завършвате редовете с <br>.

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

Пълно име
[email protected]

Блоков цитат

По подразбиране marginблоковите цитати са 1em 40px, така че го нулираме 0 0 1remза нещо по-съгласувано с други елементи.

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника

Вградени елементи

Елементът <abbr>получава основен стил, за да се откроява сред текста на абзаца.

Елементът на HTML съкращението.

Резюме

cursorРезюмето по подразбиране е text, така че го нулираме, за pointerда предадем, че с елемента може да се взаимодейства чрез щракване върху него.

Някои подробности

Повече информация за детайлите.

Още повече подробности

Ето още подробности за детайлите.

HTML5 `[hidden]`атрибут

HTML5 добавя нов глобален атрибут с име[hidden] , който е стилизиран като display: noneпо подразбиране. Взаимствайки идея от PureCSS , ние подобряваме това по подразбиране, като го правим така, [hidden] { display: none !important; }че да предотвратим displayслучайното му заместване.

<input type="text" hidden>

jQuery несъвместимост

[hidden]не е съвместим с jQuery $(...).hide()и $(...).show()методи. Поради това в момента не подкрепяме особено [hidden]други техники за управление displayна елементите.

За да превключите просто видимостта на елемент, което означава, че displayтой не е модифициран и елементът все още може да повлияе на потока на документа, използвайте вместо това класа .invisible.

Рестартирайте

Приближаване

CSS променливи

Страница по подразбиране

Стек от естествени шрифтове

Заглавия и параграфи

Хоризонтални правила

Списъци

Вграден код

Кодови блокове

Променливи

Въвеждане от потребителя

Примерен изход

Маси

Форми

Поддръжка на въвеждане на дата и цвят

Указатели върху бутони

Разни елементи

Адрес

Блоков цитат

Вградени елементи

Резюме

HTML5 [hidden]атрибут

jQuery несъвместимост

HTML5 `[hidden]`атрибут