Перазагрузка
Перазагрузка, набор змяненняў CSS для канкрэтных элементаў у адным файле, запускае Bootstrap, каб забяспечыць элегантную, паслядоўную і простую базавую лінію, на якой можна абапірацца.
Падыход
Reboot грунтуецца на Normalize, забяспечваючы многія элементы HTML з некалькі самавітымі стылямі, выкарыстоўваючы толькі селектары элементаў. Дадатковая кладка робіцца толькі класамі. Напрыклад, мы перазагружаем некаторыя <table>
стылі для больш простай базавай лініі, а пазней прапануем .table
, .table-bordered
і многае іншае.
Вось нашы рэкамендацыі і прычыны выбару таго, што перавызначыць у Reboot:
- Абнавіце некаторыя значэнні браўзера па змаўчанні, каб выкарыстоўваць
rem
s заместem
s для маштабаванага інтэрвалу кампанентаў. - Пазбягайце
margin-top
. Вертыкальныя палі могуць згарнуцца, што прывядзе да нечаканых вынікаў. Што яшчэ больш важна, адзіны кірунакmargin
- гэта больш простая разумовая мадэль. - Для палягчэння маштабавання розных памераў прылад блокавыя элементы павінны выкарыстоўваць
rem
s заместmargin
s. font
Звядзіце да мінімуму аб'явы звязаных з ім уласцівасцей, выкарыстоўваючы, калі гэтаinherit
магчыма.
Старонка па змаўчанні
Элементы <html>
і <body>
абнаўляюцца, каб забяспечыць лепшыя значэнні па змаўчанні для ўсёй старонкі. Больш канкрэтна:
- Усталёўваецца
box-sizing
глабальна для кожнага элемента, уключаючы*::before
і*::after
, даborder-box
. Гэта гарантуе, што заяўленая шырыня элемента ніколі не будзе перавышана з-за запаўнення або рамкі.- Ніякая база
font-size
не аб'яўлена на<html>
, але16px
мяркуецца (браўзер па змаўчанні).font-size: 1rem
прымяняецца<body>
для лёгкага адаптыўнага маштабавання тыпу з дапамогай медыя-запытаў, захоўваючы перавагі карыстальніка і забяспечваючы больш даступны падыход. Гэтае змаўчанне браўзера можна перавызначыць, змяніўшы$font-size-root
зменную.
- Ніякая база
- Таксама
<body>
задае глабальныяfont-family
,font-weight
,line-height
іcolor
. Гэта пазней успадкоўваецца некаторымі элементамі формы, каб прадухіліць неадпаведнасць шрыфтоў. - У мэтах бяспекі
<body>
заяўленыbackground-color
, па змаўчанні#fff
.
Стэк уласных шрыфтоў
Bootstrap выкарыстоўвае «родны стэк шрыфтоў» або «сістэмны стэк шрыфтоў» для аптымальнага адлюстравання тэксту на кожнай прыладзе і АС. Гэтыя сістэмныя шрыфты былі распрацаваны спецыяльна з улікам сучасных прылад, з палепшаным адлюстраваннем на экранах, падтрымкай зменных шрыфтоў і г.д. Чытайце больш пра ўласныя стэкі шрыфтоў у гэтым артыкуле Smashing Magazine .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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
стылі 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
. Мы таксама скінулі элементы padding-left
on <ul>
і .<ol>
- Ва ўсіх спісах верхняе поле выдалена
- І іх ніжняя маржа нармалізавалася
- Укладзеныя спісы не маюць ніжняга поля
- Такім чынам яны маюць больш роўны выгляд
- Асабліва, калі за ім ідуць дадатковыя элементы спісу
- Левая абіўка таксама была скінута
- Вось упарадкаваны спіс
- З некалькімі пунктамі спісу
- Ён мае такі ж агульны выгляд
- Як і папярэдні неўпарадкаваны спіс
Для больш простага стылю, выразнай іерархіі і паляпшэння інтэрвалаў спісы апісанняў абноўлены margin
. <dd>
s скінуць margin-left
і 0
дадаць margin-bottom: .5rem
. <dt>
s выдзелены тлустым шрыфтам .
- Спісы апісанняў
- Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
- тэрмін
- Азначэнне да тэрміна.
- Другое вызначэнне таго ж тэрміна.
- Іншы тэрмін
- Вызначэнне гэтага іншага тэрміна.
Убудаваны код
Абгарніце ўбудаваныя фрагменты кода з дапамогай <code>
. Не забудзьцеся выключыць вуглавыя дужкі HTML.
<section>
трэба абгарнуць як убудаваны.
For example, <code><section></code> should be wrapped as inline.
Кодавыя блокі
Выкарыстоўвайце <pre>
s для некалькіх радкоў кода. Яшчэ раз, не забудзьцеся пазбавіцца ад любых вуглавых дужак у кодзе для належнага візуалізацыі. Элемент <pre>
скідаецца, каб выдаліць яго margin-top
і выкарыстоўваць rem
адзінкі для яго margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Пераменныя
Для ўказання зменных выкарыстоўвайце <var>
тэг.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Карыстальніцкі ўвод
Выкарыстоўвайце , <kbd>
каб пазначыць увод, які звычайна ўводзіцца з клавіятуры.
Каб змяніць налады, націсніце ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Прыклад выхаду
Для ўказання ўзору выхаду з праграмы выкарыстоўвайце <samp>
тэг.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Табліцы
Табліцы крыху скарэкціраваны ў адпаведнасці са стылямі <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)
.
Гэтыя і іншыя змены прадэманстраваны ніжэй.
Падтрымка ўводу даты і колеру
Майце на ўвазе, што ўвод даты не цалкам падтрымліваецца ўсімі браўзерамі, а менавіта Safari.
Паказальнікі на кнопках
Перазагрузка ўключае паляпшэнне для 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Поўнае імя
[email protected]
Цытата
Значэнне па змаўчанні margin
для блокавых цытат - гэта 1em 40px
, таму мы скідваем яго да 0 0 1rem
больш адпаведнага з іншымі элементамі.
Добра вядомая цытата, якая змяшчаецца ў элеменце blockquote.
Нехта вядомы ў назве крыніцы
Убудаваныя элементы
Элемент <abbr>
атрымлівае асноўны стыль, каб ён вылучаўся сярод тэксту абзаца.
Рэзюмэ
cursor
Зводка па змаўчанні text
, таму мы скідваем гэта, каб pointer
паведаміць, што з элементам можна ўзаемадзейнічаць, націскаючы на яго.
Некаторыя дэталі
Дадатковая інфармацыя аб дэталях.
Яшчэ больш падрабязна
Тут яшчэ больш падрабязна пра дэталі.
[hidden]
Атрыбут HTML5
HTML5 дадае новы глабальны атрыбут з імем[hidden]
, які аформлены display: none
па змаўчанні. Запазычыўшы ідэю ў PureCSS , мы ўдасканальваем гэтае па змаўчанні, [hidden] { display: none !important; }
каб прадухіліць яго display
выпадковае перавызначэнне.
<input type="text" hidden>
Несумяшчальнасць jQuery
[hidden]
не сумяшчальны з метадамі $(...).hide()
і jQuery. $(...).show()
Такім чынам, у цяперашні час мы асабліва не падтрымліваем [hidden]
іншыя метады кіравання display
элементамі.
Каб проста пераключыць бачнасць элемента, што азначае, што display
ён не зменены і элемент усё яшчэ можа ўплываць на паток дакумента, выкарыстоўвайце замест гэтага .invisible
клас .