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 .table
etamiz .table-bordered
.
Qayta ishga tushirishda nimani bekor qilishni tanlash bo'yicha ko'rsatmalarimiz va sabablarimiz:
- Kengaytiriladigan komponentlar oraligʻida
rem
s 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'nalishimargin
oddiy aqliy modeldir. - Qurilma o‘lchamlari bo‘yicha oson masshtablash uchun blok elementlari
rem
s uchunmargin
s 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-sizing
miqyosda har bir elementga o'rnatiladi, jumladan*::before
va*::after
, toborder-box
. Bu elementning e'lon qilingan kengligi to'ldirish yoki chegara tufayli hech qachon oshib ketmasligini ta'minlaydi. - da hech qanday baza
font-size
e'lon qilinmaydi<html>
, lekin16px
qabul qilinadi (brauzerning sukut bo'yicha).font-size: 1rem
media 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>
, globalfont-family
,line-height
va ni o'rnataditext-align
. Bu shrift nomuvofiqligini oldini olish uchun keyinchalik ba'zi shakl elementlari tomonidan meros qilib olinadi. - Xavfsizlik
<body>
uchun e'lon qilinganbackground-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 color
uslublari taʼsir qilmaydi.
Bu butun Bootstrap-ga avtomatik ravishda font-family
qo'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-top
olib tashlash uchun qayta o'rnatiladi. Sarlavhalar margin-bottom: .5rem
va paragraflar margin-bottom: 1rem
orasidagi 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-top
oʻ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-left
qo'shing . s qalinlashgan .0
margin-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-top
foydalaning .rem
margin-bottom
.misol elementi { pastki chet: 1 rem; }
Jadvallar
Jadvallar s uslubiga biroz moslashtiriladi <caption>
, chegaralarni yig'adi va text-align
butun bo'ylab izchil bo'lishini ta'minlaydi. Chegaralar, toʻldirish va boshqalar uchun qoʻshimcha oʻzgarishlar sinf bilan birga.table
keladi .
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'llanilishigadisplay: inline-block
ruxsat berish uchun o'rnatiladimargin
.<input>
s,<select>
s,<textarea>
s va<button>
s ga asosan Normalize tomonidan murojaat qilinadi, lekin Reboot ularnimargin
va o'rnatishlarniline-height: inherit
ham 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 elementlaricursor: pointer
qachon 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 cursor
o'zgarishiga ega bo'lgan elementlar uchun kerak emas.
<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-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San-Fransisko, CA 94103
P: (123) 456-7890 Toʻliq ism
[email protected]
Blok tirnoq
Blok qo'shtirnoqlardagi sukut margin
bo'yicha 1em 40px
, shuning uchun biz uni 0 0 1rem
boshqa elementlarga mos keladigan narsaga qaytaramiz.
Blok tirnoq elementida joylashgan taniqli iqtibos.
Inline elementlar
Element <abbr>
paragraf matni orasida ajralib turishi uchun asosiy uslubni oladi.
Xulosa
Xulosa bo'yicha sukut cursor
bo'yicha text
, shuning uchun pointer
uni 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: none
sukut bo'yicha yaratilgan. PureCSS - dan g'oyani olib , biz uni tasodifan bekor [hidden] { display: none !important; }
qilinishining oldini olish uchun ushbu standartni yaxshilaymiz . display
IE10 [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 display
o'zgartirilmagan va element hujjat oqimiga ta'sir qilishi mumkin, buning o'rniga .invisible
sinfdan foydalaning .