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",
  "Liberation Sans",
  // 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. Боотстрап наслов

Листе

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

  • Горња маргина свих листа је уклоњена
  • И њихова доња маргина се нормализовала
  • Угнежђене листе немају доњу маргину
    • На овај начин имају уједначенији изглед
    • Нарочито када их прати више ставки на листи
  • Леви паддинг је такође ресетован
  1. Ево уређене листе
  2. Са неколико ставки на листи
  3. Има исти општи изглед
  4. Као претходна неуређена листа

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