Dib u bilow

Dib-u-bilow, ururinta isbeddellada CSS-ga gaarka ah ee hal fayl, kickstart Bootstrap si ay u bixiso aasaas xarrago leh, joogto ah, oo fudud oo lagu dhisayo.

Boggaan

Habka

Dib-u-bilaabku wuxuu ku dhisan yahay Caadiye, isaga oo siinaya walxo badan oo HTML ah oo leh habab la ra'yigooda yahay iyadoo la adeegsanayo xulashada walxaha kaliya. Habayn dheeri ah ayaa lagu sameeyaa kaliya fasalada. Tusaale ahaan, waxaanu dib -u-bilawnay <table>qaababka qaar si loo helo sal fudud ka dibna waxaan bixinaa .table, .table-bordered, iyo in ka badan.

Waa kuwan hab-raacyadayada iyo sababaha aan u dooranayno waxa la burinayo Reboot:

Cusbooneysii qaar ka mid ah qiimaha browserka si aad u isticmaasho rems halkii aad ka isticmaali lahayd emkala dheereynta qaybaha la miisaami karo.
Iska ilaali margin-top. Margins toosan way dumi karaan, iyagoo keenaya natiijooyin lama filaan ah. Waxa ka sii muhiimsan in kastoo, hal jihada ah marginwaa qaab maskaxeed oo fudud.
Si loo fududeeyo cabbirka cabbirrada aaladda, walxaha xannibaya waa inay isticmaalaan rems ee margins.
Hayso caddaynta fontguryaha la xidhiidha ugu yaraan, isticmaal inheritmar kasta oo ay suurtagal tahay.

doorsoomayaasha CSS

Lagu daray v5.2.0

Anaga oo leh v5.1.1 , waxa aanu jaangooyay @imports loo baahan yahay dhamaan xidhmooyinkeena CSS (ay ku jiraan bootstrap.css, bootstrap-reboot.cssiyo bootstrap-grid.css) in lagu daro _root.scss. Tani waxay ku dartay :rootdoorsoomayaasha CSS ee dhammaan xidhmooyinka, iyadoon loo eegayn inta iyaga ka mid ah ee loo isticmaalo xidhmadaas. Ugu dambeyntii Bootstrap 5 wuxuu sii wadi doonaa inuu arko doorsoomayaal CSS badan oo lagu daray waqti ka dib, si loo bixiyo wax ka beddelka waqtiga-dhabta ah iyada oo aan loo baahnayn in mar walba dib loo soo celiyo Sass. Habkayagu waa inaan qaadano ishayaga doorsoomayaasha Sass oo aan u beddelno doorsoomayaasha CSS. Habkaas, xitaa haddii aadan isticmaalin doorsoomayaasha CSS, waxaad weli haysataa dhammaan awoodda Sass. Tani weli way socotaa waxayna qaadan doontaa wakhti in si buuxda loo hirgeliyo.

Tusaale ahaan, u fiirso :rootdoorsoomayaashan CSS ee <body>qaababka caadiga ah:

  @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};

Dhaqan ahaan, doorsoomayaashaas ayaa markaa lagu dabaqayaa Reboot sida:

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
}

Kaas oo kuu ogolaanaya inaad samayso wax-ka-beddelid-waqtiga dhabta ah si kasta oo aad rabto:

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

Bogga wax-ka-qabashada

Qaybaha <html>iyo <body>walxaha waa la cusboonaysiiyay si ay u bixiyaan khaladaadyo bogag oo dhan ah. Si gaar ah:

Si box-sizingcaalami ah ayaa loo dejiyay shay kasta - oo ay ku jiraan *::beforeiyo *::after, si border-box. Tani waxay hubinaysaa in ballaca la sheegay ee curiyaha aan waligeed la dhaafin suufka ama soohdinta awgeed.
- Ma jiro wax sal ah oo font-sizelagu caddeeyey <html>, laakiin 16pxwaa la qaatay ( browser-ka caadiga ah). font-size: 1remwaxaa lagu dabaqaa qaab <body>-qaabaynta fudud ee jawaab-celinta iyadoo loo marayo weydiimaha warbaahinta iyadoo la ixtiraamayo dookhyada isticmaalaha lana hubinayo hab la heli karo. Badbaadiyaha browserka waxaa lagu burin karaa iyadoo la bedelayo $font-size-rootdoorsoomayaasha.
Waxa <body>kale oo ay dejisaa mid caalami ah font-family, font-weight, line-height, iyo color. Tan waxa hadhow dhaxla xubno qaabaysan si ay uga hortagaan iswaafajinta farta
Badbaadada awgeed, Rabbigu <body>waxa uu ku dhawaaqay background-color, oo uu ka gaabsaday #fff.

Xirmada farta hooyo

Bootstrap waxa ay isticmaashaa “Stack font-ka” ama “nidaamka font stack” si loogu sameeyo qoraalka ugu wanaagsan ee qalab kasta iyo OS kasta. Hababkan nidaamka waxa si gaar ah loo nashqadeeyey iyadoo maskaxda lagu hayo aaladaha maanta, iyadoo la wanaajiyey muujinta shaashadaha, taageerada farta beddelka ah, iyo in ka badan. Ka akhriso wax badan oo ku saabsan xarfaha xarfaha waddaniga ah maqaalkan Majaladda Smashing .

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

Ogsoonow maadaama xidhmada fartu ay ku jirto xarfaha Emoji, calaamado badan oo caadi ah/dambat Unicode ayaa loo samayn doonaa sawiro midabyo badan leh. Muuqaalkoodu wuu kala duwanaan doonaa, iyadoo ku xiran qaabka loo isticmaalo browserka/platform's font-ka asalka ah ee Emoji, mana saameyn doono qaab kasta oo CSS colorah.

Tan font-familywaxa lagu dabaqaa <body>oo si toos ah loo dhaxlo caalamka oo dhan Bootstrap. Si aad u beddesho midda caalamiga ah font-family, cusboonaysii $font-family-baseoo dib u ururi Bootstrap.

Ciwaanka iyo cutubyada

Dhammaan qaybaha ciwaanka-tusaale, <h1>-oo <p>dib ayaa loo dajiyay si margin-topmeesha looga saaro. Ciwaanka ayaa margin-bottom: .5remlagu daray iyo cutubyo margin-bottom: 1remsi fudud loo kala dheereeyo.

Ciwaanka	Tusaale
`<h1></h1>`	h1. Bootstrap cinwaanka
`<h2></h2>`	h2. Bootstrap cinwaanka
`<h3></h3>`	h3. Bootstrap cinwaanka
`<h4></h4>`	h4. Bootstrap cinwaanka
`<h5></h5>`	h5. Bootstrap cinwaanka
`<h6></h6>`	h6. Bootstrap cinwaanka

Xeerarka horizontal

Cunsurka <hr>waa la fududeeyay. Si la mid ah cilladaha browserka, <hr>s waxaa loo qaabeeyey via border-top, leeyihiin default opacity: .25, oo si toos ah u dhaxli iyaga border-colorvia color, oo ay ku jiraan marka colorla dhigay iyada oo waalidka. Waxa lagu beddeli karaa qoraal, xuduud, iyo yutiilitida mugdiga.

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

Liisaska

Liisaska oo dhan — <ul>, <ol>, iyo <dl>— waa margin-toplaga saaray iyo a margin-bottom: 1rem. Liisaska la daboolay ma margin-bottomlaha Waxa kale oo aanu dib u dajinay padding-lefton <ul>iyo <ol>curiyayaasha

Liisaska oo dhan waa laga saaray xadkooda sare
Waxayna markoodii hoose caadi noqdeen
Liisaska la dulsaaray ma laha xad hoose
- Sidan waxay leeyihiin muuqaal siman
- Gaar ahaan marka ay raacaan waxyaabo badan oo liis ah
suufka bidix sidoo kale dib baa loo dajiyay

Halkan waxaa ah liis la dalbaday
Iyada oo leh dhowr shay oo liis ah
Waxay leedahay muuqaal guud oo isku mid ah
Sida liiska hore ee aan la dalban

Si loo habeeyo fudud, kala sareyn cad, iyo kala dheerayn wanaagsan, liisaska sharaxaada waa la cusboonaysiiyay margins. <dd>dib margin-leftu deji 0oo ku dar margin-bottom: .5rem. <dt>s waa dhiirranaan .

Liiska sharraxaadda: Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
Muddada: Qeexida ereyga.; Qeexitaanka labaad ee isla ereyga.
Erey kale: Qeexida ereygan kale.

Koodhka khadka

Ku duub godadka koodka gudaha <code>. Hubi inaad ka baxsato geesaha xagasha HTML.

Tusaale ahaan, <section>waa in lagu duuduubaa sida khadadka.

html

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

Koodhka xannibaadda

U isticmaal <pre>s khadadka koodka badan. Marlabaad, iska hubi inaad ka baxsato xagal kasta oo koodhka ku jira si aad si sax ah u bixiso. Cunsurka <pre>dib ayaa loo dajiyay si uu meesha uga saaro margin-topoo loo isticmaalo remcutubyada 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>

Kala duwanaansho

Si aad u muujiso doorsoomayaasha isticmaal <var>tag.

y = m x + b

html

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

Gelitaanka isticmaalaha

Isticmaal <kbd>si aad u muujiso gelinta sida caadiga ah lagu galo kiiboodhka.

Si aad u bedesho hagaha, ku qor cdoo ku xiga magaca hagaha.
Si aad wax uga beddesho goobaha, taabo 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>

Tusaalaha wax soo saarka

Si aad u muujiso muunadda ka soo baxda barnaamijka isticmaal <samp>sumadda.

Qoraalkan waxaa loola jeedaa in loola dhaqmo sidii muunad ka soo baxay barnaamijka kombuyuutarka.

html

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

Miisaska

Miisaska wax yar ayaa lagu hagaajiyay qaabka <caption>s, xudduudaha burburay, oo hubiya inay joogto yihiin text-aligninta oo dhan. Isbeddellada dheeraadka ah ee xuduudaha, suufka, iyo in ka badan ayaa la socda .tablefasalka .

Kani waa miis tusaale, kanina waa qoraalkiisa si loo qeexo waxa ku jira.
Cinwaanka shaxda	Cinwaanka shaxda	Cinwaanka shaxda	Cinwaanka shaxda
Unugga miiska	Unugga miiska	Unugga miiska	Unugga miiska
Unugga miiska	Unugga miiska	Unugga miiska	Unugga miiska
Unugga miiska	Unugga miiska	Unugga miiska	Unugga miiska

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>

Foomamka

Qaababka kala duwan ayaa dib loo bilaabay si ay u qaabeeyaan qaababka aasaasiga ah ee fudud. Waa kuwan qaar ka mid ah isbeddellada ugu caansan:

<fieldset>s ma laha xuduud, suuf, ama margin si ay si sahal ah loogu isticmaalo duubo ahaan agabka shaqsiga ah ama kooxaha agabka.
<legend>s, sida goobaha garoommada, ayaa sidoo kale dib loo habeeyey si loogu muujiyo cinwaan nooc ah.
<label>s ayaa lagu wadaa in display: inline-blockla ogolaado marginin la codsado.
<input>s, <select>s, <textarea>s, iyo <button>s inta badan waxaa wax ka qabta Normalize, laakiin Reboot ayaa ka saara iyaga marginiyo sets line-height: inherit, sidoo kale.
<textarea>s waxa wax laga beddelay si toos ah oo keliya loo cabbiri karo sida cabbirka toosan ee inta badan “jabiyo” qaabaynta bogga.
<button>s iyo <input>canaasiirta badhanka waxay leeyihiin cursor: pointermarka :not(:disabled).

Isbeddeladan, iyo in ka badan, ayaa lagu muujiyay hoos.

Taageerada gelinta taariikhda iyo midabka

Maskaxda ku hay in taariikhda la gelinayo aysan si buuxda u taageerin dhammaan daalacayaasha, kuwaas oo ah Safari.

Tilmaamaha badhamada

Dib-u-bilaabista waxaa ku jira kobcinta si role="button"loogu beddelo cursor-ka caadiga ah pointer. Ku dar sifadan curiyeyaasha si aad u muujiso in curiyayaasha ay is dhexgal yihiin. Doorkan lagama maarmaan ma aha <button>canaasiirta, kuwaas oo hela cursorisbeddelkooda.

Badhanka curiyaha aan badhanka ahayn

html

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

Curiyayaasha kala duwan

Cinwaanka

Cunsurka <address>waa la cusboonaysiiyay si dib loogu habeeyo browser-ka caadiga ah laga font-stylebilaabo . sidoo kale hadda waa la dhaxlay, oo lagu daray. s waxaa loogu talagalay soo bandhigida macluumaadka xiriirka ee awoowga ugu dhow (ama dhammaan shaqada jirka). Ku xafid qaabaynta adiga oo ku dhamaynaya xariiqyada .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

Magaca buuxa
[email protected]

Blockquote

Defaalka marginon blockquotes waa 1em 40px, sidaas darteed waxaan dib u dejineynaa taas si 0 0 1remwax dheeraad ah ula socdaan walxaha kale.

Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.

Qof caan ku ah Ciwaanka Isha

Cunsuriyada khadka dhexe

Cunsurka <abbr>ayaa hela qaabaynta aasaasiga ah si uu uga dhex muuqdo qoraalka cutubka.

Qaybta soo gaabinta HTML .

Soo koobid

Nuxurka cursorguud ee kooban waa text, markaa dib ayaan u dejineynaa si aan pointeru gudbino in curiyaha lala falgali karo adigoo gujinaya.

Faahfaahinta qaar

Macluumaad dheeraad ah oo ku saabsan faahfaahinta.

Xitaa faahfaahin dheeraad ah

Halkan waxaa ah xitaa faahfaahin dheeraad ah oo ku saabsan faahfaahinta.

HTML5 `[hidden]`sifada

HTML5 waxay ku darsataa sifo cusub oo caalami ah oo magaceedu yahay[hidden] , kaas oo loo qaabeeyey si display: nonecaadi ah. Ka amaahashada fikradda PureCSS , waxaanu ku hagaajinaynaa hab-dhaqankan anagoo samaynayna [hidden] { display: none !important; }si aanu uga hortagno displayin si lama filaan ah looga gudbo.

<input type="text" hidden>

iswaafajin la'aanta jQuery

[hidden]kuma waafaqsana jQuery's $(...).hide()iyo $(...).show()hababka. Sidaa darteed, hadda si gaar ah uma taageerno [hidden]farsamooyinka kale ee lagu maareeyo displaycuriyeyaasha.

Si aad u bedesho muuqaalka curiyaha, taasoo la macno ah in displayaan wax laga beddelin oo curiyuhu uu wali saamayn ku yeelan karo socodka dukumeentiga, isticmaal fasalka .invisible.

Dib u bilow

Habka

doorsoomayaasha CSS

Bogga wax-ka-qabashada

Xirmada farta hooyo

Ciwaanka iyo cutubyada

Xeerarka horizontal

Liisaska

Koodhka khadka

Koodhka xannibaadda

Kala duwanaansho

Gelitaanka isticmaalaha

Tusaalaha wax soo saarka

Miisaska

Foomamka

Taageerada gelinta taariikhda iyo midabka

Tilmaamaha badhamada

Curiyayaasha kala duwan

Cinwaanka

Blockquote

Cunsuriyada khadka dhexe

Soo koobid

HTML5 [hidden]sifada

iswaafajin la'aanta jQuery

HTML5 `[hidden]`sifada