Source

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

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Това 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

За по-опростен стил, ясна йерархия и по-добро разстояние списъците с описания са актуализирани margin. <dd>нулиране margin-leftи 0добавяне margin-bottom: .5rem. <dt>s са удебелени .

Списъци с описания: Списъкът с описания е идеален за дефиниране на термини.
Euismod: 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.

.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>са модифицирани, за да могат да се преоразмеряват само вертикално, тъй като хоризонталното преоразмеряване често „разваля“ оформлението на страницата.

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

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

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

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

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

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

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

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

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

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

Разни елементи

Адрес

Елементът <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за нещо по-съгласувано с други елементи.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

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

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

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

Nulla attr vitae elit libero, a pharetra augue.

Резюме

cursorРезюмето по подразбиране е text, така че го нулираме, за pointerда предадем, че с елемента може да се взаимодейства чрез щракване върху него.

Някои подробности

Повече информация за детайлите.

Още повече подробности

Ето още подробности за детайлите.

HTML5 `[hidden]`атрибут

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.

<input type="text" hidden>

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.