in English

Рестарт

Ребоот, колекција ЦСС промена специфичних за елементе у једној датотеци, покрените Боотстрап да бисте обезбедили елегантну, доследну и једноставну основу за надоградњу.

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

Приступ

Ребоот се надовезује на Нормализе, пружајући многе ХТМЛ елементе са донекле упорним стиловима користећи само селекторе елемената. Додатни стил се ради само са класама. На пример, неке стилове поново покрећемо <table>за једноставнију основну линију и касније обезбеђујемо .table, .table-bordered, и још много тога.

Ево наших смерница и разлога за избор онога што ћете заменити у Ребоот-у:

Ажурирајте неке подразумеване вредности прегледача да бисте користили remс уместо emс за скалабилни размак компоненти.
Избегавајте margin-top. Вертикалне маргине се могу срушити, дајући неочекиване резултате. Што је још важније, један правац marginје једноставнији ментални модел.
За лакше скалирање у различитим величинама уређаја, блок елементи треба да користе remс за marginс.
Декларације fontсвојстава везаних за -свежите на минимум, користећи inheritкад год је то могуће.

ЦСС променљиве

Додато у в5.2.0

Са в5.1.1, стандардизовали смо наше потребне @importс у свим нашим ЦСС пакетима (укључујући bootstrap.css, bootstrap-reboot.css, и bootstrap-grid.css) да бисмо укључили _root.scss. Ово додаје :rootЦСС променљиве нивоа свим скуповима, без обзира на то колико их се користи у том пакету. На крају, Боотстрап 5 ће наставити да види више ЦСС варијабли које се додају током времена, како би се обезбедило више прилагођавања у реалном времену без потребе да се увек поново компајлира Сасс. Наш приступ је да узмемо наше изворне Сасс променљиве и трансформишемо их у ЦСС варијабле. На тај начин, чак и ако не користите ЦСС променљиве, и даље имате сву моћ Сасс-а. Ово је још увек у току и биће потребно време да се у потпуности примени.

На пример, узмите у обзир ове :rootЦСС променљиве за уобичајене <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.

Нативни скуп фонтова

Боотстрап користи „нативни скуп фонтова“ или „системски скуп фонтова“ за оптимално приказивање текста на сваком уређају и ОС. Ови системски фонтови су дизајнирани посебно за данашње уређаје на уму, са побољшаним приказивањем на екранима, подршком за променљиве фонтове и још много тога. Прочитајте више о изворним скуповима фонтова у овом чланку Смасхинг Магазина .

$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стил.

Ово font-familyсе примењује на <body>и аутоматски се наслеђује широм Боотстрап-а. Да бисте променили глобални font-family, ажурирајте $font-family-baseи поново компајлирајте Боотстрап.

Наслови и параграфи

Сви елементи наслова—нпр.— <h1>и <p>се ресетују да би били margin-topуклоњени. Додати су наслови margin-bottom: .5remи параграфи margin-bottom: 1remза лакши размак.

Наслов	Пример
`<h1></h1>`	х1. Боотстрап наслов
`<h2></h2>`	х2. Боотстрап наслов
`<h3></h3>`	х3. Боотстрап наслов
`<h4></h4>`	х4. Боотстрап наслов
`<h5></h5>`	х5. Боотстрап наслов
`<h6></h6>`	х6. Боотстрап наслов

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

Елемент <hr>је поједностављен. Слично подразумеваним подешавањима претраживача, <hr>с се стилизују преко border-top, имају подразумевану вредност opacity: .25и аутоматски наслеђују своје border-colorпреко color, укључујући и када colorје постављено преко родитеља. Могу се мењати помоћу услужних програма за текст, ивице и непрозирност.

хтмл

<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>елементе.

Горња маргина свих листа је уклоњена
И њихова доња маргина се нормализовала
Угнежђене листе немају доњу маргину
- На овај начин имају уједначенији изглед
- Нарочито када их прати више ставки на листи
Леви паддинг је такође ресетован

Ево уређене листе
Са неколико ставки на листи
Има исти општи изглед
Као претходна неуређена листа

За једноставнији стил, јасну хијерархију и бољи размак, листе описа су ажурирале marginс. <dd>с ресетујте margin-leftи 0додајте margin-bottom: .5rem. <dt>с су подебљане .

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

Инлине код

Умотајте уметнуте исечке кода помоћу <code>. Обавезно избегавајте ХТМЛ угаоне заграде.

На пример, <section>требало би да буде умотано као инлине.

хтмл

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Блокови кода

Користите <pre>с за више редова кода. Још једном, обавезно избегните све угаоне заграде у коду ради правилног приказивања. Елемент <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>ознаку.

и = м к + б

хтмл

<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>с, скупљају границе и обезбеђују доследност text-alignу целости. Додатне промене за ивице, паддинг и друго долазе са .tableкласом .

Ово је пример табеле, а ово је њен наслов који описује садржај.
Наслов табеле	Наслов табеле	Наслов табеле	Наслов табеле
Ћелија табеле	Ћелија табеле	Ћелија табеле	Ћелија табеле
Ћелија табеле	Ћелија табеле	Ћелија табеле	Ћелија табеле
Ћелија табеле	Ћелија табеле	Ћелија табеле	Ћелија табеле

хтмл

<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>с, као и скупови поља, такође су рестилизовани да се приказују као нека врста наслова.
<label>с су постављени на display: inline-blockда дозвољавају marginпримену.
<input>с, <select>с, <textarea>с и <button>с се углавном адресирају помоћу Нормализе, али Ребоот уклања и њихове marginи line-height: inheritтакође поставља .
<textarea>с су модификовани тако да могу да се мењају само вертикално јер хоризонтална промена величине често „разбија” изглед странице.
<button>с и <input>елементи дугмета имају cursor: pointerкада :not(:disabled).

Ове промене, и још много тога, приказане су у наставку.

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

Пример уноса

Пример е-поште

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

Пример УРЛ-а

Пример број

Пример претраге

Пример опсега

Пример уноса датотеке

Пример одабира

Означите ово поље за потврду

Прва опција је ово и оно Друга опција је нешто друго што је такође супер дуго да би се демонстрирало умотавање ових отмјених контрола форме. Опција три је онемогућена

Пример текстуалног подручја

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

Пример времена

Пример лозинке

Пример датетиме-лоцал

Пример недеље

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

Пример боје

Пример излаза 100

Подршка за унос датума и боје

Имајте на уму да сви претраживачи, односно Сафари, не подржавају у потпуности уносе датума .

Показивачи на дугмадима

Поновно покретање укључује побољшање за role="button"промену подразумеваног курсора у pointer. Додајте овај атрибут елементима да бисте указали да су елементи интерактивни. Ова улога није неопходна за <button>елементе који добијају сопствену cursorпромену.

Дугме елемента без дугмета

хтмл

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

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

Адреса

Елемент <address>је ажуриран да ресетује подразумеване вредности претраживача font-styleса italicна normal. line-heightје такође сада наслеђен и margin-bottom: 1remдодат је. <address>с служе за представљање контакт информација за најближег претка (или целог дела). Сачувајте форматирање завршавањем редова са <br>.

Твиттер, Инц.
1355 Маркет Ст, Суите 900
Сан Францисцо, ЦА 94103
П: (123) 456-7890

Пуно име
фирст.ласт@екампле.цом

Блоцккуоте

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

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

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

Инлине елементи

Елемент <abbr>добија основни стил како би се истакао међу текстом пасуса.

Елемент ХТМЛ скраћеница.

Резиме

Подразумевано cursorу резимеу је text, па смо то ресетовали на да pointerбисмо пренели да се са елементом може ступити у интеракцију кликом на њега.

Неки детаљи

Више информација о детаљима.

Још више детаља

Ево још више детаља о детаљима.

ХТМЛ5 `[hidden]`атрибут

ХТМЛ5 додаје нови глобални атрибут под називом[hidden] , који је display: noneподразумевано стилизован. Позајмивши идеју од ПуреЦСС-а , побољшавамо ову подразумевану вредност тако што [hidden] { display: none !important; }помажемо да спречимо displayда случајно буде замењена.

<input type="text" hidden>

јКуери некомпатибилност

[hidden]није компатибилан са јКуери-јем $(...).hide()и $(...).show()методама. Због тога тренутно не подржавамо [hidden]друге технике за управљање displayелементима.

Да бисте само променили видљивост елемента, што значи да displayон није измењен и да елемент и даље може да утиче на ток документа, користите класу уместо.invisible тога.

Рестарт

Приступ

ЦСС променљиве

Подразумеване вредности странице

Нативни скуп фонтова

Наслови и параграфи

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

Листе

Инлине код

Блокови кода

Променљиве

Унос корисника

Сампле оутпут

Табле

Формс

Подршка за унос датума и боје

Показивачи на дугмадима

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

Адреса

Блоцккуоте

Инлине елементи

Резиме

ХТМЛ5 [hidden]атрибут

јКуери некомпатибилност

ХТМЛ5 `[hidden]`атрибут