Source

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

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Ин 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Молести бутуни дар масса
Facilisis дар aliquet nisl pretium
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ба таври ройгон озодона возеҳ кунед
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor loem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Молести бутуни дар масса
Facilisis дар aliquet nisl pretium
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor loem

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

Рӯйхати тавсиф: Рӯйхати тавсиф барои муайян кардани истил��ҳот комил аст.
Эусмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida ва дар вақти дилхоҳ.
Порта Малесуада: Этиам порта семина любовь любвие.

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

Элемент <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).

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

Мисоли афсона

Намунаи вуруд

Намунаи интихоб

Ин қуттии қайдкуниро санҷед

Варианти якум ин ва он аст Варианти дуюм чизи дигаре аст, ки барои нишон додани печонидани ин назорати шаклҳои зебо хеле дароз аст. Варианти сеюм ғайрифаъол аст

Намунаи майдони матн

Намунаи сана

Мисол вақт

Намунаи баромад 100

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

Суроға

Элемент барои <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чизи мувофиқтар бо дигар унсурҳо аз нав танзим мекунем.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

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

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

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