Gaýtadan açyň
“Reboot”, bir faýlda elementlere mahsus CSS üýtgeşmeleriniň ýygyndysy, gurmak üçin ajaýyp, yzygiderli we ýönekeý binýady üpjün etmek üçin “Bootstrap” kickstart.
Çemeleşme
Gaýtadan açmak, köp elementleri diňe element saýlaýjylaryny ulanyp, birneme pikirlenýän stiller bilen üpjün edip, Normalize esaslanýar. Goşmaça stil diňe sapaklar bilen edilýär. Mysal üçin, <table>
has ýönekeý esas üçin käbir stilleri täzeden açýarys, soň bolsa üpjün .table
edýäris .table-bordered
we başgalar.
“Reboot” -da nämäni ýok etmelidigini saýlamagyň görkezmeleri we sebäpleri:
- Giňeldilip bilinýän komponent aralygy üçin
rem
s ýerine derek s ulanmak üçin käbir brauzer standart bahalaryny täzeläň .em
- Saklan
margin-top
. Dik çyzyklar garaşylmadyk netijeleri berip, çöküp biler. Has möhümi, bir ugurmargin
has ýönekeý akyl nusgasydyr. - Enjamyň ululyklaryny has aňsatlaşdyrmak üçin blok elementleri
rem
s üçinmargin
s ulanmalydyr. - Mümkin boldugyça
font
ulanyp, baglanyşykly häsiýetleriň deklarasiýalaryny iň az derejede saklaň .inherit
Sahypanyň tertibi
Sahypa giňişligindäki has oňat tertipleri üpjün etmek üçin elementler <html>
we <body>
elementler täzelenýär. Has takygy:
- Bütin
box-sizing
dünýäde her element , şol sanda*::before
we . Bu, elementiň yglan edilen giňliginiň padding ýa-da serhet sebäpli hiç haçan geçmezligini üpjün edýär.*::after
border-box
- Hiç hili esas
font-size
yglan edilmeýär<html>
, ýöne16px
çak edilýär (brauzer deslapky). Ulanyjylaryň isleglerine hormat goýmak we has elýeterli çemeleşmäni üpjün etmek bilen, media soraglarynyň üsti bilen aňsat jogap görnüşini ulaltmak üçinfont-size: 1rem
ulanylýar .<body>
- Şeýle hem ,
<body>
global we . Bu şriftiň gabat gelmezliginiň öňüni almak üçin käbir forma elementleri bilen miras galypdyr.font-family
line-height
text-align
- Howpsuzlyk üçin,
<body>
yglan edilenbackground-color
, ýerine ýetirilmedik#fff
.
Frli şrift ýygyndysy
Adaty web şriftleri (Helvetica Neue, Helvetica we Arial) Bootstrap 4-de taşlandy we her enjamda we operasiýa ulgamynda optimal tekst görkezilmegi üçin “ýerli şrift ýygyndysy” bilen çalşyryldy. “Smashing” Magazineurnalynyň makalasynda ýerli şrift ýazgylary barada has giňişleýin okaň .
$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;
Şrift toplumynda emoji şriftleri öz içine alýandygy sebäpli, köp sanly nyşan / dingbat icunikod nyşanlary köp reňkli piktograf hökmünde görkeziler. Daş keşbi, brauzeriň / platformanyň ýerli emoji şriftinde ulanylýan stile baglylykda üýtgeýär we hiç hili CSS color
stiline täsir etmez.
Bu font-family
, “ <body>
Bootstrap” -da bütin dünýäde awtomatiki miras galanlara degişlidir. Globalhliumumy üýtgetmek üçin “ Bootstrap ” -y font-family
täzeläň we täzeden düzüň.$font-family-base
Sözbaşylar we abzaslar
<h1>
Headhli sözbaşy elementleri, meselem, aýrylmagy <p>
üçin täzeden düzülýär . Easyeňil aralyk üçin margin-top
sözbaşylar margin-bottom: .5rem
we abzaslar goşuldy .margin-bottom: 1rem
Sözbaşy | Mysal |
---|---|
<h1></h1> |
h1. Bootstrap sözbaşy |
<h2></h2> |
h2. Bootstrap sözbaşy |
<h3></h3> |
h3. Bootstrap sözbaşy |
<h4></h4> |
h4. Bootstrap sözbaşy |
<h5></h5> |
h5. Bootstrap sözbaşy |
<h6></h6> |
h6. Bootstrap sözbaşy |
Sanawlar
Listhli sanawlar - <ul>
, <ol>
we <dl>
- margin-top
aýryldy we a margin-bottom: 1rem
. Içerki sanawlarda ýok margin-bottom
.
- Listhli sanawlaryň ýokarky aralygy aýryldy
- Olaryň aşaky aralygy kadalaşdy
- Içerki sanawlaryň aşaky aralygy ýok
- Şeýlelik bilen olaryň has-da daşky görnüşi bar
- Esasanam has köp sanaw elementleri yzarlananda
- Çep gaplama hem täzeden düzüldi
- Ine sargyt edilen sanaw
- Birnäçe sanaw elementleri bilen
- Umumy görnüşi birmeňzeş
- Öňki tertipsiz sanaw hökmünde
Has ýönekeý dizaýn, arassa iýerarhiýa we has gowy aralyk üçin düşündiriş sanawlary täzelendi margin
. <dd>
täzeden düzmek margin-left
we 0
goşmak margin-bottom: .5rem
. <dt>
s goýy _
- Düşündiriş sanawlary
- Düşündiriş sanawy terminleri kesgitlemek üçin ajaýyp.
- Möhleti
- Termin üçin kesgitleme
- Şol termin üçin ikinji kesgitleme.
- Başga bir termin
- Bu beýleki termin üçin kesgitleme
Formatlanan tekst
<pre>
Element ony aýyrmak we birlikleri margin-top
ulanmak üçin täzeden düzüldi .rem
margin-bottom
.example-element { margin-bottom: 1rem; }
Tablisa
Tablisalar s stiline azajyk sazlanýar <caption>
, serhetleri ýykýar we tutuşlygyna yzygiderli bolmagyny üpjün edýär text-align
. Serhetler, padding we başgalar üçin goşmaça üýtgeşmeler synp bilen gelýär.table
.
Tablisanyň sözbaşy | Tablisanyň sözbaşy | Tablisanyň sözbaşy | Tablisanyň sözbaşy |
---|---|---|---|
Stol öýjügi | Stol öýjügi | Stol öýjügi | Stol öýjügi |
Stol öýjügi | Stol öýjügi | Stol öýjügi | Stol öýjügi |
Stol öýjügi | Stol öýjügi | Stol öýjügi | Stol öýjügi |
Formalar
Has ýönekeý esas stilleri üçin dürli forma elementleri gaýtadan açyldy. Ine, iň görnükli üýtgeşmeler:
<fieldset>
s-de serhetler, padding ýa-da margin ýok, şonuň üçin aýratyn girişler ýa-da giriş toparlary üçin aňsatlyk bilen ulanylyp bilner.<legend>
meýdanlar ýaly, görnüşleriň sözbaşy hökmünde görkezilmegi üçin gaýtadan işledildi.<label>
ulanylmagynadisplay: inline-block
rugsatmargin
bermeli.<input>
s,<select>
s,<textarea>
s we<button>
s esasan “Normalize” tarapyndan ýüzlenýär, ýöne “Reboot” hem olaryňmargin
toplumlaryny aýyrýarline-height: inherit
.<textarea>
lar diňe dikligine üýtgedilip bilner, sebäbi gorizontal ölçeg köplenç sahypanyň ýerleşişini “döwýär”.<button>
s we<input>
düwme elementlericursor: pointer
haçan bolýar:not(:disabled)
.
Bu üýtgeşmeler we başgalar aşakda görkezilýär.
Düwmelerdäki görkezijiler
Gaýtadan role="button"
açmak, esasy kursory üýtgetmek üçin goşmaça enjamy öz içine alýar pointer
. Elementleriň interaktiwdigini görkezmek üçin bu häsiýeti elementlere goşuň. Bu rol <button>
öz cursor
üýtgemelerini alýan elementler üçin zerur däl.
<span role="button" tabindex="0">Non-button element button</span>
Dürli elementler
Salgysy
<address>
Element, brauzeriň deslapky font-style
görnüşini italic
täzeden düzmek üçin täzelenýär normal
. line-height
indi miras galypdyr we margin-bottom: 1rem
goşuldy. <address>
s iň ýakyn ata-baba (ýa-da tutuş bir iş) üçin aragatnaşyk maglumatlary hödürlemek üçin. Setirleri gutaryp formatirlemäni saklaň <br>
.
1355 Market St, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890 Doly ady
[email protected]
Blok
margin
Bloknotlardaky başlangyç , şonuň üçin beýleki elementlere has laýyk bir zat üçin 1em 40px
täzeden düzýäris.0 0 1rem
Blokot elementinde bar bolan belli sitata.
Çyzgy elementleri
Element , <abbr>
abzas tekstiniň arasynda tapawutlanmak üçin esasy stil alýar.
Gysgaça mazmun
Gysgaça cursor
mazmun text
, şonuň pointer
üçin elementiň üstüne basyp täsir edip boljakdygyny habar bermek üçin täzeden düzýäris.
Käbir jikme-jiklikler
Jikme-jiklikler barada has giňişleýin maglumat.
Has giňişleýin maglumat
Jikme-jiklikler barada has giňişleýin maglumat.
HTML5 [hidden]
atributy
HTML5 , adaty görnüşde düzülen täze global atribut[hidden]
display: none
goşýar . PureCSS - den bir ideýa karz alsak, tötänleýin ýazylmazlygynyň [hidden] { display: none !important; }
öňüni almak üçin bu tertipde display
gowulaşýarys. [hidden]
IE10 tarapyndan aslynda goldanylmasa-da, CSS-de aç-açan beýannama bu meseläni çözýär .
<input type="text" hidden>
jQuery gabat gelmezlik
[hidden]
$(...).hide()
jQuery we $(...).show()
usullary bilen gabat gelmeýär . Şonuň üçin häzirki wagtda elementleriň elementlerini [hidden]
dolandyrmak üçin beýleki usullary display
goldamaýarys.
Diňe bir elementiň görnükliligini üýtgetmek üçin, display
üýtgedilmedi we element resminamanyň akymyna täsir edip biler, ýerine .invisible
synpy ulanyň .