in English

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.

Bu sahypada

Ç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

CSS üýtgeýjileri

V5.2.0 goşuldy

V5.1.1 bilen, @importgoşmak üçin ähli CSS bukjalarymyzda (şol sanda bootstrap.css, bootstrap-reboot.csswe bootstrap-grid.css) talap edilýän zatlary standartlaşdyrdyk _root.scss. :rootBu bukjada näçeräk ulanylýandygyna garamazdan, ähli bukjalara derejeli CSS üýtgeýjileri goşýar . Netijede, “Bootstrap 5” , Sass-y hemişe täzeden düzmegiň zerurlygy bolmazdan has hakyky wagtda özleşdirmegi üpjün etmek üçin wagtyň geçmegi bilen has köp CSS üýtgeýjisini görmäge dowam eder . Biziň çemeleşmämiz, Sass üýtgeýjilerimizi almak we olary CSS üýtgeýjilerine öwürmek. Şeýlelik bilen, CSS üýtgeýjileri ulanmasaňyzam, Sass-yň ähli güýji bar. Bu henizem dowam edýär we doly durmuşa geçirmek üçin wagt gerek bolar.

Mysal üçin, umumy stil :rootüçin bu CSS üýtgeýjileri göz öňünde tutuň:<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Iş ýüzünde şol üýtgeýjiler soňra Reboot-da şeýle ulanylýar:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Islän wagtyňyz hakyky wagtda özleşdirmäge mümkinçilik berýär:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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 elementler , ş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>Bu brauzeriň deslapky $font-size-rootüýtgeýjisini üýtgetmek arkaly ýok edilip bilner.
Şeýle hem , <body>global font-family, we . Bu şriftiň gabat gelmezliginiň öňüni almak üçin käbir forma elementleri bilen miras galypdyr.font-weightline-heightcolor
Howpsuzlyk üçin, <body>yglan edilen background-color, ýerine ýetirilmedik #fff.

Frli şrift ýygyndysy

“Bootstrap” her enjamda we operasiýa ulgamynda optimal tekst görkezmek üçin “ýerli şrift ýygyndysyny” ýa-da “ulgam şrift ýygyndysyny” ulanýar. Bu ulgam şriftleri, häzirki zaman enjamlaryny göz öňünde tutup, ekranlarda gowulaşmagy, üýtgeýän şrift goldawyny we başgalary göz öňünde tutup döredildi. “Smashing” Magazineurnalynyň makalasynda ýerli şrift ýazgylary barada has giňişleýin okaň .

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Şriftiň düzüminde emoji şriftleri barlygy 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 colorstiline 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-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

Gorizontal düzgünler

<hr>Element ýönekeýleşdirildi . Brauzeriň deslapky görnüşlerine meňzeş <hr>görnüşde s-ler düzülýär border-top, deslapky bolýar opacity: .25we awtomatiki usulda miras alýar, şol sanda ene-atanyň üsti bilen border-colorgurlanda . Olary tekst, serhet we aç-açanlyk hyzmatlary bilen üýtgedip bolýar.colorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Sanawlar

Listhli sanawlar - <ul>, <ol>we <dl>- margin-topaýryldy we a margin-bottom: 1rem. Içerki sanawlarda ýok margin-bottom. padding-leftŞeýle hem , elementleri <ul>we elementleri täzeden düzdük <ol>.

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-leftwe 0goş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

Giriş kody

Koduň içerki böleklerini örtüň <code>. HTML burçly ýaýdan gaçmagy unutmaň.

Mysal üçin, <section>içerki görnüşde örtülmeli.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kod bloklary

<pre>Birnäçe setir kod üçin s ulanyň . Dogry görkezmek üçin koddaky islendik burç ýaýdan gaçmagy unutmaň. <pre>Element ony aýyrmak we birlikleri margin-topulanmak üçin täzeden düzüldi .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Üýtgeýjiler

Üýtgeýjileri görkezmek üçin <var>belligi ulanyň.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Ulanyjy giriş

<kbd>Adatça klawiatura arkaly girizilýän girişi görkezmek üçin ulanyň .

Kataloglary üýtgetmek üçin cd, katalogyň adyny ýazyň.
Sazlamalary redaktirlemek üçin basyň ctrl + ,

html

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>

Mysal üçin çykyş

Programmadan nusga çykyşyny görkezmek üçin <samp>belligi ulanyň.

Bu tekst, kompýuter programmasynyň nusga çykyşy hökmünde garalýar.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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>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”.
<button>s we <input>düwme elementleri cursor: pointerhaçan bolýar :not(:disabled).

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

Mysal rowaýaty

Mysal üçin giriş

Mysal üçin e-poçta

Mysal üçin telefon

Mysal url

Mysal belgisi

Mysal gözlegi

Mysal aralygy

Faýl girişiniň mysaly

Mysal saýlaň

Bu bellik gutusyny belläň

Birinji wariant şu we şu Ikinji wariant, bu ajaýyp forma dolandyryşlarynyň örtügini görkezmek üçin gaty uzyn bir zat. Üçünji wariant ýapyk

Mysal üçin tekst

Mysal senesi

Mysal wagty

Mysal paroly

Mysal üçin ýerli wagt

Mysal hepdesi

Mysal aýy

Mysal reňki

Mysal çykyşy 100

Sene we reňk giriş goldawy

Sene girişlerini Safari ýaly ähli brauzerler doly goldamaýandygyny ýadyňyzdan çykarmaň.

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.

Düwme däl element düwmesi

html

<span role="button" tabindex="0">Non-button element button</span>

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

Blokot elementinde bar bolan belli sitata.

Çeşme ady bilen meşhur biri

Çyzgy elementleri

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

HTML gysgaltma elementi .

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 ýazylmazlygynyň [hidden] { display: none !important; }öňüni almak üçin bu tertipde displaygowulaşýarys.

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

Gaýtadan açyň

Çemeleşme

CSS üýtgeýjileri

Sahypanyň tertibi

Frli şrift ýygyndysy

Sözbaşylar we abzaslar

Gorizontal düzgünler

Sanawlar

Giriş kody

Kod bloklary

Üýtgeýjiler

Ulanyjy giriş

Mysal üçin çykyş

Tablisa

Formalar

Sene we reňk giriş goldawy

Düwmelerdäki görkezijiler

Dürli elementler

Salgysy

Blok

Çyzgy elementleri

Gysgaça mazmun

HTML5 [hidden]atributy

jQuery gabat gelmezlik

HTML5 `[hidden]`atributy