Рестартирај

Рестартирај, збирка на CSS промени специфични за елемент во една датотека, го стартува Bootstrap за да обезбеди елегантна, конзистентна и едноставна основна линија за надградба.

На оваа страница

Приод

Рестартирањето се надоврзува на Нормализирање, обезбедувајќи многу HTML-елементи со малку оценети стилови користејќи само избирачи на елементи. Дополнителен стајлинг се прави само со часови. На пример, ние рестартираме некои <table>стилови за поедноставна основна линија и подоцна обезбедуваме .table, .table-bordered, и повеќе.

Еве ги нашите упатства и причини за избор на што да се замени при Рестартирање:

Ажурирајте некои стандардни вредности на прелистувачот за да користите 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. Ова додава :rootнивоа на CSS променливи на сите пакети, без оглед на тоа колку од нив се користат во тој пакет. На крајот, 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};

Во пракса, тие променливи потоа се применуваат во Рестартирање вака:

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;

Забележете дека бидејќи оџакот на фонтови вклучува фонтови за емотикони, многу вообичаени знаци на Уникод со симболи/дингбати ќе бидат прикажани како разнобојни пиктографи. Нивниот изглед ќе се разликува, во зависност од стилот што се користи во мајчиниот фонт за емотикони на прелистувачот/платформата и нема да бидат засегнати од ниту еден 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. Наслов за подигање
`<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>ресетира и додадете . s се задебелени .margin-left0margin-bottom: .5rem<dt>

Списоци со опис: Списокот со опис е совршен за дефинирање на поими.
Термин: Дефиниција за поимот.; Втора дефиниција за истиот термин.
Друг термин: Дефиниција за овој друг термин.

Вграден код

Завиткајте ги вградените фрагменти од кодот со <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 најчесто се адресирани со Нормализирање, но Рестартирај ги отстранува и нивните 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за нешто поконзистентно со другите елементи.

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

Некој познат во изворниот наслов

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

<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]`атрибут