Рестартирайте
Reboot, колекция от специфични за елемент 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;
Обърнете внимание, че тъй като наборът от шрифтове включва емотикони шрифтове, много често срещани символи/dingbat unicode знаци ще бъдат изобразени като многоцветни пиктограми. Техният външен вид ще варира в зависимост от стила, използван в собствения шрифт на емотикони на браузъра/платформата, и няма да бъдат засегнати от 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. Заглавие на 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>
нулиране 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>
s, свиват границите и осигуряват последователност text-align
навсякъде. Допълнителни промени за граници, подложки и други идват с .table
класа .
Заглавие на таблицата | Заглавие на таблицата | Заглавие на таблицата | Заглавие на таблицата |
---|---|---|---|
Таблица клетка | Таблица клетка | Таблица клетка | Таблица клетка |
Таблица клетка | Таблица клетка | Таблица клетка | Таблица клетка |
Таблица клетка | Таблица клетка | Таблица клетка | Таблица клетка |
Форми
Различни елементи на формата са рестартирани за по-прости базови стилове. Ето някои от най-забележителните промени:
<fieldset>
нямат граници, подложки или маржове, така че могат лесно да се използват като обвивки за отделни входове или групи от входове.<legend>
s, подобно на наборите от полета, също са преработени, за да се показват като нещо като заглавие.<label>
s са настроени даdisplay: inline-block
позволяватmargin
да бъдат приложени.<input>
s,<select>
s,<textarea>
s и<button>
s се адресират най-вече от Normalize, но рестартирането премахва и техните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
за нещо по-съгласувано с други елементи.
Добре познат цитат, съдържащ се в елемент blockquote.
Някой известен в заглавието на източника
Вградени елементи
Елементът <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
.