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.

Mahalliy 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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massada butun son molestie lorem
Pretium nisl aliquetdagi facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- To'g'ri keling
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massada butun son molestie lorem
Pretium nisl aliquetdagi facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida va eget metus.
Malesuada porti: Etiam porta sem malesuada magna mollis euismod.

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

Ushbu o'zgarishlar va boshqalar quyida ko'rsatilgan.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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