Source

Яңарту

Яңарту, бер файлдагы элементларга хас 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 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;

Бу бөтен 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.

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

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

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida eget metus.
Малесуада портасы: Etiam porta sem maleuada magna mollis euismod.

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

<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>лар вертикаль рәвештә үзгәртелергә мөмкин, чөнки горизонталь размер еш кына "өзелә".

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

Legendрнәк легенда

Мисал кертү

Мисал сайлау

Бу пунктны тикшерегез

Беренче вариант - бу һәм теге Икенче вариант - бу матур форма контроллерының төрүен күрсәтү өчен супер озын нәрсә. Өченче вариант инвалид

Текстария үрнәге

Мисал датасы

Мисал вакыты

Мисал чыгару 100

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

Адрес

Элемент браузерның <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башка элементлар белән туры килгән әйбер өчен үзгәртәбез.

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

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

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

Элемент абзац тексты арасында <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класс кулланыгыз .