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 curiyaha lagu dhawaaqay aanu waligii 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 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 xarfaha asalka ah" si loogu sameeyo qoraalka ugu wanaagsan ee 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 la daboolay 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 way dhiirran yihiin .

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 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 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.
<button>s iyo <input>canaasiirta badhanka waxay leeyihiin cursor: pointermarka :not(:disabled).

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

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.