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

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

Дар ин саҳифа

Муносибат

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

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

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

тағирёбандаҳои CSS

Дар v5.2.0 илова карда шудааст

Бо v5.1.1, мо @imports талаби худро дар тамоми бастаҳои CSS (аз ҷумла bootstrap.css, bootstrap-reboot.css, ва bootstrap-grid.css) барои дохил кардани _root.scss. Ин :rootтағирёбандаҳои сатҳи CSS-ро ба ҳамаи бастаҳо илова мекунад, новобаста аз он ки чанде аз онҳо дар ин баста истифода мешаванд. Дар ниҳоят, Bootstrap 5 дидани тағирёбандаҳои бештари CSS -ро бо мурури замон идома хоҳад дод, то мутобиқсозии бештари вақти воқеӣ бидуни зарурати аз нав тартиб додани Sass. Равиши мо ин аст, ки тағирёбандаҳои сарчашмаи Sass-ро гирифта, онҳоро ба тағирёбандаҳои CSS табдил диҳем. Бо ин роҳ, ҳатто агар шумо тағирёбандаҳои CSS-ро истифода набаред, шумо ба ҳар ҳол тамоми қудрати Sass доред. Ин кор то ҳол идома дорад ва барои иҷрои пурра вақт лозим аст.

Масалан, ин :rootтағирёбандаҳои CSS-ро барои <body>сабкҳои умумӣ баррасӣ кунед:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Дар амал, он тағирёбандаҳо пас аз Reboot ба таври зерин истифода мешаванд:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Ин ба шумо имкон медиҳад, ки мутобиқсозии вақти воқеӣ мувофиқи хоҳиши шумо:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

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

Дар box-sizingсаросари ҷаҳон дар ҳар як элемент муқаррар карда шудааст, аз ҷумла *::beforeва *::after, ба border-box. Ин кафолат медиҳад, ки паҳнои эълоншудаи элемент ҳеҷ гоҳ аз сабаби пуркунӣ ё сарҳад зиёд намешавад.
- Ягон асос font-sizeдар . дар миқёси осони посухгӯӣ тавассути дархостҳои медиа ҳангоми эҳтироми афзалиятҳои корбар ва таъмини равиши дастрастар истифода мешавад. Ин браузери пешфарз метавонад тавассути тағир додани тағирёбанда бекор карда шавад.<html>16pxfont-size: 1rem<body>$font-size-root
Инчунин , , , ва <body>ро муқаррар мекунад. Ин баъдтар аз ҷониби баъзе унсурҳои шакл ба мерос гирифта мешавад, то номувофиқатии ҳарфҳоро пешгирӣ кунад.font-familyfont-weightline-heightcolor
Барои бехатарӣ, <body>дорои эълони background-color, пешфарз ба #fff.

Стеки шрифти аслӣ

Bootstrap як "стеки шрифти модарӣ" ё "стеки шрифти система" -ро барои беҳтар кардани матн дар ҳар як дастгоҳ ва ОС истифода мебарад. Ин шрифтҳои системавӣ махсусан бо дарназардошти дастгоҳҳои имрӯза, бо такмил додани намоиш дар экран, дастгирии ҳарфҳои тағирёбанда ва ғайра тарҳрезӣ шудаанд. Дар ин мақолаи Smashing Magazine дар бораи стекҳои шрифтҳои ватанӣ маълумоти бештар гиред .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Аҳамият диҳед, ки азбаски стек шрифт ҳуруфҳои эмодзиро дар бар мегирад, бисёр аломатҳои умумӣ/дингбат Юникод ҳамчун пиктографҳои гуногунранг дода мешаванд. Намуди зоҳирии онҳо вобаста ба услубе, ки дар шрифти эмодзиҳои аслии браузер/платформа истифода мешавад, фарқ мекунад ва ба онҳо ягон 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

Қоидаҳои уфуқӣ

Элемент <hr>содда карда шудааст. Монанд ба пешфарзҳои браузер, <hr>s бо border-topуслуби , дорои пешфарз мебошанд opacity: .25ва ба таври худкор border-colorтавассути color, мерос мегиранд, аз ҷумла вақте colorки тавассути волидайн муқаррар карда мешавад. Онҳоро бо утилитаҳои матн, сарҳад ва шаффофият тағир додан мумкин аст.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Рӯйхатҳо

Ҳама рӯйхатҳо— <ul>, <ol>, ва <dl>— margin-topхориҷ карда шудаанд ва a margin-bottom: 1rem. Рӯйхати дохилшуда дорои нест margin-bottom. Мо инчунин элементҳоро аз padding-leftнав танзим кардем.<ul><ol>

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

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

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

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

Рамзи дохили

Порчаҳои кодро бо <code>. Боварӣ ҳосил кунед, ки аз қавсҳои кунҷи HTML гурезед.

Масалан, <section>бояд ҳамчун сатр печонида шавад.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Блокҳои код

<pre>Барои сатрҳои сершумори код s -ро истифода баред . Бори дигар, боварӣ ҳосил кунед, ки аз ҳама гуна қавсҳои кунҷӣ дар код барои намоиши дуруст раҳо шавед. Элемент <pre>барои хориҷ кардани он аз нав танзим карда мешавад margin-topва remвоҳидҳоро барои margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Тағйирёбандаҳо

Барои нишон додани тағирёбанда тегро истифода баред <var>.

у = м х + б

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Вуруди корбар

<kbd>Барои нишон додани вуруд, ки одатан тавассути клавиатура ворид карда мешавад, -ро истифода баред .

Барои иваз кардани директорияҳо, cdпас номи директорияро нависед.
Барои таҳрир кардани танзимот, пахш кунед ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

Барои нишон додани натиҷаи намуна аз барнома тегро истифода баред <samp>.

Ин матн барои намунаи баромади барномаи компютерӣ пешбинӣ шудааст.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Ҷадвалҳо

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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).

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

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

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

Намунаи почтаи электронӣ

Намунаи телефон

Намунаи URL

Рақами мисол

Намунаи ҷустуҷӯ

Мисоли диапазон

Намунаи вуруди файл

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

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

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

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

Намунаи сана

Мисол вақт

Намунаи парол

Намунаи datetime-local

Ҳафтаи мисол

Мисол моҳ

Намунаи ранг

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

Дастгирии вуруди сана ва ранг

Дар хотир доред, ки вуруди сана аз ҷониби ҳама браузерҳо, аз ҷумла Safari, пурра дастгирӣ намешавад .

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

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

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

html

<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>услуби асосиро мегирад, то он дар байни матни параграф фарқ кунад.

Унсури ихтисораи HTML .

Хулоса

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

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

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

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

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

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

HTML5 атрибути нави глобалиро бо номи[hidden] , илова мекунад, ки он ҳамчун display: noneпешфарз услубӣ карда мешавад. Гирифтани ғоя аз PureCSS , мо ин пешфарзро такмил дода, ба он мусоидат мекунем, ки аз тасодуфан бекор [hidden] { display: none !important; }шудани он пешгирӣ кунем.display

<input type="text" hidden>

номувофиқатии jQuery

[hidden]бо jQuery $(...).hide()ва $(...).show()усулҳо мувофиқ нест. Аз ин рӯ, мо дар айни замон [hidden]усулҳои дигари идоракунии displayэлементҳоро дастгирӣ намекунем.

Барои танҳо иваз кардани намуди зоҳирии элемент, яъне маънои он displayтағир дода нашудааст ва элемент то ҳол метавонад ба ҷараёни ҳуҷҷат таъсир расонад, ба ҷои он .invisibleсинфро истифода баред .

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

Муносибат

тағирёбандаҳои CSS

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

Стеки шрифти аслӣ

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

Қоидаҳои уфуқӣ

Рӯйхатҳо

Рамзи дохили

Блокҳои код

Тағйирёбандаҳо

Вуруди корбар

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

Ҷадвалҳо

Шаклҳо

Дастгирии вуруди сана ва ранг

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

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

Суроға

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

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

Хулоса

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

номувофиқатии jQuery

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