Source

Рестартирај

Рестартирај, збирка на CSS промени специфични за елементите во една датотека, стартува Bootstrap за да обезбеди елегантна, конзистентна и едноставна основна линија за надградба.

Приод

Рестартирањето се надоврзува на Нормализирање, обезбедувајќи многу HTML-елементи со малку оценети стилови користејќи само избирачи на елементи. Дополнителен стајлинг се прави само со часови. На пример, ние рестартираме некои <table>стилови за поедноставна основна линија и подоцна обезбедуваме .table, .table-bordered, и повеќе.

Еве ги нашите упатства и причини за избор на што да се замени при Рестартирање:

  • Ажурирајте некои стандардни вредности на прелистувачот за да користите 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. Наслов за подигање

<h2></h2>

 h2. Наслов за подигање

<h3></h3>

 h3. Наслов за подигање

<h4></h4>

 h4. Наслов за подигање

<h5></h5>

 h5. Заглавие за подигање

<h6></h6>

 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Цел број molestie lorem at massa
  4. Фацилиза во претиум нисл аликет
  5. Нула волутпат аликвам велит
  6. Faucibus porta lacus fringilla vel
  7. Енеан седат амет ерат нунц
  8. Eget porttitor lorem

За поедноставен стил, јасна хиерархија и подобро растојание, списоците со описи ги ажурираа margins. се <dd>ресетира и додадете . s се задебелени .margin-left0margin-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>Тие се модифицирани за да може да се менуваат димензиите само вертикално бидејќи хоризонталното менување на големината често го „крши“ распоредот на страницата.

Овие промени, и повеќе, се прикажани подолу.

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

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 додава нов глобален атрибут со име[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класата .