Source

Рестарт

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

Приступ

Ребоот се надовезује на Нормализе, пружајући многе ХТМЛ елементе са донекле упорним стиловима користећи само селекторе елемената. Додатни стил се ради само са класама. На пример, неке стилове поново покрећемо <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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !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.

  • Лорем ипсум долор сит амет
  • Цонсецтетур адиписцинг елит
  • Интегер молестие лорем ат масса
  • Фацилисис ин претиум нисл аликует
  • Нулла волутпат аликуам велит
    • Пхаселлус иацулис некуе
    • Пурус содалес ултрициес
    • Вестибулум лаореет порттитор сем
    • Ац тристикуе либеро волутпат ат
  • Фауцибус порта лацус фрингилла вел
  • Аенеан сит амет ерат нунц
  • Егет порттитор лорем
  1. Лорем ипсум долор сит амет
  2. Цонсецтетур адиписцинг елит
  3. Интегер молестие лорем ат масса
  4. Фацилисис ин претиум нисл аликует
  5. Нулла волутпат аликуам велит
  6. Фауцибус порта лацус фрингилла вел
  7. Аенеан сит амет ерат нунц
  8. Егет порттитор лорем

За једноставнији стил, јасну хијерархију и бољи размак, листе описа су ажурирале 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>с су модификовани тако да могу да се мењају само вертикално јер хоризонтална промена величине често „разбија” изглед странице.

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

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

100

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

Адреса

Елемент <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 тога.