Рестартирайте

Reboot, колекция от специфични за елемент CSS промени в един файл, стартира Bootstrap, за да осигури елегантна, последователна и проста базова линия, върху която да надграждате.

Приближаване

Reboot се основава на Normalize, предоставяйки много HTML елементи с донякъде упорити стилове, използвайки само селектори на елементи. Допълнителният стил се извършва само с класове. Например, ние рестартираме някои <table>стилове за по-проста базова линия и по-късно предоставяме .table, .table-borderedи още.

Ето нашите насоки и причини да изберете какво да замените в Reboot:

Актуализирайте някои стойности по подразбиране на браузъра, за да използвате rems вместо ems за мащабируемо разстояние между компонентите.
Избягвайте margin-top. Вертикалните полета могат да се свият, което води до неочаквани резултати. По-важното обаче е, че една посока на marginе по-прост мисловен модел.
За по-лесно мащабиране в размерите на устройството, блоковите елементи трябва да използват rems вместо margins.
Сведете до минимум декларациите за 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).

Тези промени и други са показани по-долу.

Примерна легенда

Пример за въвеждане

Примерен избор

Поставете отметка в това квадратче

Вариант едно е това и това Вариант две е нещо друго, което също е супер дълго, за да демонстрира опаковането на тези фантастични контроли на формата. Опция три е деактивирана

Примерно текстово поле

Примерна дата

Примерно време

Примерен изход 100

Указатели върху бутони

Рестартирането включва подобрение за 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>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Пълно име
[email protected]

Блоков цитат

По подразбиране marginблоковите цитати са 1em 40px, така че го нулираме 0 0 1remза нещо по-съгласувано с други елементи.

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника

Вградени елементи

The<abbr> получава основен стил, за да се откроява сред текста на абзаца.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

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.