Дахин ачаална уу

Нэг файл дахь элементэд хамаарах CSS өөрчлөлтүүдийн цуглуулга болох Reboot нь Bootstrap-г эхлүүлж, дэгжин, тууштай, энгийн суурь үзүүлэлтийг бий болгоно.

Энэ хуудсан дээр

Арга барил

Дахин ачаалах нь Normalize дээр суурилдаг бөгөөд зөвхөн элемент сонгогч ашиглан олон HTML элементүүдийг бага зэрэг үзэл бодолтой хэв маягаар хангадаг. Нэмэлт сарлагийн саваг нь зөвхөн ангиудад хийгддэг. Жишээ нь, бид зарим <table>хэв маягийг илүү хялбар болгох үүднээс дахин ачаалж, дараа нь .table, .table-bordered, болон бусад зүйлсийг өгдөг.

Дахин ачаалахад юуг хүчингүй болгохыг сонгох заавар, шалтгаанууд энд байна:

Хэмжих боломжтой бүрэлдэхүүн хэсгийн зайнд s-ийн remоронд s -г ашиглахын тулд хөтчийн өгөгдмөл утгыг шинэчилнэ үү .em
зайлсхийх margin-top. Босоо ирмэгүүд нурж, гэнэтийн үр дүнд хүрч болзошгүй. Хамгийн гол нь нэг чиглэл marginнь илүү энгийн сэтгэцийн загвар юм.
Төхөөрөмжийн хэмжээг илүү хялбар болгохын тулд блокийн элементүүд нь rems-д margins-г ашиглах ёстой.
font-холбоотой шинж чанаруудын мэдэгдлийг inheritаль болох бага байлгах.

CSS хувьсагч

5.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нийтлэг <body>хэв маягийн эдгээр CSS хувьсагчдыг авч үзье:

  @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};

Практикт эдгээр хувьсагчдыг дахин ачаалахад дараах байдлаар ашигладаг.

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*::afterborder-box
- -д ямар ч суурь font-sizeзарлаагүй <html>, гэхдээ 16px(хөтчийн өгөгдмөл) гэж үздэг. Хэрэглэгчийн сонголтыг хүндэтгэж, илүү хүртээмжтэй хандлагыг хангахын зэрэгцээ медиа асуулгад хялбар хариу үйлдэл үзүүлэх төрлүүдийг масштаблахад ашигладаг font-size: 1rem. <body>Энэ хөтчийн өгөгдмөл тохиргоог хувьсагчийг өөрчилснөөр хүчингүй болгож болно $font-size-root.
нь <body>мөн глобал font-family, font-weight, line-height, болон color. Энэ нь үсгийн хэв маягийн зөрчилдөөнөөс урьдчилан сэргийлэхийн тулд дараа нь зарим хэлбэрийн элементүүдээр өвлөгддөг.
Аюулгүй байдлын үүднээс <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;

Фонтын стек нь эможи фонтуудыг агуулсан байдаг тул олон нийтлэг тэмдэг/dingbat Юникод тэмдэгтүүд нь олон өнгийн пиктограф хэлбэрээр харагдах болно гэдгийг анхаарна уу. Хөтөч/платформын уугуул эможи фонтод ашигласан загвараас хамааран тэдгээрийн гадаад төрх өөр өөр байх ба ямар ч CSS colorзагварт нөлөөлөхгүй.

Үүнийг Bootstrap font-family-д ашигладаг бөгөөд <body>автоматаар дэлхий даяар удамшдаг. Глобал руу шилжихийн тулд Bootstrap font-family-г шинэчилж $font-family-base, дахин хөрвүүлнэ үү.

Гарчиг ба догол мөр

Бүх гарчгийн элементүүд, жишээлбэл, <h1>тэдгээрийг <p>арилгахын тулд дахин тохируулна margin-top. Хоорондоо хялбар байх үүднээс гарчиг margin-bottom: .5remболон догол мөрүүдийг нэмсэн margin-bottom: 1rem.

Гарчиг	Жишээ
`<h1></h1>`	h1. Ачаалагчийн гарчиг
`<h2></h2>`	h2. Ачаалагчийн гарчиг
`<h3></h3>`	h3. Ачаалагчийн гарчиг
`<h4></h4>`	h4. Ачаалагчийн гарчиг
`<h5></h5>`	h5. Ачаалагчийн гарчиг
`<h6></h6>`	h6. Ачаалагчийн гарчиг

Хэвтээ дүрмүүд

Элементийг <hr>хялбаршуулсан. Хөтчийн өгөгдмөлтэй адил <hr>s нь -аар загварчлагдсан border-top, өгөгдмөл -тэй бөгөөд opacity: .25автоматаар border-colorдамжуулан удамшдаг. Тэдгээрийг текст, хүрээ, тунгалаг байдлын хэрэгслүүдээр өөрчилж болно.colorcolor

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бөгөөд 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ашиглана .remmargin-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>тагийг ашиглана уу.

y = m x + b

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>, хил хязгаарыг буулгаж, бүхэлд нь тогтвортой байдлыг хангана 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>s-ийг хэрэглэхийг 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>дахин тохируулахаар шинэчлэгдсэн . одоо бас өвлөгдөж, нэмэгдсэн байна. s нь хамгийн ойрын өвөг дээдсийн (эсвэл бүхэл бүтэн ажлын хэсэг) холбоо барих мэдээллийг танилцуулах зориулалттай. Мөрүүдийг төгсгөл болгож форматыг хадгал .font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Бүтэн нэр
[email protected]

Блок ишлэл

Блок ишлэл дээрх өгөгдмөл marginнь 1em 40px, тиймээс бид үүнийг 0 0 1remбусад элементүүдтэй илүү нийцүүлэхийн тулд дахин тохируулна.

Блок ишлэлд агуулагдсан алдартай ишлэл.

Эх сурвалжийн гарчигт алдартай нэгэн

Дотор элементүүд

Элемент нь <abbr>догол мөрний текстээс ялгарах үндсэн хэв маягийг хүлээн авдаг.

HTML товчлолын элемент .

Дүгнэлт

Дүгнэлт дээр өгөгдмөл cursorнь text, тиймээс бид pointerтүүн дээр дарснаар тухайн элементтэй харьцаж болно гэдгийг харуулахын тулд үүнийг дахин тохируулсан.

Зарим дэлгэрэнгүй мэдээлэл

Дэлгэрэнгүй мэдээллийг дэлгэрэнгүй.

Бүр илүү дэлгэрэнгүй

Дэлгэрэнгүй байдлын талаар илүү дэлгэрэнгүй мэдээлэл энд байна.

HTML5 `[hidden]`шинж чанар

HTML5 нь өгөгдмөлөөр загварчлагдсан шинэ глобал шинж чанарыг нэмдэг. [hidden]PureCSSdisplay: none - ээс санаа авч , бид үүнийг санамсаргүй байдлаар дарагдахаас урьдчилан сэргийлэхийн тулд энэ үндсэн тохиргоог сайжруулж байна.[hidden] { display: none !important; }display

<input type="text" hidden>

jQuery-ийн үл нийцэх байдал

[hidden]$(...).hide()jQuery болон $(...).show()аргуудтай нийцэхгүй байна . Тиймээс бид элементүүдийг [hidden]удирдах бусад арга техникийг одоогоор төдийлөн сайшаахгүй байна .display

Элементийн харагдах байдлыг солихын тулд, өөрөөр хэлбэл энэ displayнь өөрчлөгдөөгүй бөгөөд тухайн элемент нь баримт бичгийн урсгалд нөлөөлөх боломжтой хэвээр байхын тулд оронд нь .invisibleклассыг ашиглана уу.

Дахин ачаална уу

Арга барил

CSS хувьсагч

Хуудасны өгөгдмөл

Эх үсгийн стек

Гарчиг ба догол мөр

Хэвтээ дүрмүүд

Жагсаалтууд

Дотор код

Кодын блокууд

Хувьсагч

Хэрэглэгчийн оруулсан

Жишээ гаралт

Хүснэгтүүд

Маягтууд

Огноо, өнгө оруулах дэмжлэг

Товчлуур дээрх заагч

Төрөл бүрийн элементүүд

Хаяг

Блок ишлэл

Дотор элементүүд

Дүгнэлт

HTML5 [hidden]шинж чанар

jQuery-ийн үл нийцэх байдал

HTML5 `[hidden]`шинж чанар