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.

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

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.
Shuningdek <body>, global font-family, line-heightva ni o'rnatadi text-align. 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.

Native shrift to'plami

Standart veb-shriftlar (Helvetica Neue, Helvetica va Arial) Bootstrap 4-da o'chirildi va har bir qurilma va operatsion tizimda matnni optimal ko'rsatish uchun "mahalliy shriftlar to'plami" bilan almashtirildi. Ushbu Smashing Magazine maqolasida mahalliy shrift to'plamlari haqida ko'proq o'qing .

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

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 qoʻllanilgan 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

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.

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.

Oldindan formatlangan matn

Elementni <pre>olib tashlash uchun qayta o'rnatiladi va uning uchun birliklardan margin-topfoydalaning .remmargin-bottom

.misol elementi {
  pastki chet: 1 rem;
}

Jadvallar

Jadvallar s uslubiga biroz moslashtiriladi <caption>, chegaralarni yig'adi va text-alignbutun bo'ylab izchil 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 tasvirlash 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.

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

Brauzerning standart sozlamalarini dan boshlab tiklash uchun <address>element yangilanadi . ham endi meros qilib olingan va qo'shilgan. s eng yaqin ajdod (yoki butun ish) uchun aloqa ma'lumotlarini taqdim etish uchun mo'ljallangan. Satrlarni bilan tugatish orqali formatlashni saqlang .font-styleitalicnormalline-heightmargin-bottom: 1rem<address><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.

Nulla attr vitae elit libero, a pharetra augue.

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 batafsil ma'lumot.

Yana batafsilroq

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

HTML5 `[hidden]`atributi

HTML5 yangi global[hidden] atributni qo'shadi , u display: nonesukut bo'yicha yaratilgan. PureCSS - dan g'oyani olib , biz uni tasodifan bekor [hidden] { display: none !important; }qilinishining oldini olish uchun ushbu standartni yaxshilaymiz . displayIE10 [hidden]tomonidan qo'llab-quvvatlanmasa ham, bizning CSS-dagi aniq deklaratsiya bu muammoni hal qiladi.

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