Яңарту

Яңарту, бер файлдагы элементларга хас CSS үзгәртүләр җыелмасы, зәвыклы, эзлекле һәм гади нигезне тәэмин итү өчен Bootstrap кикстарт.

Алым

Ребуот Нормальләштерүгә нигезләнә, күп HTML элементларын элемент селекторларын кулланып берникадәр фикерле стильләр белән тәэмин итә. Өстәмә стиллау класслар белән генә башкарыла. Мәсәлән, без <table>гадирәк база өчен кайбер стильләрне яңадан башлыйбыз, соңрак тәэмин итәбез .table, .table-borderedһәм башкалар.

Менә безнең күрсәтмәләр һәм Reboot'та нәрсәне кире кагарга икәнен сайлау өчен сәбәпләр:

Зурайтылган компонент аралыгы өчен rems урынына s куллану өчен кайбер браузерның килешү кыйммәтләрен яңартыгыз .em
Сак бул margin-top. Көтелмәгән нәтиҗәләр китереп, вертикаль кырлар җимерелергә мөмкин. Иң мөһиме, бер юнәлеш margin- гади акыл моделе.
Deviceайланма зурлыкларын җиңеләйтү өчен блок элементлары rems өчен margins кулланырга тиеш.
Бәйләнешле мөлкәт декларацияләрен fontминимумга кадәр саклагыз, inheritмөмкин булганда кулланыгыз.

Битнең килешүләре

Яхшырак бит киңлегендә тәэмин итү <html>өчен <body>элементлар яңартыла. Төгәлрәк:

Глобаль box-sizingдәрәҗәдә һәр элементка куелган, шул исәптән *::beforeһәм . Бу элементның игълан ителгән киңлеге паддер яки чик аркасында беркайчан да артмаска тиеш.*::afterborder-box
Бер база font-sizeда игълан ителми <html>, ләкин 16pxфаразлана (браузер килешү). кулланучының өстенлекләрен хөрмәт иткәндә һәм уңайлырак карашны тәэмин иткәндә, массакүләм мәгълүмат чаралары аша җиңел җаваплы тип-масштаб өчен font-size: 1remкулланыла .<body>
Бу <body>шулай ук глобаль font-family, line-heightһәм text-align. Бу шрифтның туры килмәвен булдырмас өчен соңрак кайбер форма элементлары белән мирас итеп алына.
Куркынычсызлык өчен <body>, игълан ителгән background-color, дефолт #fff.

Туган шрифт

Килешенгән веб шрифтлар (Helvetica Neue, Helvetica, and Arial) Bootstrap 4 тә төшерелде һәм һәр җайланмада һәм ОСта оптималь текст күрсәтү өчен "туган шрифт стек" белән алыштырылды. Бу шрифт журнал мәкаләсендә туган шрифтлар турында күбрәк укыгыз .

$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;

Игътибар итегез, шрифт стакасында эмоджи шрифтлар булганлыктан, күп уртак символ / дингбат icникод символлары күп төсле пиктограф рәвешендә күрсәтеләчәк. colorАларның тышкы кыяфәте браузерда / платформаның туган эмоджи шрифтында кулланылган стильгә карап үзгәрәчәк, һәм алар CSS стильләренә тәэсир итмәячәкләр .

Бу бөтен Bootstrap буенча автоматик рәвештә мирас итеп font-familyалынган . <body>Глобальне күчерү өчен , Bootstrap- ны font-familyяңарту һәм компиляцияләү.$font-family-base

Башлыклар һәм абзацлар

Барлык баш элементлары, мәсәлән, һәм аларны <h1>бетерү <p>өчен яңадан урнаштыралар margin-top. Easyиңел аралар өчен рубрикалар 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.

Барлык исемлекләр дә иң югары маржаны бетерделәр
Theirәм аларның аскы маржасы нормальләште
Ояланган исемлекләрнең аскы маржасы юк
- Шулай итеп алар тагын да тышкы кыяфәткә ия
- Бигрәк тә күбрәк исемлек пунктлары ияргәндә
Сул япма шулай ук яңадан урнаштырылган

Менә заказланган исемлек
Берничә исемлек белән
Аның гомуми кыяфәте бер үк
Элекке тәртипсез исемлек буларак

Гади стильләштерү, ачык иерархия һәм яхшырак аралар өчен тасвирлау исемлекләре яңартылды margin. <dd>s яңадан margin-leftурнаштыру 0һәм өстәү margin-bottom: .5rem. <dt>лар калын .

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Термин: Термин өчен аңлатма.; Шул ук термин өчен икенче билгеләмә.
Тагын бер термин: Бу бүтән термин өчен аңлатма.

Форматланган текст

<pre>Элемент аны бетерү margin-topһәм аның өчен remберәмлекләр куллану өчен яңадан урнаштырылган margin-bottom.

.example-element {
  margin-bottom: 1rem;
}

Таблицалар

Таблицалар стиль сларына бераз көйләнгән, <caption>чикләрне җимерәләр, эзлеклелекне тәэмин итәләр text-align. Чикләр, паддерлар һәм башкалар өчен өстәмә үзгәрешләр класс белән килә.table .

Бу үрнәк таблица, һәм бу аның эчтәлеген тасвирлау.
Өстәл башы	Өстәл башы	Өстәл башы	Өстәл башы
Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге
Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге
Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге	Өстәл күзәнәге

Формалар

Гади гади стильләр өчен төрле форма элементлары яңадан эшләтеп җибәрелде. Менә иң күренекле үзгәрешләр:

<fieldset>ларның чикләре, паддерлары, маржалары юк, шуңа күрә алар аерым керемнәр яки кертү төркемнәре өчен җиңел итеп кулланылырга мөмкин.
<legend>лар, кыр кырлары кебек, шулай ук төрләр исеме итеп күрсәтелү өчен яңадан эшкәртелде.
<label>лар кулланырга display: inline-blockрөхсәт marginитәләр.
<input>s, <select>s, <textarea>s, <button>s күбесенчә Normalize белән мөрәҗәгать итәләр, ләкин Reboot аларның marginһәм комплектларын line-height: inheritда бетерә.
<textarea>лар вертикаль рәвештә үзгәртелергә мөмкин, чөнки горизонталь размер еш кына "өзелә".
<button>лар һәм <input>төймә элементлары cursor: pointerкайчан :not(:disabled).

Бу үзгәрешләр һәм башкалар түбәндә күрсәтелгән.

Кнопкадагы күрсәткечләр

Ребутка role="button"курсорны үзгәртү өчен өстәмә кертә pointer. Бу элементны элементларга интерактив булуын күрсәтергә ярдәм итегез. Бу роль <button>үз cursorүзгәрүләрен ала торган элементлар өчен кирәк түгел.

Кнопка булмаган элемент төймәсе

<span role="button" tabindex="0">Non-button element button</span>

Төрле элементлар

Адрес

Элемент браузерның <address>килешенү урынына font-styleяңартылды . хәзер дә мирас итеп алынган, өстәлгән. лар иң якын бабалар өчен контакт мәгълүматларын тәкъдим итү өчен (яки бөтен эш органы). Сызыкларны тәмамлап форматлауны саклагыз .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

Тулы исем
[email protected]

Блоккот

marginБлоккотлар буенча килешү 1em 40px, шуңа күрә без аны 0 0 1remбашка элементлар белән туры килгән әйбер өчен үзгәртәбез.

Блоккот элементында булган билгеле цитата.

Чыганак исемендә танылган кеше

Электр элементлары

Элемент абзац тексты арасында <abbr>аерылып торыр өчен төп стилизация ала.

Nulla attr vitae elit libero, 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]$(...).hide()jQuery һәм $(...).show()ысуллары белән туры килми . Шуңа күрә, без хәзерге вакытта элементлар [hidden]белән идарә итүнең башка техникасын хупламыйбыз.display

Элементның күренүчәнлеген үзгәртү өчен, displayул үзгәртелмәгән һәм элемент әле дә документ агымына тәэсир итә ала, аның урынына .invisibleкласс кулланыгыз .