Рестартирайте
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>
за лесно адаптивно мащабиране на типа чрез медийни заявки, като същевременно зачита потребителските предпочитания и осигурява по-достъпен подход. - Също
<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,
// 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;
Обърнете внимание, че тъй като наборът от шрифтове включва емотикони шрифтове, много често срещани символи/дингбат 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
.
- Горното поле на всички списъци е премахнато
- И долният им марж се нормализира
- Вложените списъци нямат долно поле
- Така те имат по-равномерен вид
- Особено когато е последвано от повече елементи от списъка
- Лявата подложка също е нулирана
- Ето един подреден списък
- С няколко елемента от списъка
- Има същия общ вид
- Както предишния неподреден списък
За по-опростен стил, ясна йерархия и по-добро разстояние списъците с описания са актуализирани margin
. <dd>
нулиране margin-left
и 0
добавяне margin-bottom: .5rem
. <dt>
s са удебелени .
- Списъци с описания
- Списъкът с описания е идеален за дефиниране на термини.
- Срок
- Определение за термина.
- Второ определение за същия термин.
- Друг термин
- Определение за този друг термин.
Предварително форматиран текст
Елементът <pre>
се нулира, за да премахне своя margin-top
и да използва rem
единици за своя margin-bottom
.
.example-element { margin-bottom: 1rem; }
Маси
Таблиците са леко коригирани според стила <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)
.
Тези промени и други са показани по-долу.
Указатели върху бутони
Рестартирането включва подобрение за 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.
Вградени елементи
The<abbr>
получава основен стил, за да се откроява сред текста на абзаца.
Резюме
cursor
Резюмето по подразбиране е text
, така че го нулираме, за pointer
да предадем, че с елемента може да се взаимодейства чрез щракване върху него.
Някои подробности
Повече информация за детайлите.
Още повече подробности
Ето още подробности за детайлите.
HTML5 [hidden]
атрибут
HTML5 добавя нов глобален атрибут с име[hidden]
, който е стилизиран като display: none
по подразбиране. Взаимствайки идея от PureCSS , ние подобряваме това по подразбиране, като го правим така, [hidden] { display: none !important; }
че да предотвратим display
случайното му заместване. Въпреки че [hidden]
не се поддържа първоначално от IE10, изричната декларация в нашия CSS заобикаля този проблем.
<input type="text" hidden>
jQuery несъвместимост
[hidden]
не е съвместим с jQuery $(...).hide()
и $(...).show()
методи. Поради това в момента не подкрепяме особено [hidden]
други техники за управление display
на елементите.
За да превключите просто видимостта на елемент, което означава, че display
той не е модифициран и елементът все още може да повлияе на потока на документа, използвайте вместо това класа .invisible
.