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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Молести бутуни дар масса
  4. Facilisis дар aliquet nisl pretium
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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 танҳо ба таври амудӣ тағир дода мешаванд, зеро тағир додани андозаи уфуқӣ аксар вақт тарҳбандии саҳифаро "шиканад".

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

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

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. Бутун рақами пештара.

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

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>
jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.