Source

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 <body>nooca-qaabaynta fudud ee jawaab-celinta iyadoo loo marayo weydiimaha warbaahinta iyadoo la ixtiraamayo dookhyada isticmaalaha iyo hubinta hab la heli karo.
Waxa <body>kale oo ay dejisaa mid caalami ah font-family, line-heightiyo text-align. Tan waxa hadhow dhaxli doona 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id un mi porta gravida iyo eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Qoraal hore loo habeeyey

Cunsurka <pre>dib ayaa loo dajiyay si uu meesha uga 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 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

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

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha

Cunsuriyada khadka

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