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.

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.

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.
Waxa <body>kale oo ay dejisaa mid caalami ah font-family, line-heightiyo text-align. 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

Farta webka ee caadiga ah (Helvetica Neue, Helvetica, iyo Arial) ayaa lagu tuuray Bootstrap 4 waxaana lagu bedelay " xarfaha farta asalka ah" ee u gudbinta ugu wanaagsan ee qoraalka qalab kasta iyo OS. Ka akhriso wax badan oo ku saabsan xarfaha xarfaha waddaniga ah maqaalkan Majaladda Smashing .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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/dinbat characters 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

Liisaska

Liisaska oo dhan — <ul>, <ol>, iyo <dl>— waa margin-toplaga saaray iyo a margin-bottom: 1rem. Liisaska buulka leh ma margin-bottomlaha

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.

Qoraal hore loo habeeyey

Cunsurka <pre>dib ayaa loo dajiyay si meesha looga saaro margin-topoo loo isticmaalo remcutubyada margin-bottom.

.tusaale-qayb {
  margin-hoose: 1rem;
}

Miisaska

Miisaska wax yar ayaa lagu hagaajiyay qaabka <caption>s, xudduudaha burburay, oo la hubiyo in ay 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 uu u 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

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 waxay ka saartaa 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>xubno badhanka leeyihiin cursor: pointermarka :not(:disabled).

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

Tilmaamaha badhamada

Dib-u-bilaabista waxaa ku jira kobcinta si role="button"loogu beddelo cursorka 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

<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

Sida caadiga ah marginee blockquotes waa 1em 40px, sidaa darteed waxaan dib u dejineynaa taas si 0 0 1remwax badan oo la jaan qaada 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.

Nulla attr vitae elit libero, a pharetra augue.

Soo koobid

Nuxurka cursorguud ee kooban waa text, markaa dib ayaanu u dejinaynaa 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 annagoo samaynayna [hidden] { display: none !important; }si aanu uga hortagno displayinay si lama filaan ah uga gudubto. In kasta [hidden]oo aan asal ahaan IE10 lagu taageerin, ku dhawaaqida cad ee CSS-tayada ayaa xalisa dhibaatadaas.

<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 la beddelin oo curiyuhu uu wali saamayn ku yeelan karo socodka dukumeentiga, isticmaal fasalka .invisible.