Source

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

Перазагрузка, набор змяненняў 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Гэта 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цэлы лік нападаў lorem і маса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цэлы лік нападаў lorem і маса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Спісы апісанняў: Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
Эўізмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.

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

Элемент <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 зменены так, што іх памер можна змяняць толькі вертыкальна, бо гарызантальнае змяненне памеру часта «парушае» макет старонкі.

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

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

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

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

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

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

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

Прыклад даты

Прыклад часу

Прыклад выхаду 100

Розныя элементы

Адрас

Элемент <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больш адпаведнага з іншымі элементамі.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Нехта вядомы ў назве крыніцы

Убудаваныя элементы

Элемент <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клас .