Source

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 .tableedýäris .table-borderedwe başgalar.

“Reboot” -da nämäni ýok etmelidigini saýlamagyň görkezmeleri we sebäpleri:

  • Giňeldilip bilinýän komponent aralygy üçin rems ý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 ugur marginhas ýönekeý akyl nusgasydyr.
  • Enjamyň ululyklaryny has aňsatlaşdyrmak üçin blok elementleri rems üçin margins ulanmalydyr.
  • Mümkin boldugyça fontulanyp, 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-sizingdünýäde her element , şol sanda *::beforewe . Bu, elementiň yglan edilen giňliginiň padding ýa-da serhet sebäpli hiç haçan geçmezligini üpjün edýär. *::afterborder-box
    • Hiç hili esas font-sizeyglan edilmeýär <html>, ýöne 16pxç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 üçin font-size: 1remulanylýar .<body>
  • Şeýle hem , <body>global we . Bu şriftiň gabat gelmezliginiň öňüni almak üçin käbir forma elementleri bilen miras galypdyr.font-familyline-heighttext-align
  • Howpsuzlyk üçin, <body>yglan edilen background-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 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 font-family, “ <body>Bootstrap” -da bütin dünýäde awtomatiki miras galanlara degişlidir. Globalhliumumy üýtgetmek üçin “ Bootstrap ” -y font-familytä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-topsözbaşylar margin-bottom: .5remwe 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-topaýryldy we a margin-bottom: 1rem. Içerki sanawlarda ýok margin-bottom.

  • Lorem ipsum dolor amet otur
  • Consectetur adipiscing elit
  • Massa-da bitewi molestie lorem
  • Pretium nisl aliketinde ýeňilleşdirme
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Ene oturylyşygy
  • Porttitor loremini alyň
  1. Lorem ipsum dolor amet otur
  2. Consectetur adipiscing elit
  3. Massa-da bitewi molestie lorem
  4. Pretium nisl aliketinde ýeňilleşdirme
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Ene oturylyşygy
  8. Porttitor loremini alyň

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-leftwe 0goşmak margin-bottom: .5rem. <dt>s goýy _

Düşündiriş sanawlary
Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit metus-da mi porta gravida.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.

Formatlanan tekst

<pre>Element ony aýyrmak we birlikleri margin-topulanmak üçin täzeden düzüldi .remmargin-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 .

Bu mysal tablisasy we mazmuny suratlandyrmak üçin ýazgy.
Stol sözbaşy Stol sözbaşy Stol sözbaşy Stol 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>s, meýdan meýdançalary ýaly, görnüşleriň sözbaşy hökmünde görkezilmegi üçin gaýtadan işledildi.
  • <label>ulanylmagyna display: inline-blockrugsat marginbermeli.
  • <input>s, <select>s, <textarea>s we <button>s esasan “Normalize” tarapyndan ýüzlenýär, ýöne “Reboot” hem olaryň margintoplumlaryny aýyrýar line-height: inherit.
  • <textarea>lar diňe dikligine üýtgedilip bilner, sebäbi gorizontal ölçeg köplenç sahypanyň ýerleşişini “döwýär”.

Bu üýtgeşmeler we başgalar aşakda görkezilýär.

Mysal rowaýaty

100

Dürli elementler

Salgysy

<address>Element, brauzeriň deslapky font-stylegörnüşini italictäzeden düzmek üçin täzelenýär normal. line-heightindi miras galypdyr we margin-bottom: 1remgoş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>.

Twitter, Inc.
1355 Market St, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890
Doly ady
[email protected]

Blok

marginBloknotlardaky başlangyç , şonuň üçin beýleki elementlere has laýyk bir zat üçin 1em 40pxtäzeden düzýäris.0 0 1rem

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

Çyzgy elementleri

Element , <abbr>abzas tekstiniň arasynda tapawutlanmak üçin esasy stil alýar.

“ Nulla attre vitae elit libero”, “pharetra augue”.

Gysgaça mazmun

Gysgaça cursormazmun 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 [hidden] { display: none !important; }ýok edilmeginiň öňüni almaga kömek edip, bu tertipde displaygowulaşý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 displaygoldamaýarys.

Diňe bir elementiň görnükliligini üýtgetmek üçin, displayüýtgedilmedi we element resminamanyň akymyna täsir edip biler, ýerine .invisiblesynpy ulanyň .