Qayta ishga tushirish

Qayta yuklash, bitta fayldagi elementga xos CSS oʻzgarishlari toʻplami, unga asoslanish uchun oqlangan, izchil va oddiy asosni taʼminlash uchun Bootstrap-ni ishga tushiring.

Ushbu sahifada

Yondashuv

Qayta yuklash Normalize asosida quriladi, bu ko'plab HTML elementlarini faqat element tanlash vositalaridan foydalangan holda biroz fikrli uslublar bilan ta'minlaydi. Qo'shimcha uslublar faqat sinflar bilan amalga oshiriladi. Misol uchun, biz ba'zi <table>uslublarni oddiyroq baza uchun qayta ishga tushiramiz va keyinroq , va boshqalarni taqdim .tableetamiz .table-bordered.

Qayta ishga tushirishda nimani bekor qilishni tanlash bo'yicha ko'rsatmalarimiz va sabablarimiz:

Kengaytiriladigan komponentlar oraligʻida rems oʻrniga s dan foydalanish uchun brauzerning baʼzi birlamchi qiymatlarini yangilang .em
Qochish margin-top. Vertikal chekkalar yiqilib, kutilmagan natijalarga olib kelishi mumkin. Eng muhimi, ning yagona yo'nalishi marginoddiy aqliy modeldir.
Qurilma o‘lchamlari bo‘yicha oson masshtablash uchun blok elementlari rems uchun margins dan foydalanishi kerak.
Iloji bo'lsa font, -related xususiyatlar deklaratsiyasini minimal darajada saqlang .inherit

CSS o'zgaruvchilari

5.1.1 versiyasiga qo'shilgan

v5.1.1 bilan biz @importbarcha CSS to‘plamlarimiz (jumladan bootstrap.css, bootstrap-reboot.css, va bootstrap-grid.cssqo‘shish uchun ) bo‘yicha talablarimizni standartlashtirdik. Bu to‘plamda qanchadan foydalanilishidan qat’iy nazar, barcha to‘plamlarga darajali CSS o‘zgaruvchilari _root.scssqo‘shiladi . Oxir oqibat, Bootstrap 5 ham shunday davom etadi. :rootvaqt o'tishi bilan qo'shilgan ko'proq CSS o'zgaruvchilarini ko'ring.

Sahifaning standart sozlamalari

va elementlari sahifa boʻylab yaxshiroq standartni taʼminlash uchun yangilanadi <html>. <body>Aniqroq aytganda:

Global box-sizingmiqyosda har bir elementga o'rnatiladi, jumladan *::beforeva *::after, to border-box. Bu elementning e'lon qilingan kengligi to'ldirish yoki chegara tufayli hech qachon oshib ketmasligini ta'minlaydi.
- da hech qanday baza font-sizee'lon qilinmaydi <html>, lekin 16pxqabul qilinadi (brauzerning sukut bo'yicha). font-size: 1remmedia so'rovlari orqali oson javob beruvchi turdagi masshtablash uchun qo'llaniladi, shu <body>bilan birga foydalanuvchi imtiyozlarini hurmat qiladi va yanada qulayroq yondashuvni ta'minlaydi. Ushbu brauzer standarti o'zgaruvchini o'zgartirish orqali bekor qilinishi mumkin $font-size-root.
Shuningdek <body>, global font-family, font-weight, line-heightva ni o'rnatadi color. Bu shrift nomuvofiqligini oldini olish uchun keyinchalik ba'zi shakl elementlari tomonidan meros qilib olinadi.
Xavfsizlik <body>uchun e'lon qilingan background-color, sukut bo'yicha #fff.

Mahalliy shrift to'plami

Bootstrap har bir qurilma va operatsion tizimda matnni optimal ko'rsatish uchun "mahalliy shriftlar to'plami" yoki "tizim shriftlari to'plami" dan foydalanadi. Ushbu tizim shriftlari ekranlarda yaxshilangan renderlash, o'zgaruvchan shriftlarni qo'llab-quvvatlash va boshqalar bilan bugungi qurilmalarni hisobga olgan holda maxsus ishlab chiqilgan. Ushbu Smashing Magazine maqolasida mahalliy shrift to'plamlari haqida ko'proq o'qing .

$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,
  // 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;

E'tibor bering, shriftlar to'plami emoji shriftlarini o'z ichiga olganligi sababli, ko'plab umumiy belgilar/dingbat unicode belgilari ko'p rangli piktogrammalar sifatida ko'rsatiladi. Ularning ko‘rinishi brauzer/platformaning mahalliy emoji shriftida ishlatiladigan uslubga qarab o‘zgaradi va ularga hech qanday CSS coloruslublari ta’sir qilmaydi.

Bu butun Bootstrap-ga avtomatik ravishda font-familyqo'llaniladi <body>va butun dunyo bo'ylab meros qilib olinadi. Global ga o'tish uchun Bootstrap font-family-ni yangilang va qayta kompilyatsiya qiling.$font-family-base

CSS o'zgaruvchilari

Bootstrap 5 etuklashda davom etar ekan , har doim Sass-ni qayta kompilyatsiya qilmasdan real vaqt rejimida ko'proq moslashtirishni ta'minlash vositasi sifatida CSS o'zgaruvchilari bilan tobora ko'proq uslublar yaratiladi . Bizning yondashuvimiz manba Sass o'zgaruvchilarimizni olish va ularni CSS o'zgaruvchilariga aylantirishdir. Shunday qilib, agar siz CSS o'zgaruvchilaridan foydalanmasangiz ham, Sassning barcha kuchiga ega bo'lasiz. Bu hali ham davom etmoqda va to'liq amalga oshirish uchun vaqt kerak bo'ladi.

Masalan, umumiy uslublar :rootuchun ushbu CSS o'zgaruvchilarini ko'rib chiqing:<body>

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

Amalda, ushbu o'zgaruvchilar Reboot-da shunday qo'llaniladi:

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

Bu sizga real vaqt rejimida o'zingiz xohlagan tarzda sozlash imkonini beradi:

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

Sarlavhalar va paragraflar

Barcha sarlavha elementlari, masalan, <h1>- va <p>ularni margin-topolib tashlash uchun qayta o'rnatiladi. Sarlavhalar margin-bottom: .5remva paragraflar margin-bottom: 1remorasidagi intervallarni osonlashtirish uchun qo'shilgan.

Sarlavha	Misol
`<h1></h1>`	h1. Bootstrap sarlavhasi
`<h2></h2>`	h2. Bootstrap sarlavhasi
`<h3></h3>`	h3. Bootstrap sarlavhasi
`<h4></h4>`	h4. Bootstrap sarlavhasi
`<h5></h5>`	h5. Bootstrap sarlavhasi
`<h6></h6>`	h6. Bootstrap sarlavhasi

Ro'yxatlar

Barcha roʻyxatlar— <ul>, <ol>, va <dl>— margin-topoʻchirildi va a margin-bottom: 1rem. Oʻrnatilgan roʻyxatlarda yoʻq margin-bottom. Shuningdek, biz padding-lefton <ul>va <ol>elementlarni qayta o'rnatdik.

Barcha ro'yxatlarning yuqori chegarasi olib tashlangan
Va ularning pastki chegarasi normallashdi
Ichki roʻyxatlarning pastki cheti yoʻq
- Shu tarzda ular yanada tekis ko'rinishga ega bo'ladilar
- Ayniqsa, undan keyin ko'proq ro'yxat elementlari bo'lsa
Chap to'ldirish ham qayta o'rnatildi

Bu erda tartiblangan ro'yxat
Bir nechta ro'yxat elementlari bilan
U bir xil umumiy ko'rinishga ega
Oldingi tartibsiz ro'yxat kabi

Oddiyroq uslub, aniq ierarxiya va yaxshi oraliqlar uchun tavsiflar roʻyxati yangilandi margin. <dd>qayta o'rnating va margin-leftqo'shing . s qalinlashgan .0margin-bottom: .5rem<dt>

Tavsif ro'yxatlari: Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
Muddati: Termin uchun ta'rif.; Xuddi shu atama uchun ikkinchi ta'rif.
Boshqa atama: Ushbu boshqa atama uchun ta'rif.

Inline kod

Kodning ichki qismlarini bilan o'rab oling <code>. HTML burchakli qavslardan qochishingizga ishonch hosil qiling.

Misol uchun, <section>inline sifatida o'ralgan bo'lishi kerak.

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

Kod bloklari

<pre>Kodning bir nechta satri uchun s dan foydalaning . Yana bir bor, to'g'ri ko'rsatish uchun koddagi har qanday burchakli qavslardan qochishingizga ishonch hosil qiling. Elementni <pre>olib tashlash uchun qayta o'rnatiladi va uning uchun birliklardan margin-topfoydalaning .remmargin-bottom

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

<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>

O'zgaruvchilar

O'zgaruvchilarni ko'rsatish uchun <var>tegdan foydalaning.

y = m x + b

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

Foydalanuvchi kiritish

<kbd>Odatda klaviatura orqali kiritiladigan kiritishni ko'rsatish uchun foydalaning .

Kataloglarni almashtirish uchun, cdkeyin katalog nomini kiriting.
Sozlamalarni tahrirlash uchun bosing ctrl + ,

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>

Chiqish namunasi

Dasturning namunaviy chiqishini ko'rsatish uchun <samp>tegdan foydalaning.

Ushbu matn kompyuter dasturidan olingan namuna sifatida ko'rib chiqilishi kerak.

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

Jadvallar

Jadvallar s uslubiga biroz moslashtiriladi <caption>, chegaralarni yig'adi va text-alignbutun davomida bir xil bo'lishini ta'minlaydi. Chegaralar, toʻldirish va boshqalar uchun qoʻshimcha oʻzgarishlar sinf bilan birga.table keladi .

Bu misol jadvali va bu uning mazmunini tavsiflash uchun sarlavhasi.
Jadval sarlavhasi	Jadval sarlavhasi	Jadval sarlavhasi	Jadval sarlavhasi
Jadval katakchasi	Jadval katakchasi	Jadval katakchasi	Jadval katakchasi
Jadval katakchasi	Jadval katakchasi	Jadval katakchasi	Jadval katakchasi
Jadval katakchasi	Jadval katakchasi	Jadval katakchasi	Jadval katakchasi

Shakllar

Oddiy asosiy uslublar uchun turli shakl elementlari qayta ishga tushirildi. Mana eng muhim o'zgarishlar:

<fieldset>s chegaralari, to'ldirishlari yoki chekkalari yo'q, shuning uchun ular alohida kirishlar yoki kirishlar guruhlari uchun osongina o'rash sifatida ishlatilishi mumkin.
<legend>s, maydon to'plamlari kabi, sarlavha sifatida ko'rsatilishi uchun qayta tiklangan.
<label>s qo'llanilishiga display: inline-blockruxsat berish uchun o'rnatiladi margin.
<input>s, <select>s, <textarea>s va <button>s ga asosan Normalize tomonidan murojaat qilinadi, lekin Reboot ularni marginva o'rnatishlarni line-height: inheritham olib tashlaydi.
<textarea>s faqat vertikal ravishda o'lchamini o'zgartirish uchun o'zgartiriladi, chunki gorizontal o'zgartirish ko'pincha sahifa tartibini "buzadi".
<button>s va <input>tugma elementlari cursor: pointerqachon ega :not(:disabled).

Ushbu o'zgarishlar va boshqalar quyida ko'rsatilgan.

Sana va rang kiritishni qo'llab-quvvatlash

Shuni yodda tutingki, sanani kiritish barcha brauzerlar, xususan Safari tomonidan to'liq qo'llab-quvvatlanmaydi .

Tugmalar ustidagi ko'rsatkichlar

role="button"Qayta yuklash standart kursorni ga o'zgartirish uchun yaxshilanishni o'z ichiga oladi pointer. Elementlarning interaktivligini ko'rsatish uchun ushbu atributni elementlarga qo'shing. Bu rol <button>o'z cursoro'zgarishiga ega bo'lgan elementlar uchun kerak emas.

Tugma bo'lmagan element tugmasi

<span role="button" tabindex="0">Non-button element button</span>

Turli elementlar

Manzil

Element <address>brauzerning standart sozlamalarini dan ga tiklash font-styleuchun italicyangilanadi normal. line-heightham endi meros qilib olingan va margin-bottom: 1remqo'shilgan. <address>s eng yaqin ajdod (yoki butun ish) uchun aloqa ma'lumotlarini taqdim etish uchundir. Satrlarni bilan tugatish orqali formatlashni saqlang <br>.

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

Toʻliq ism
[email protected]

Blok tirnoq

Blok qo'shtirnoqlardagi sukut marginbo'yicha 1em 40px, shuning uchun biz uni 0 0 1remboshqa elementlarga mos keladigan narsaga qaytaramiz.

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir

Inline elementlar

Element <abbr>paragraf matni orasida ajralib turishi uchun asosiy uslubni oladi.

HTML qisqartmasi elementi .

Xulosa

Xulosa bo'yicha sukut cursorbo'yicha text, shuning uchun pointeruni bosish orqali element bilan o'zaro aloqa qilish mumkinligini bildirish uchun uni qayta o'rnatamiz.

Ba'zi tafsilotlar

Tafsilotlar haqida ko'proq ma'lumot.

Yana batafsilroq

Bu erda tafsilotlar haqida ko'proq ma'lumot mavjud.

HTML5 `[hidden]`atributi

HTML5 yangi global[hidden] atributni qo'shadi , u odatiy tarzda yaratilgan display: none. PureCSS - dan g'oyani olib , biz uni tasodifan bekor [hidden] { display: none !important; }qilinishining oldini olish uchun ushbu standartni yaxshilaymiz .display

<input type="text" hidden>

jQuery nomuvofiqligi

[hidden]$(...).hide()jQuery va $(...).show()usullari bilan mos kelmaydi . Shuning uchun, biz hozirda elementlarni [hidden]boshqarishning boshqa usullarini qo'llab-quvvatlamaymiz.display

Elementning ko'rinishini o'zgartirish uchun, ya'ni u displayo'zgartirilmagan va element hujjat oqimiga ta'sir qilishi mumkin, buning o'rniga .invisiblesinfdan foydalaning .

Qayta ishga tushirish

Yondashuv

CSS o'zgaruvchilari

Sahifaning standart sozlamalari

Mahalliy shrift to'plami

CSS o'zgaruvchilari

Sarlavhalar va paragraflar

Ro'yxatlar

Inline kod

Kod bloklari

O'zgaruvchilar

Foydalanuvchi kiritish

Chiqish namunasi

Jadvallar

Shakllar

Sana va rang kiritishni qo'llab-quvvatlash

Tugmalar ustidagi ko'rsatkichlar

Turli elementlar

Manzil

Blok tirnoq

Inline elementlar

Xulosa

HTML5 [hidden]atributi

jQuery nomuvofiqligi

HTML5 `[hidden]`atributi