Рестартирај
Рестартирај, збирка на 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>
за лесно одговорно скалирање на типот преку медиумски прашања, притоа почитувајќи ги преференциите на корисникот и обезбедувајќи попристапен пристап. - Исто
<body>
така, поставува глобалниfont-family
,line-height
иtext-align
. Ова е наследено подоцна од некои елементи на формата за да се спречат недоследности во фонтот. - За безбедност,
<body>
има декларираноbackground-color
, стандардно на#fff
.
Стак на мајчин фонтови
Стандардните веб-фонтови (Helvetica Neue, Helvetica и Arial) се исфрлени во Bootstrap 4 и се заменети со „магацинот на мајчин фонт“ за оптимално прикажување текст на секој уред и оперативен систем. Прочитајте повеќе за куповите на оригинални фонтови во оваа статија од Smashing Magazine .
Ова font-family
се применува на <body>
и автоматски се наследува глобално низ Bootstrap. За да го префрлите глобалниот font-family
, ажурирајте го $font-family-base
и прекомпајлирајте го Bootstrap.
Наслови и параграфи
Сите елементи на насловот - на пр., <h1>
- и <p>
се ресетираат за да се margin-top
отстранат. Додадени се наслови margin-bottom: .5rem
и параграфи margin-bottom: 1rem
за лесно растојание.
Наслов | Пример |
---|---|
|
h1. Наслов за подигање |
|
h2. Наслов за подигање |
|
h3. Наслов за подигање |
|
h4. Наслов за подигање |
|
h5. Наслов за подигање |
|
h6. Наслов за подигање |
Списоци
Сите списоци <ul>
— , <ol>
, и <dl>
— margin-top
се отстранети и margin-bottom: 1rem
. Вгнездените листи немаат margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цел број molestie lorem at massa
- Фацилиза во претиум нисл аликет
- Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Енеан седат амет ерат нунц
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цел број molestie lorem at massa
- Фацилиза во претиум нисл аликет
- Нула волутпат аликвам велит
- Faucibus porta lacus fringilla vel
- Енеан седат амет ерат нунц
- Eget porttitor lorem
За поедноставен стил, јасна хиерархија и подобро растојание, списоците со описи ги ажурираа margin
s. се <dd>
ресетира и додадете . s се задебелени .margin-left
0
margin-bottom: .5rem
<dt>
- Списоци со опис
- Списокот со опис е совршен за дефинирање на поими.
- Еуизмод
- 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
.
.пример-елемент { маргина-дно: 1рем; }
Табели
Табелите се малку приспособени на стилови <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)
.
Овие промени, и повеќе, се прикажани подолу.
Покажувачи на копчињата
Рестартирањето вклучува подобрување за role="button"
промена на стандардниот курсор во pointer
. Додајте го овој атрибут на елементите за да помогнете да покажете дека елементите се интерактивни. Оваа улога не е неопходна за <button>
елементите кои добиваат своја cursor
промена.
Различни елементи
Адреса
Елементот се ажурира за <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]
Blockquote
The default margin
on blockquotes is 1em 40px
, so we reset that to 0 0 1rem
for something more consistent with other elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Inline elements
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
Summary
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5 [hidden]
attribute
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.