Yambitsaninso

Yambitsaninso, zosonkhanitsira zosintha za CSS mu fayilo imodzi, kickstart Bootstrap kuti mupereke maziko abwino, osasinthika, komanso osavuta kuti mumangepo.

Patsamba ili

Njira

Yambitsaninso kumangirira pa Normalize, ndikupereka zinthu zambiri za HTML zokhala ndi masitaelo ongogwiritsa ntchito zosankha zokhazokha. Kukongoletsa kowonjezera kumachitika kokha ndi makalasi. Mwachitsanzo, timayambitsanso <table>masitayelo ena kuti akhale osavuta ndikupereka .table, .table-bordered, ndi zina.

Nawa maupangiri athu ndi zifukwa zosankhira zomwe mungasinthe mu Reboot:

Sinthani zina zosasinthika za msakatuli kuti mugwiritse ntchito rems m'malo mwa ems pakukula kwa magawo.
Pewani margin-top. Mitsempha yoyimirira imatha kugwa, kutulutsa zotsatira zosayembekezereka. Chofunika kwambiri, njira imodzi yokha marginndi chitsanzo chosavuta chamalingaliro.
Kuti muwonjezeko mosavuta kukula kwa chipangizocho, ma block element akuyenera kugwiritsa ntchito rems pa margins.
Chepetsani fontzidziwitso za katundu wokhudzana ndi zinthu zochepa, pogwiritsa ntchito inheritngati kuli kotheka.

Zosintha za CSS

Yowonjezedwa mu v5.2.0

Ndi v5.1.1, tidalinganiza ma s athu ofunikira pamapaketi athu @importonse a CSS (kuphatikiza bootstrap.css, bootstrap-reboot.css, ndi bootstrap-grid.css) kuphatikiza _root.scss. Izi zimawonjezera :rootmasinthidwe a CSS pamitolo yonse, mosasamala kanthu kuti ndi angati omwe amagwiritsidwa ntchito pagululo. Pamapeto pake Bootstrap 5 ipitilira kuwona zosintha zambiri za CSS zikuwonjezeredwa pakapita nthawi, kuti apereke makonda anthawi yeniyeni popanda kufunika kobwezeranso Sass. Njira yathu ndikutenga mitundu yathu ya Sass ndikusintha kukhala mitundu ya CSS. Mwanjira imeneyo, ngakhale simugwiritsa ntchito zosintha za CSS, muli ndi mphamvu zonse za Sass. Izi zikadali mkati ndipo zitenga nthawi kuti zitheke.

Mwachitsanzo, taganizirani izi :rootzamitundu yosiyanasiyana ya CSS pamasitayelo wamba <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};

M'malo mwake, zosinthazo zimayikidwa mu Reboot motere:

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
}

Zomwe zimakupatsani mwayi wopanga makonda munthawi yeniyeni momwe mungakonde:

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

Zosasintha zamasamba

Zosintha <html>ndi <body>zinthu zimasinthidwa kuti zipereke zosasintha zapatsamba lonse. Makamaka:

The box-sizingimayikidwa padziko lonse lapansi pazinthu zonse-kuphatikiza *::beforendi *::after, mpaka border-box. Izi zimatsimikizira kuti m'lifupi mwazinthu zomwe zalengezedwa sizidutsa chifukwa cha padding kapena malire.
- Palibe maziko omwe font-sizeadalengezedwa pa <html>, koma 16pxamaganiziridwa (osatsegula osasintha). font-size: 1remikugwiritsidwa ntchito <body>pakusintha mtundu wosavuta kuyankha kudzera pamafunso apawailesi yakanema ndikulemekeza zomwe amakonda komanso kuwonetsetsa kuti njira yofikirako ikupezeka. Kusasinthika kwa msakatuliwu kumatha kuchotsedwa posintha $font-size-rootkusintha.
The <body>imayikanso zapadziko lonse lapansi font-family, font-weight, line-height, ndi color. Izi zimatengera pambuyo pake ndi mawonekedwe ena kuti aletse kusagwirizana kwa zilembo.
Kwa chitetezo, <body>adalengeza background-colorkuti #fff.

Mafonti achilengedwe

Bootstrap imagwiritsa ntchito "zolemba zamtundu wamba" kapena "mawonekedwe amtundu" kuti azitha kumasulira bwino pazida zilizonse ndi OS. Mafonti amakasitomalawa adapangidwa makamaka poganizira zida zamasiku ano, ndikumasuliridwa bwino pazithunzi, chithandizo chamitundu yosiyanasiyana, ndi zina zambiri. Werengani zambiri za masanjidwe a zilembo m'nkhani iyi ya Smashing Magazine .

$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;

Dziwani kuti chifukwa ma fonti akuphatikizanso zilembo za emoji, zilembo zambiri zodziwika bwino za zilembo za Unicode/dingbat ziziwonetsedwa ngati zithunzi zamitundumitundu. Maonekedwe awo amasiyana, kutengera ndi kalembedwe ka emoji msakatuli / nsanja, ndipo sangakhudzidwe ndi colormasitayilo aliwonse a CSS.

Izi font-familyzimagwiritsidwa ntchito ku <body>cholowa chapadziko lonse lapansi mu Bootstrap. Kuti musinthe zapadziko lonse lapansi font-family, sinthani $font-family-basendikuwonjezeranso Bootstrap.

Mitu ndi ndime

Zinthu zonse zamutu-mwachitsanzo, <h1>-ndipo <p>zimakonzedwanso kuti margin-topzichotsedwe. Mitu margin-bottom: .5remyawonjezedwa ndi ndime margin-bottom: 1remkuti muzitalikirana mosavuta.

Mutu	Chitsanzo
`<h1></h1>`	h1 ndi. Mutu wa bootstrap
`<h2></h2>`	h2 ndi. Mutu wa bootstrap
`<h3></h3>`	h3 ndi. Mutu wa bootstrap
`<h4></h4>`	h4 ndi. Mutu wa bootstrap
`<h5></h5>`	h5 ndi. Mutu wa bootstrap
`<h6></h6>`	h6 ndi. Mutu wa bootstrap

Malamulo opingasa

Chinthucho <hr>chaphweka. Zofanana ndi zosasintha za msakatuli, <hr>s amasinthidwa kudzera pa border-top, amakhala ndi zosintha opacity: .25, ndipo amangolandira okha border-colorkudzera pa color, kuphatikizapo nthawi coloryomwe amakhazikitsidwa kudzera mwa kholo. Atha kusinthidwa ndi zolemba, malire, ndi mawonekedwe opacity.

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

Mndandanda

Mindanda yonse— <ul>, <ol>, ndi <dl>— margin-topyachotsedwa ndi margin-bottom: 1rem. Minda yosungidwa ilibe margin-bottom. Takhazikitsanso zoyatsa padding-leftndi <ul>ma <ol>element.

Mindandanda yonse ili ndi malire ake apamwamba achotsedwa
Ndipo malire awo pansi adakhazikika
Minda yosungidwa ilibe malire apansi
- Mwanjira iyi amakhala ndi mawonekedwe ochulukirapo
- Makamaka zikatsatiridwa ndi zinthu zambiri zamndandanda
Padding yakumanzere yakhazikitsidwanso

Nawu mndandanda wolamulidwa
Ndi zinthu zingapo mndandanda
Ili ndi mawonekedwe ofanana onse
Monga mndandanda wapita wosayitanidwa

Pamakongoletsedwe osavuta, maulamuliro omveka bwino, ndi masitayilo abwinoko, mindandanda yofotokozera yasinthidwa ma margins. <dd>s bwererani margin-leftndi 0kuwonjezera margin-bottom: .5rem. <dt>s ndi olimba mtima .

Mndandanda wamafotokozedwe: Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Nthawi: Tanthauzo la mawuwa.; Tanthauzo lachiwiri la mawu omwewo.
Nthawi ina: Tanthauzo la liwu lina ili.

Inline kodi

Manga zilembo zam'munsi zamakhodi ndi <code>. Onetsetsani kuti mwathawa mabulaketi a HTML.

Mwachitsanzo, <section>iyenera kukulungidwa ngati inline.

html

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

Kodi midadada

Gwiritsani ntchito <pre>s pamizere ingapo yamakhodi. Apanso, onetsetsani kuti mwathawa mabulaketi aliwonse mu code kuti mumasulire bwino. Chinthucho <pre>chimakonzedwanso kuti chichotse margin-topndikugwiritsa ntchito remmayunitsi ake margin-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>

Zosintha

Kuti muwonetse zosinthika gwiritsani ntchito <var>tag.

y = mx + b _

html

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

Zolemba za ogwiritsa

Gwiritsani ntchito <kbd>kuwonetsa zolowetsa zomwe nthawi zambiri zimalowetsedwa kudzera pa kiyibodi.

Kusintha maulalo, lembani cdndikutsatiridwa ndi dzina lachikwatu.
Kuti musinthe makonda, dinani 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>

Zitsanzo zotuluka

Kuti muwonetse zitsanzo kuchokera ku pulogalamu gwiritsani ntchito <samp>tag.

Mawuwa akuyenera kutengedwa ngati chitsanzo chotuluka pakompyuta.

html

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

Matebulo

Matebulo amasinthidwa pang'ono kukhala masitayelo <caption>s, kugwa m'malire, ndikuwonetsetsa kuti zonse zikuyenda text-alignbwino. Zosintha zowonjezera pamalire, padding, ndi zina zimabwera ndi .tablekalasi .

Ili ndi tebulo lachitsanzo, ndipo ili ndi mawu ake ofotokozera zomwe zili mkati.
Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

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>

Mafomu

Mitundu yosiyanasiyana yapangidwanso kuti ikhale masitayilo osavuta. Nazi zina mwazosintha kwambiri:

<fieldset>s alibe malire, zotchingira, kapena malire kotero kuti azitha kugwiritsidwa ntchito ngati zokutira pazolowetsa zapagulu kapena magulu a zolowetsa.
<legend>s, monga ma fieldsets, adasinthidwanso kuti awonetsedwe ngati mutu wamtundu.
<label>s adayikidwa display: inline-blockkuti alole marginkugwiritsidwa ntchito.
<input>s, <select>s, <textarea>s, ndi <button>s nthawi zambiri amayankhidwa ndi Normalize, koma Yambitsaninso amachotsa awo marginndikuyika line-height: inherit, nawonso.
<textarea>s amasinthidwa kuti azitha kukula molunjika ngati kukula kopingasa nthawi zambiri "kuphwanya" masanjidwe amasamba.
<button>s ndi <input>batani zinthu zili ndi cursor: pointernthawi :not(:disabled).

Zosintha izi, ndi zina zambiri, zikuwonetsedwa pansipa.

Thandizo la deti & mtundu

Kumbukirani kuti zolowetsa tsiku sizimathandizidwa mokwanira ndi asakatuli onse, omwe ndi Safari.

Zolozera pa mabatani

Kuyambitsanso kumaphatikizapo zowonjezera role="button"kuti musinthe cholozera chokhazikika kukhala pointer. Onjezani izi kuzinthu kuti zithandizire kuwonetsa kuti zinthu zikuyenda bwino. Udindo uwu siwofunika pazinthu <button>zomwe cursorzimasintha.

Non-batani chinthu batani

html

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

Zinthu zosiyanasiyana

Adilesi

Zinthuzi <address>zasinthidwa kuti zikhazikitsenso osatsegula osatsegula font-stylekuchokera italicku normal. line-heightnawonso tsopano cholowa, ndipo margin-bottom: 1remiwonjezedwa. <address>s ndi zofotokozera za makolo apafupi (kapena gulu lonse la ntchito). Sungani masanjidwe pomaliza mizere ndi <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Dzina
Lathunthu [email protected]

Blockquote

Zosasintha pa blockquotes marginndi 1em 40px, kotero timayikanso izo kuti 0 0 1remzikhale zina zogwirizana ndi zinthu zina.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

Zinthu zam'kati

Chinthuchi <abbr>chimalandira masitayelo ofunikira kuti chiwoneke bwino pakati pa ndime.

Chinthu chachidule cha HTML .

Chidule

Zosasintha cursorpa chidule ndi text, kotero timayikanso izo kuti pointerzisonyeze kuti chinthucho chingathe kuyanjana nacho podina.

Zambiri

Zambiri zatsatanetsatane.

Ngakhale zambiri

Nazi zambiri zatsatanetsatane.

HTML5 `[hidden]`mawonekedwe

HTML5 imawonjezera mawonekedwe atsopano apadziko lonse lapansi otchedwa[hidden] , omwe amalembedwa ngati display: nonemwachisawawa. Kubwereka lingaliro kuchokera ku PureCSS , timakonza izi popanga [hidden] { display: none !important; }kuti zisawonongeke displaymwangozi.

<input type="text" hidden>

jQuery kusagwirizana

[hidden]sizigwirizana ndi jQuery $(...).hide()ndi $(...).show()njira. Chifukwa chake, pakadali pano sitikuvomereza makamaka [hidden]njira zina zoyendetsera displayzinthu.

Kungosintha mawonekedwe a chinthu, kutanthauza kuti displaysichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho, gwiritsani ntchito .invisiblekalasi m'malo mwake.

Yambitsaninso

Njira

Zosintha za CSS

Zosasintha zamasamba

Mafonti achilengedwe

Mitu ndi ndime

Malamulo opingasa

Mndandanda

Inline kodi

Kodi midadada

Zosintha

Zolemba za ogwiritsa

Zitsanzo zotuluka

Matebulo

Mafomu

Thandizo la deti & mtundu

Zolozera pa mabatani

Zinthu zosiyanasiyana

Adilesi

Blockquote

Zinthu zam'kati

Chidule

HTML5 [hidden]mawonekedwe

jQuery kusagwirizana

HTML5 `[hidden]`mawonekedwe