Аз нав оғоз кунед
Reboot, маҷмӯаи тағиротҳои хоси CSS дар як файл, Bootstrap-ро оғоз кунед, то заминаи шево, пайдарпай ва оддиро фароҳам оварад.
Муносибат
Бозоғозӣ бар Normalize сохта шуда, бисёр унсурҳои HTML-ро бо услубҳои то андозае ақидашуда бо истифода аз танҳо интихобкунандагони элемент таъмин мекунад. Ороиши иловагӣ танҳо бо синфҳо анҷом дода мешавад. Масалан, мо баъзе <table>
сабкҳоро барои соддатар аз нав оғоз мекунем ва баъдтар .table
, .table-bordered
, ва ғайраро таъмин мекунем.
Инҳоянд дастурҳо ва сабабҳои мо барои интихоби он, ки дар Reboot чӣ бояд иваз карда шавад:
- Баъзе арзишҳои пешфарзи браузерро навсозӣ кунед, то
rem
s ба ҷоиem
s барои фосилаи ҷузъҳои миқёспазир истифода шавад. - Пешгирӣ кунед
margin-top
. Маржаҳои амудӣ метавонанд фурӯ резанд ва натиҷаҳои ғайричашмдошт ба даст оранд. Муҳимтар аз ҳама, як самти ягонаmargin
модели оддии равонӣ аст. - Барои осонтар кардани миқёс дар андозаҳои дастгоҳ, унсурҳои блок бояд
rem
s formargin
s -ро истифода баранд. - Эъломияҳои
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 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
.
- Ҳама рӯйхатҳо маржаи болоии онҳо хориҷ карда шудаанд
- Ва маржаи поёнии онҳо ба эътидол омад
- Рӯйхатҳои дохилшуда маржаи поён надоранд
- Бо ин роҳ онҳо намуди ҳамвортар доранд
- Махсусан, вақте ки аз паи ҷузъҳои бештари рӯйхат
- Пули чап низ аз нав танзим карда шуд
- Ин аст рӯйхати фармоишӣ
- Бо якчанд ҷузъҳои рӯйхат
- Он намуди умумии якхела дорад
- Ҳамчун рӯйхати пештараи бетартиб
Барои услуби соддатар, иерархияи равшан ва фосилаи беҳтар, рӯйхати тавсифҳо margin
s нав карда шуданд. <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 барои пешниҳоди маълумоти тамос барои аҷдодони наздиктарин (ё тамоми маҷмӯи кор) мебошанд. Форматро бо анҷоми сатрҳо бо .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
Сан-Франсиско, CA 94103
P: (123) 456-7890 Номи пурраи
[email protected]
Блоки иқтибос
Пешфарз margin
дар блоки иқтибосҳо ин аст 1em 40px
, бинобар ин мо онро ба 0 0 1rem
чизи мувофиқтар бо дигар унсурҳо аз нав танзим мекунем.
Иқтибоси маъруф, ки дар унсури блоки иқтибос мавҷуд аст.
Унсурҳои дарунсохт
Элемент <abbr>
услуби асосиро мегирад, то он дар байни матни параграф фарқ кунад.
Хулоса
Пешфарз 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
синфро истифода баред .