in English

Перазагрузка

Перазагрузка, набор змяненняў CSS для канкрэтных элементаў у адным файле, запускае Bootstrap, каб забяспечыць элегантную, паслядоўную і простую базавую лінію, на якой можна абапірацца.

На гэтай старонцы

Падыход

Reboot грунтуецца на Normalize, забяспечваючы многія элементы HTML з некалькі самавітымі стылямі, выкарыстоўваючы толькі селектары элементаў. Дадатковая кладка робіцца толькі класамі. Напрыклад, мы перазагружаем некаторыя <table>стылі для больш простай базавай лініі, а пазней прапануем .table, .table-borderedі многае іншае.

Вось нашы рэкамендацыі і прычыны выбару таго, што перавызначыць у Reboot:

Абнавіце некаторыя значэнні браўзера па змаўчанні, каб выкарыстоўваць rems замест ems для маштабаванага інтэрвалу кампанентаў.
Пазбягайце margin-top. Вертыкальныя палі могуць згарнуцца, што прывядзе да нечаканых вынікаў. Што яшчэ больш важна, адзіны кірунак margin- гэта больш простая разумовая мадэль.
Для палягчэння маштабавання розных памераў прылад блокавыя элементы павінны выкарыстоўваць rems замест margins.
fontЗвядзіце да мінімуму аб'явы звязаных з ім уласцівасцей, выкарыстоўваючы, калі гэта inheritмагчыма.

Зменныя CSS

Дададзена ў v5.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};

На практыцы гэтыя зменныя затым прымяняюцца ў 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;

Звярніце ўвагу, што, паколькі стэк шрыфтоў уключае шрыфты эмодзі, многія агульныя сімвалы Юнікода/дынгбат будуць адлюстраваны ў выглядзе рознакаляровых піктаграм. Іх знешні выгляд будзе мяняцца ў залежнасці ад стылю, які выкарыстоўваецца ў браўзеры/платформе роднага шрыфта эмодзі, і на іх не будуць уплываць ніякія colorстылі CSS.

Гэта 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 маюць стыль via border-top, маюць па змаўчанні opacity: .25і аўтаматычна ўспадкоўваюць іх border-colorvia 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>s скінуць 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>, згорнутыя межы і забяспечваюць паслядоўнасць 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>s не маюць межаў, запаўнення або палёў, таму іх можна лёгка выкарыстоўваць як абгорткі для асобных уводаў або груп уводаў.
<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).

Гэтыя і іншыя змены прадэманстраваны ніжэй.

Прыклад легенды

Прыклад уводу

Прыклад электроннай пошты

Прыклад тэлефона

Прыклад 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паведаміць, што з элементам можна ўзаемадзейнічаць, націскаючы на яго.

Некаторыя дэталі

Больш падрабязна пра дэталі.

Яшчэ больш падрабязна

Тут яшчэ больш падрабязна пра дэталі.

`[hidden]`Атрыбут HTML5

HTML5 дадае новы глабальны атрыбут пад назвай[hidden] , які аформлены display: noneпа змаўчанні. Запазычыўшы ідэю ў PureCSS , мы паляпшаем гэтае змаўчанне, [hidden] { display: none !important; }каб прадухіліць яго displayвыпадковае перавызначэнне.

<input type="text" hidden>

Несумяшчальнасць jQuery

[hidden]не сумяшчальны з метадамі $(...).hide()і jQuery. $(...).show()Такім чынам, у цяперашні час мы асабліва не падтрымліваем [hidden]іншыя метады кіравання displayэлементамі.

Каб проста пераключыць бачнасць элемента, што азначае, што displayён не зменены і элемент усё яшчэ можа ўплываць на паток дакумента, выкарыстоўвайце замест гэтага .invisibleклас .

Перазагрузка

Падыход

Зменныя CSS

Старонка па змаўчанні

Стэк уласных шрыфтоў

Загалоўкі і абзацы

Гарызантальныя правілы

Спісы

Убудаваны код

Кодавыя блокі

Пераменныя

Карыстальніцкі ўвод

Прыклад выхаду

Табліцы

Формы

Падтрымка ўводу даты і колеру

Паказальнікі на кнопках

Розныя элементы

Адрас

Цытата

Убудаваныя элементы

Рэзюмэ

[hidden]Атрыбут HTML5

Несумяшчальнасць jQuery

`[hidden]`Атрыбут HTML5