Аз нав оғоз кунед

Reboot, маҷмӯаи тағиротҳои хоси CSS дар як файл, Bootstrap-ро оғоз кунед, то заминаи шево, пайдарпай ва оддиро фароҳам оварад.

Муносибат

Бозоғозӣ бар Normalize сохта шуда, бисёр унсурҳои HTML-ро бо услубҳои то андозае ақидашуда бо истифода аз танҳо интихобкунандагони элемент таъмин мекунад. Ороиши иловагӣ танҳо бо синфҳо анҷом дода мешавад. Масалан, мо баъзе <table>сабкҳоро барои соддатар аз нав оғоз мекунем ва баъдтар .table, .table-bordered, ва ғайраро таъмин мекунем.

Инҳоянд дастурҳо ва сабабҳои мо барои интихоби он, ки дар Reboot чӣ бояд иваз карда шавад:

Баъзе арзишҳои пешфарзи браузерро навсозӣ кунед, то rems ба ҷои ems барои фосилаи ҷузъҳои миқёспазир истифода шавад.
Пешгирӣ кунед margin-top. Маржаҳои амудӣ метавонанд фурӯ резанд ва натиҷаҳои ғайричашмдошт ба даст оранд. Муҳимтар аз ҳама, як самти ягона marginмодели оддии равонӣ аст.
Барои осонтар кардани миқёс дар андозаҳои дастгоҳ, унсурҳои блок бояд rems for margins -ро истифода баранд.
Эъломияҳои fontхосиятҳои марбутро ба ҳадди ақал нигоҳ доред, то ҳадди inheritимкон истифода баред.

Пешфарзҳои саҳифа

Унсурҳои <html>ва <body>навсозӣ карда мешаванд, то пешфарзҳои беҳтари саҳифаро таъмин кунанд. Аниқтараш:

Дар box-sizingсаросари ҷаҳон дар ҳар як элемент муқаррар карда шудааст, аз ҷумла *::beforeва *::after, ба border-box. Ин кафолат медиҳад, ки паҳнои эълоншудаи элемент ҳеҷ гоҳ аз сабаби пуркунӣ ё сарҳад зиёд намешавад.
Ягон асос font-sizeдар . дар миқёси осони посухгӯӣ тавассути дархостҳои медиа ҳангоми эҳтироми афзалиятҳои корбар ва таъмини равиши дастрастар истифода мешавад.<html>16pxfont-size: 1rem<body>
Инчунин , , ва <body>ро муқаррар мекунад. Ин баъдтар аз ҷониби баъзе унсурҳои шакл ба мерос гирифта мешавад, то номувофиқатии ҳарфҳоро пешгирӣ кунад.font-familyline-heighttext-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;

Аҳамият диҳед, ки азбаски стек шрифт ҳуруфҳои эмодзиро дар бар мегирад, бисёр аломатҳои умумӣ/dingbat Юникод ҳамчун пиктографҳои гуногунранг дода мешаванд. Намуди зоҳирии онҳо вобаста ба услубе, ки дар шрифти эмодзиҳои аслии браузер/платформа истифода мешавад, фарқ мекунад ва ба онҳо ягон colorуслуби CSS таъсир намерасонад.

Ин font-familyба татбиқ карда мешавад <body>ва ба таври худкор дар саросари ҷаҳон дар тамоми Bootstrap мерос гирифта мешавад. Барои иваз кардани глобалӣ , Bootstrap -ро font-familyнавсозӣ ва дубора тартиб диҳед.$font-family-base

Сарлавҳаҳо ва параграфҳо

Ҳама унсурҳои сарлавҳа, масалан, <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хориҷ карда шудаанд ва a margin-bottom: 1rem. Рӯйхати дохилшуда дорои нест margin-bottom.

Ҳама рӯйхатҳо маржаи болоии онҳо хориҷ карда шудаанд
Ва маржаи поёнии онҳо ба эътидол омад
Рӯйхатҳои дохилшуда маржаи поён надоранд
- Бо ин роҳ онҳо намуди ҳамвортар доранд
- Махсусан, вақте ки аз паи ҷузъҳои бештари рӯйхат
Пули чап низ аз нав танзим карда шуд

Ин аст рӯйхати фармоишӣ
Бо якчанд ҷузъҳои рӯйхат
Он намуди умумии якхела дорад
Ҳамчун рӯйхати пештараи бетартиб

Барои услуби соддатар, иерархияи равшан ва фосилаи беҳтар, рӯйхати тавсифҳо margins нав карда шуданд. <dd>аз нав танзим margin-leftкунед 0ва илова кунед margin-bottom: .5rem. <dt>s ғафс шудаанд .

Рӯйхати тавсиф: Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.
Мӯҳлат: Таъриф барои истилоҳ.; Таърифи дуюм барои ҳамон истилоҳ.
Истилоҳи дигар: Таъриф барои ин истилоҳи дигар.

Матни пешакӣ форматшуда

Элемент <pre>барои хориҷ кардани он аз нав танзим карда мешавад margin-topва remвоҳидҳоро барои margin-bottom.

.example-element {
  маржа-поён: 1рем;
}

Ҷадвалҳо

Ҷадвалҳо ба услуби <caption>s каме тасҳеҳ карда мешаванд, сарҳадҳоро вайрон мекунанд ва text-alignдар саросари ҷаҳон мувофиқат мекунанд. Тағироти иловагӣ барои сарҳадҳо, пуркунӣ ва ғайра бо синф .tableворид мешаванд.

Ин ҷадвали намунавӣ аст ва ин сарлавҳаи он барои тавсифи мундариҷа аст.
Сарлавҳаи ҷадвал	Сарлавҳаи ҷадвал	Сарлавҳаи ҷадвал	Сарлавҳаи ҷадвал
Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал
Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал
Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал	Ячейкаи ҷадвал

Шаклҳо

Унсурҳои гуногуни шакл барои сабкҳои оддии асосӣ аз нав оғоз карда шуданд. Инҳоянд баъзе аз тағйироти назаррас:

<fieldset>s сарҳад, пуркунӣ ё маржа надоранд, аз ин рӯ онҳо метавонанд ба осонӣ ҳамчун парпеч барои воридоти инфиродӣ ё гурӯҳҳои воридот истифода шаванд.
<legend>s, ба монанди маҷмӯаҳои саҳроӣ, инчунин аз нав сохта шудаанд, то ҳамчун сарлавҳаи навъҳо намоиш дода шаванд.
<label>с гузошта шудаанд, display: inline-blockто ки marginба кор бурда шаванд.
<input>s, <select>s, <textarea>s ва <button>s асосан аз ҷониби Normalize муроҷиат мекунанд, аммо Reboot инчунин онҳоро нест мекунад marginва танзим мекунад line-height: inherit.
<textarea>s танҳо ба таври амудӣ тағир дода мешаванд, зеро тағир додани андозаи уфуқӣ аксар вақт тарҳбандии саҳифаро "шиканад".
<button>s ва <input>унсурҳои тугма доранд, cursor: pointerвақте ки :not(:disabled).

Ин тағирот ва ғайра дар зер нишон дода шудаанд.

Нишондиҳандаҳо дар тугмаҳо

Бозоғозӣ замимаро барои role="button"тағир додани курсори пешфарз ба pointer. Ин хосиятро ба унсурҳо илова кунед, то нишон диҳад, ки унсурҳо интерактивӣ мебошанд. Ин нақш барои унсурҳое, ки тағироти <button>худро мегиранд, лозим нест .cursor

Тугмаи элементи ғайри-тугма

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

Унсурҳои гуногун

Суроға

Элемент барои <address>аз нав танзимкунии пешфарз браузер font-styleаз . низ акнун мерос мондааст ва илова карда шудааст. s барои пешниҳоди маълумоти тамос барои аҷдодони наздиктарин (ё тамоми маҷмӯи кор) мебошанд. Форматро бо анҷоми сатрҳо бо .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
Сан-Франсиско, CA 94103
P: (123) 456-7890

Номи пурраи
[email protected]

Блоки иқтибос

Пешфарз marginдар блоки иқтибосҳо ин аст 1em 40px, бинобар ин мо онро ба 0 0 1remчизи мувофиқтар бо дигар унсурҳо аз нав танзим мекунем.

Иқтибоси маъруф, ки дар унсури блоки иқтибос мавҷуд аст.

Шахси машҳур дар Сарлавҳаи Сарчашма

Унсурҳои дарунсохт

Элемент <abbr>услуби асосиро мегирад, то он дар байни матни параграф фарқ кунад.

Nulla attr vitae elit libero, a augue pharetra.

Хулоса

Пешфарз cursorдар хулоса ин аст text, аз ин рӯ, мо онро аз нав танзим мекунем, pointerто бифаҳмем, ки бо пахш кардани он элемент бо он ҳамкорӣ кардан мумкин аст.

Баъзе тафсилот

Маълумоти бештар дар бораи тафсилот.

Ҳатто тафсилоти бештар

Дар ин ҷо тафсилоти бештар дар бораи тафсилот.

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

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синфро истифода баред .