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. Ushbu brauzer standarti o'zgaruvchini o'zgartirish orqali bekor qilinishi mumkin$font-size-root
.
- da hech qanday baza
- Shuningdek
<body>
, globalfont-family
,font-weight
,line-height
va ni o'rnatadicolor
. 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
.
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 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
. Shuningdek, biz padding-left
on <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-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.
Inline kod
Kodning ichki qismlarini bilan o'rab oling <code>
. HTML burchakli qavslardan qochishingizga ishonch hosil qiling.
<section>
inline sifatida o'ralgan bo'lishi kerak.
For example, <code><section></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-top
foydalaning .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
O'zgaruvchilar
O'zgaruvchilarni ko'rsatish uchun <var>
tegdan foydalaning.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Foydalanuvchi kiritish
<kbd>
Odatda klaviatura orqali kiritiladigan kiritishni ko'rsatish uchun foydalaning .
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.
<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-align
butun davomida bir xil 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.
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 cursor
o'zgarishiga ega bo'lgan elementlar uchun kerak emas.
<span role="button" tabindex="0">Non-button element button</span>
Turli elementlar
Manzil
Element <address>
brauzerning standart sozlamalarini dan ga tiklash font-style
uchun italic
yangilanadi normal
. line-height
ham endi meros qilib olingan va margin-bottom: 1rem
qo'shilgan. <address>
s eng yaqin ajdod (yoki butun ish) uchun aloqa ma'lumotlarini taqdim etish uchundir. Satrlarni bilan tugatish orqali formatlashni saqlang <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.
Manba sarlavhasida mashhur kimdir
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 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 display
o'zgartirilmagan va element hujjat oqimiga ta'sir qilishi mumkin, buning o'rniga .invisible
sinfdan foydalaning .