Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Rdemare

Rdemare, yon koleksyon chanjman CSS espesifik nan yon sèl dosye, kickstart Bootstrap pou bay yon debaz elegant, konsistan ak senp pou konstwi.

Apwòch

Rdemare baze sou Nòmalize, bay anpil eleman HTML ak estil yon ti jan opinyon lè l sèvi avèk seleksyon eleman sèlman. Se manier adisyonèl fè sèlman ak klas yo. Pou egzanp, nou rdemare kèk <table>estil pou yon debaz ki pi senp epi pita bay .table, .table-bordered, ak plis ankò.

Men direktiv nou yo ak rezon ki fè nou chwazi kisa pou chanje nan rdemare:

  • Mete ajou kèk valè default navigatè yo pou itilize rems olye de ems pou espas eleman ki kapab chanje.
  • Evite margin-top. Marge vètikal yo ka tonbe, bay rezilta inatandi. Pi enpòtan menm si, yon direksyon sèl nan marginse yon modèl mantal ki pi senp.
  • Pou pi fasil dekale atravè gwosè aparèy, eleman blòk yo ta dwe itilize rems pou margins.
  • Kenbe deklarasyon ki fontgen rapò ak pwopriyete yo nan yon minimòm, lè l sèvi avèk inheritchak fwa sa posib.

CSS varyab

Te ajoute nan v5.2.0

Avèk v5.1.1, nou estandadize @imports obligatwa nou yo atravè tout pakèt CSS nou yo (ki gen ladan bootstrap.css, bootstrap-reboot.css, ak bootstrap-grid.css) pou enkli _root.scss. Sa a ajoute :rootvaryab CSS nivo nan tout pake, kèlkeswa konbyen nan yo yo te itilize nan pake sa a. Alafen Bootstrap 5 pral kontinye wè plis varyab CSS ki te ajoute sou tan, yo nan lòd yo bay plis personnalisation an tan reyèl san yo pa bezwen toujou rekonpile Sass. Apwòch nou an se pran varyab sous Sass nou yo epi transfòme yo an varyab CSS. Nan fason sa a, menm si ou pa sèvi ak varyab CSS, ou toujou gen tout pouvwa a nan Sass. Sa a se toujou nan pwogrè epi yo pral pran tan pou aplike konplètman.

Pou egzanp, konsidere varyab CSS sa yo pou estil :rootkomen :<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};
  

Nan pratik, varyab sa yo aplike nan rdemare konsa:

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
}

Ki pèmèt ou fè personnalisation an tan reyèl jan ou renmen:

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

Paj par défaut

Eleman yo <html>ak <body>yo mete ajou pou bay pi bon default nan tout paj la. Plis espesyalman:

  • A box-sizingse globalman mete sou chak eleman-ki gen ladan *::beforeak *::after, a border-box. Sa a asire ke lajè a deklare nan eleman pa janm depase akòz padding oswa fwontyè.
    • Pa gen okenn baz font-sizedeklare sou <html>, men 16pxyo sipoze (defo navigatè a). font-size: 1remse aplike sou la <body>pou fasil reponn tip-echèl atravè demann medya pandan y ap respekte preferans itilizatè yo ak asire yon apwòch ki pi aksesib. Defo navigatè sa a ka chanje lè w modifye $font-size-rootvaryab la.
  • La <body>tou etabli yon mondyal font-family, font-weight, line-height, ak color. Sa a se eritye pita pa kèk eleman fòm yo anpeche enkonsistans font.
  • Pou sekirite, <body>gen yon te deklare background-color, par #fff.

Pile font natif natal

Bootstrap itilize yon "pile font natif natal" oswa "pile font sistèm" pou rann tèks pi bon sou chak aparèy ak OS. Polis sistèm sa yo te fèt espesyalman ak aparèy jodi a nan tèt ou, ak rann amelyore sou ekran, sipò varyab font, ak plis ankò. Li plis sou pil natif natal nan atik Smashing Magazine sa a .

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

Remake byen ke paske pil polis la gen ladan polis emoji, anpil senbòl komen/dingbat karaktè Unicode yo pral rann kòm piktograf ki gen plizyè koulè. Aparans yo pral varye, tou depann de style yo itilize nan font natif natal emoji navigatè/platfòm la, epi yo pa pral afekte pa nenpòt colorestil CSS.

Sa a font-familyse aplike a <body>ak otomatikman eritye globalman nan tout Bootstrap. Pou chanje mondyal la font-family, mete ajou $font-family-baseak rekonpile Bootstrap.

Tit ak paragraf

Tout eleman tit—egzanp, <h1>—epi <p>yo reset pou yo margin-topretire yo. Yo te margin-bottom: .5remajoute tit ak paragraf margin-bottom: 1rempou espas fasil.

Tit Egzanp
<h1></h1> h1. Bootstrap tit
<h2></h2> h2. Bootstrap tit
<h3></h3> h3. Bootstrap tit
<h4></h4> h4. Bootstrap tit
<h5></h5> h5. Bootstrap tit
<h6></h6> h6. Bootstrap tit

Règ orizontal

Eleman <hr>an te senplifye. Menm jan ak default navigatè yo, <hr>yo gen style atravè border-top, gen yon default opacity: .25, epi otomatikman eritye yo border-colorvia color, ki gen ladan lè coloryo mete atravè paran an. Yo ka modifye ak tèks, fwontyè, ak sèvis piblik opakite.





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

Lis

Tout lis— <ul>, <ol>, ak <dl>— yo margin-topretire yo ak yon margin-bottom: 1rem. Lis anbrike pa gen okenn margin-bottom. Nou te tou reset padding-leftsou <ul>ak <ol>eleman yo.

  • Tout lis yo gen maj tèt yo retire
  • Ak maj anba yo nòmalize
  • Lis anbrike pa gen okenn maj anba
    • Nan fason sa a yo gen yon aparans pi menm jan
    • Patikilyèman lè swiv pa plis atik lis
  • Padding gòch la tou te reset
  1. Men yon lis òdone
  2. Avèk kèk atik lis
  3. Li gen menm gade an jeneral
  4. Kòm lis ki pa òdone anvan an

Pou fason ki pi senp, yerachi klè, ak pi bon espas, lis deskripsyon yo mete ajou margins. <dd>s reset margin-leftak 0ajoute margin-bottom: .5rem. <dt>yo fonse .

Lis deskripsyon yo
Yon lis deskripsyon pafè pou defini tèm.
Tèm
Definisyon pou tèm nan.
Yon dezyèm definisyon pou menm tèm.
Yon lòt tèm
Definisyon pou lòt tèm sa a.

Inline kòd

Vlope fragman nan kòd ak <code>. Asire w ou chape HTML ang parantèz.

Pou egzanp, <section>yo ta dwe vlope kòm inline.
html
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blòk kòd

Sèvi ak <pre>s pou plizyè liy kòd. Yon fwa ankò, asire w ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye. Se <pre>eleman nan reset yo retire li yo margin-topepi sèvi ak reminite pou li yo 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>

Varyab

Pou endike varyab itilize <var>tag la.

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

Antre itilizatè

Sèvi ak la <kbd>pou endike opinyon ki tipikman antre atravè klavye.

Pou chanje repèrtwar, tape cdki te swiv pa non anyè a.
Pou modifye paramèt yo, peze 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>

Egzanp pwodiksyon an

Pou endike pwodiksyon echantiyon nan yon pwogram itilize <samp>tag la.

Tèks sa a vle di yo dwe trete kòm rezilta echantiyon nan yon pwogram òdinatè.
html
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tablo

Tablo yo yon ti kras ajiste nan style <caption>yo, efondre fwontyè, epi asire konsistan text-alignnan tout. Lòt chanjman pou fwontyè, padding, ak plis ankò vini ak klas la.table .

Sa a se yon egzanp tab, ak sa a se tit li yo dekri kontni an.
Tit tab la Tit tab la Tit tab la Tit tab la
Selil tab la Selil tab la Selil tab la Selil tab la
Selil tab la Selil tab la Selil tab la Selil tab la
Selil tab la Selil tab la Selil tab la Selil tab la
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>

Fòm

Plizyè eleman fòm yo te rekòmanse pou estil baz ki pi senp. Men kèk nan chanjman ki pi remakab yo:

  • <fieldset>s pa gen fwontyè, padding, oswa maj pou yo ka fasil pou itilize kòm anbalaj pou entrain endividyèl oswa gwoup antre.
  • <legend>s, tankou fieldsets, yo te tou restyled yo dwe parèt kòm yon tit nan kalite.
  • <label>s yo mete display: inline-blockpou pèmèt marginpou aplike.
  • <input>s, <select>s, <textarea>s, ak <button>s yo sitou adrese pa Nòmalize, men Reboot retire yo marginak ansanm line-height: inherit, tou.
  • <textarea>yo modifye pou sèlman redimensionnable vètikal kòm orizontal redimensionnement souvan "kraze" layout paj.
  • <button>s ak <input>eleman bouton gen cursor: pointer:not(:disabled).

Chanjman sa yo, ak plis ankò, yo demontre anba a.

Egzanp lejand

100

Dat & koulè D' sipò

Kenbe nan tèt ou entrées dat yo pa konplètman sipòte pa tout navigatè, sètadi Safari.

Endikasyon sou bouton

Rdemare gen ladan yon amelyorasyon pou role="button"chanje kurseur default la nan pointer. Ajoute atribi sa a nan eleman pou ede endike eleman yo entèaktif. Wòl sa a pa nesesè pou <button>eleman, ki jwenn pwòp cursorchanjman yo.

Bouton eleman ki pa bouton
html
<span role="button" tabindex="0">Non-button element button</span>

Eleman divès

Adrès

Se <address>eleman nan mete ajou pou reset navigatè a default font-stylesoti italicnan normal. line-heightse tou kounye a eritye, e margin-bottom: 1remli te ajoute. <address>yo se pou prezante enfòmasyon kontak pou zansèt ki pi pre a (oswa tout yon kò travay). Konsève fòma lè w fini liy ak <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Non konplè
[email protected]

Blockquote

Defo a marginsou blockquotes se 1em 40px, kidonk nou reset sa a 0 0 1rempou yon bagay ki pi konsistan ak lòt eleman.

Yon quote byen koni, ki genyen nan yon eleman blockquote.

Yon moun ki pi popilè nan Tit Sous

Eleman Inline

Eleman <abbr>an resevwa stil de baz pou fè l' kanpe deyò pami paragraf tèks.

Eleman nan abrevyasyon HTML .

Rezime

Defo a cursorsou rezime se text, kidonk nou reset sa pointera transmèt ke eleman nan ka kominike avèk lè w klike sou li.

Kèk detay

Plis enfòmasyon sou detay yo.

Menm plis detay

Isit la yo se menm plis detay sou detay yo.

HTML5 [hidden]atribi

HTML5 ajoute yon nouvo atribi mondyal ki rele[hidden] , ki gen estile kòm display: nonepa default. Lè nou prete yon lide nan men PureCSS , nou amelyore sou default sa a lè nou fè [hidden] { display: none !important; }pou ede anpeche li displaysoti aksidantèlman chanje.

<input type="text" hidden>
jQuery enkonpatibilite

[hidden]se pa konpatib ak jQuery a $(...).hide()ak $(...).show()metòd. Se poutèt sa, kounye a nou pa espesyalman andose [hidden]sou lòt teknik pou jere displayeleman yo.

Pou senpleman aktive vizibilite nan yon eleman, sa vle di li displaypa modifye epi eleman nan ka toujou afekte koule nan dokiman an, sèvi ak .invisibleklas la pito.