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

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

Падыход

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

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

Абнавіце некаторыя значэнні браўзера па змаўчанні, каб выкарыстоўваць rems замест ems для маштабаванага інтэрвалу кампанентаў.
Пазбягайце margin-top. Вертыкальныя палі могуць згарнуцца, што прывядзе да нечаканых вынікаў. Што яшчэ больш важна, адзіны кірунак margin- гэта больш простая разумовая мадэль.
Для палягчэння маштабавання розных памераў прылад блокавыя элементы павінны выкарыстоўваць rems замест margins.
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.

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

Вэб-шрыфты па змаўчанні (Helvetica Neue, Helvetica і Arial) былі адменены ў Bootstrap 4 і заменены на «ўласны стэк шрыфтоў» для аптымальнага адлюстравання тэксту на кожнай прыладзе і АС. Чытайце больш пра ўласныя стэкі шрыфтоў у гэтым артыкуле Smashing Magazine .

$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;

Звярніце ўвагу, што, паколькі стэк шрыфтоў уключае шрыфты эмодзі, многія агульныя сімвалы/дынгбат-сімвалы Unicode будуць адлюстраваны ў выглядзе рознакаляровых піктаграм. Іх знешні выгляд будзе мяняцца ў залежнасці ад стылю, які выкарыстоўваецца ў браўзеры/платформе роднага шрыфта эмодзі, і на іх не будуць уплываць ніякія 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

Спісы

Усе спісы <ul>— , <ol>, і <dl>— margin-topвыдалены, а margin-bottom: 1rem. Укладзеныя спісы не маюць margin-bottom.

Ва ўсіх спісах верхняе поле выдалена
І іх ніжняя маржа нармалізавалася
Укладзеныя спісы не маюць ніжняга поля
- Такім чынам яны маюць больш роўны выгляд
- Асабліва, калі за ім ідуць дадатковыя элементы спісу
Левая абіўка таксама была скінута

Вось упарадкаваны спіс
З некалькімі пунктамі спісу
Ён мае такі ж агульны выгляд
Як і папярэдні неўпарадкаваны спіс

Для больш простага стылю, выразнай іерархіі і паляпшэння інтэрвалаў спісы апісанняў абноўлены margin. <dd>s скінуць margin-leftі 0дадаць margin-bottom: .5rem. <dt>s выдзелены тлустым шрыфтам .

Спісы апісанняў: Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
тэрмін: Азначэнне да тэрміна.; Другое вызначэнне таго ж тэрміна.
Іншы тэрмін: Вызначэнне гэтага іншага тэрміна.

Папярэдне адфарматаваны тэкст

Элемент <pre>скідаецца, каб выдаліць яго margin-topі выкарыстоўваць remадзінкі для яго margin-bottom.

.example-element {
  поле-ніз: 1rem;
}

Табліцы

Табліцы крыху скарэкціраваны ў адпаведнасці са стылямі <caption>, згорнутыя межы і забяспечваюць паслядоўнасць text-alignва ўсім. Дадатковыя змены для межаў, абіўкі і іншага прыходзяць з .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).

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

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

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

Выбраць прыклад

Адзначце гэты сцяжок

Варыянт першы - тое і тое Другі варыянт - гэта нешта яшчэ, што таксама вельмі доўга, каб прадэманстраваць абгортку гэтых мудрагелістых элементаў кіравання формай. Варыянт трэці адключаны

Прыклад тэкставага поля

Прыклад даты

Прыклад часу

Прыклад выхаду 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>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>атрымлівае асноўны стыль, каб ён вылучаўся сярод тэксту абзаца.

Nulla attr vitae elit libero, a pharetra augue.

Рэзюмэ

cursorЗводка па змаўчанні text, таму мы скідваем гэта, каб pointerпаведаміць, што з элементам можна ўзаемадзейнічаць, націскаючы на яго.

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

Дадатковая інфармацыя аб дэталях.

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

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

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

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

<input type="text" hidden>

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

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

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