in English

Рестарт

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

Приступ

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

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

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

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

Елементи <html>и <body>су ажурирани да би обезбедили боље подразумеване вредности за целу страницу. Конкретно:

Глобално је box-sizingпостављен за сваки елемент—укључујући *::beforeи *::after, до border-box. Ово осигурава да декларисана ширина елемента никада не буде прекорачена због допуна или ивице.
Ниједна база font-sizeније декларисана на <html>, али 16pxсе претпоставља (подразумевана вредност претраживача). font-size: 1remпримењује се на <body>за лако прилагодљиво скалирање типа путем медијских упита уз поштовање корисничких преференција и обезбеђујући приступачнији приступ.
Такође <body>поставља глобалне font-family, line-height, и text-align. Ово је касније наслеђено неким елементима форме да би се спречиле недоследности фонтова.
Ради безбедности, <body>декларисано је background-color, подразумевано на #fff.

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

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

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Ово 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. Боотстрап наслов

Листе

Све листе <ul>— , <ol>, и <dl>— су margin-topуклоњене и а margin-bottom: 1rem. Угнежђене листе немају margin-bottom.

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
- Пхаселлус иацулис некуе
- Пурус содалес ултрициес
- Вестибулум лаореет порттитор сем
- Ац тристикуе либеро волутпат ат
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

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

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

Унапред форматирани текст

Елемент <pre>се ресетује да би се уклонио margin-topи користио remјединице за своје margin-bottom.

.екампле-елемент {
  маргин-боттом: 1рем;
}

Табле

Табеле су мало прилагођене стилу <caption>с, скупљају границе и обезбеђују доследност text-alignу целости. Додатне промене за ивице, паддинг и друго долазе са .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да се случајно заобиђе. Иако [hidden]није изворно подржан од ИЕ10, експлицитна декларација у нашем ЦСС-у заобилази тај проблем.

<input type="text" hidden>

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

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

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