Рестартирај
Рестартирај, збирка на CSS промени специфични за елемент во една датотека, го стартува Bootstrap за да обезбеди елегантна, конзистентна и едноставна основна линија за надградба.
Приод
Рестартирањето се надоврзува на Нормализирање, обезбедувајќи многу HTML-елементи со малку оценети стилови користејќи само избирачи на елементи. Дополнителен стајлинг се прави само со часови. На пример, ние рестартираме некои <table>
стилови за поедноставна основна линија и подоцна обезбедуваме .table
, .table-bordered
, и повеќе.
Еве ги нашите упатства и причини за избор на што да се замени при Рестартирање:
- Ажурирајте некои стандардни вредности на прелистувачот за да користите
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;
Забележете дека бидејќи оџакот на фонтови вклучува фонтови за емотикони, многу вообичаени знаци на уникод за симболи/dingbat ќе бидат прикажани како повеќебојни пиктографи. Нивниот изглед ќе се разликува, во зависност од стилот што се користи во мајчиниот фонт за емотикони на прелистувачот/платформата и нема да бидат засегнати од ниту еден CSS color
стил.
Ова font-family
се применува на <body>
и автоматски се наследува глобално низ Bootstrap. За да го префрлите глобалниот font-family
, ажурирајте го $font-family-base
и прекомпајлирајте го Bootstrap.
Наслови и параграфи
Сите елементи на насловот - на пр., <h1>
- и <p>
се ресетираат за да се margin-top
отстранат. Додадени се наслови margin-bottom: .5rem
и параграфи margin-bottom: 1rem
за лесно растојание.
Наслов | Пример |
---|---|
<h1></h1> |
h1. Наслов за подигање |
<h2></h2> |
h2. Наслов за подигање |
<h3></h3> |
h3. Наслов за подигање |
<h4></h4> |
h4. Наслов за подигање |
<h5></h5> |
h5. Наслов за подигање |
<h6></h6> |
h6. Наслов за подигање |
Списоци
Сите списоци <ul>
— , <ol>
, и <dl>
— margin-top
се отстранети и margin-bottom: 1rem
. Вгнездените листи немаат margin-bottom
. Ги ресетиравме и елементите padding-left
за вклучување и .<ul>
<ol>
- На сите списоци им е отстранета горната маржа
- И нивната долна маржа се нормализира
- Вгнездените списоци немаат долна маргина
- На овој начин тие имаат порамномерен изглед
- Особено кога се проследени со повеќе ставки од списокот
- Левата подлога е исто така ресетирана
- Еве нарачана листа
- Со неколку ставки од списокот
- Има ист целокупен изглед
- Како и претходната ненарачана листа
За поедноставен стил, јасна хиерархија и подобро растојание, списоците со описи ги ажурираа margin
s. се <dd>
ресетира и додадете . s се задебелени .margin-left
0
margin-bottom: .5rem
<dt>
- Списоци со опис
- Списокот со опис е совршен за дефинирање на поими.
- Термин
- Дефиниција за поимот.
- Втора дефиниција за истиот термин.
- Друг термин
- Дефиниција за овој друг термин.
Вграден код
Завиткајте ги вградените фрагменти од кодот со <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>
s, ги собираат границите и обезбедуваат конзистентност text-align
насекаде. Дополнителни промени за граници, полнење и повеќе доаѓаат со класата .table
.
Наслов на табелата | Наслов на табелата | Наслов на табелата | Наслов на табелата |
---|---|---|---|
Табела ќелија | Табела ќелија | Табела ќелија | Табела ќелија |
Табела ќелија | Табела ќелија | Табела ќелија | Табела ќелија |
Табела ќелија | Табела ќелија | Табела ќелија | Табела ќелија |
Форми
Различни елементи на формата се рестартирани за поедноставни основни стилови. Еве некои од најзначајните промени:
<fieldset>
Тие немаат граници, облоги или маргина за да можат лесно да се користат како обвивки за поединечни влезови или групи на влезови.<legend>
s, како и збирките на полиња, исто така се рестилизирани за да се прикажат како тип на наслов.<label>
s се поставени заdisplay: inline-block
да дозволатmargin
да се применуваат.<input>
s,<select>
s,<textarea>
s и<button>
s најчесто се адресирани со Нормализирање, но Рестартирај ги отстранува и нивнитеmargin
и поставуваline-height: inherit
, исто така.<textarea>
Тие се модифицирани за да може да се менуваат димензиите само вертикално бидејќи хоризонталното менување на големината често го „крши“ распоредот на страницата.<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
за нешто поконзистентно со другите елементи.
Добро познат цитат, содржан во елемент на блок цитат.
Некој познат во изворниот наслов
Вградени елементи
<abbr>
Елементот добива основен стил за да се истакне меѓу текстот на пасусот .
Резиме
Стандардно cursor
за резиме е text
, така што го ресетираме на за pointer
да пренесеме дека со елементот може да се комуницира со кликнување на него.
Некои детали
Повеќе информации за деталите.
Уште повеќе детали
Еве уште повеќе детали за деталите.
HTML5 [hidden]
атрибут
HTML5 додава нов глобален атрибут со име[hidden]
, кој е display: none
стандардно стилизиран. Позајмувајќи идеја од PureCSS , го подобруваме ова стандардно со тоа што [hidden] { display: none !important; }
ќе помогнеме да се спречи display
случајно да се отфрли.
<input type="text" hidden>
jQuery некомпатибилност
[hidden]
не е компатибилен со jQuery $(...).hide()
и $(...).show()
методите. Затоа, ние во моментов не особено ги поддржуваме [hidden]
другите техники за управување со display
елементите.
За само да ја вклучите видливоста на некој елемент, што значи дека тој display
не е изменет и елементот сè уште може да влијае на текот на документот, наместо тоа , користете ја .invisible
класата .