in English

Qoraalka qoraalka

Dukumeenti iyo tusaalooyin loogu talagalay qoraalka Bootstrap, oo ay ku jiraan goobaha caalamiga ah, cinwaannada, qoraalka jirka, liisaska, iyo in ka badan.

Goobaha caalamiga ah

Bootstrap wuxuu dejiyaa bandhig caalami ah oo aasaasi ah, sawir-qoris, iyo qaababka isku xirka. Marka koontarool dheeraad ah loo baahdo, fiiri fasalada isticmaalka qoraalka .

Isticmaal xarfo xarfo ah oo u doora tan ugu fiican font-familyOS iyo qalab kasta.
Miisaanka nooca loo wada dhan yahay oo la heli karo, waxaan isticmaalnaa xididka caadiga ah ee browserka font-size(sida caadiga ah 16px) si booqdayaashu ay u habeeyaan khaladaadkooda browserka haddii loo baahdo.
U isticmaal $font-family-base, $font-size-base, iyo $line-height-basesifaadka sida saldhigga qoraalkayaga loogu dabaqay <body>.
Deji midabka isku xirka caalamiga ah $link-coloroo mari xariiqyada isku xirka kaliya :hover.
Isticmaal si aad u $body-bgdejiso ( by default).background-color<body>#fff

Qaababkaan waxaa laga heli karaa gudaha _reboot.scss, doorsoomayaasha caalamiga ah waxaa lagu qeexay _variables.scss. Hubi inaad $font-size-basedejisorem

Ciwaanka

Dhammaan cinwaannada HTML, <h1>iyada oo loo marayo <h6>, waa la heli karaa.

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

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1iyada oo loo marayo .h6fasallo sidoo kale waa la heli karaa, marka aad rabto inaad ku habboonaato qaabka xarfaha cinwaanka laakiin aadan isticmaali karin qaybta HTML ee la xiriirta.

h1. Bootstrap cinwaanka

h2. Bootstrap cinwaanka

h3. Bootstrap cinwaanka

h4. Bootstrap cinwaanka

h5. Bootstrap cinwaanka

h6. Bootstrap cinwaanka

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Habaynta cinwaanada

Isticmaal fasalada utility ee lagu daray si aad dib ugu abuurto qoraalka cinwaanka sare ee Bootstrap 3.

Ciwaanka bandhiga quruxda badan leh Qoraal sare oo libdhay

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Bandhig ciwaan

Cutubyada ciwaan dhaqameedka waxaa loo qaabeeyey inay sida ugu fiican ugu shaqeeyaan hilibka boggaaga. Markaad u baahato ciwaad si aad u soo baxdo, tixgeli inaad isticmaasho ciwaanka bandhig -qaab ka weyn, wax yar oo fikradeed leh. Maskaxda ku hay in ciwaanadani aanay ahayn kuwo si toos ah uga jawaabaya, laakiin waxa suurtogal ah in aad awood u yeelatid cabbirada farta jawaabaha leh .

Muujinta 1

Muujinta 2

Muujinta 3

Muujinta 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Hogaamin

Ka dhig cutubka mid taagan adiga oo ku daraya .lead.

Tani waa cutubka hogaanka. Waxay ka soo baxdaa cutubyada caadiga ah.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Qodobbada qoraalka khadka

Habaynta loogu talagalay HTML5 khad dhexdeed ah.

Waxaad u isticmaali kartaa sumadda sumaddaiftiiminqoraal.

~~Sadarka qoraalka waxaa loola jeedaa in loola dhaqmo sidii qoraal la tirtiray.~~

~~Sadar qoraalkan waxa loola jeedaa in loola dhaqmo si aan sax ahayn.~~

Sadar qoraalkan waxaa loola jeedaa in loola dhaqmo sidii wax lagu kordhinayo dukumeentiga.

Sadarka qoraalkani wuxuu u dhigi doonaa sida hoosta laga xarriiqay

Sadar qoraalkan waxaa loola jeedaa in loola dhaqmo sidii far wanaagsan.

Sadarkan waxa loo turjumay qoraal geesinimo leh.

Sadarkan waxa loo turjumay sidii qoraal farta lagu fiiqay.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markiyo .smallfasalo sidoo kale diyaar u ah in lagu dabaqo qaabab la mid ah <mark>iyo <small>iyadoo laga fogaanayo wax macno semanti ah oo aan la rabin in tags keeni lahaa.

Iyadoo aan kor lagu muujin, waxaad xor u tahay inaad isticmaasho <b>HTML5 <i>. <b>waxaa loola jeedaa in lagu muujiyo ereyada ama odhaahyada iyada oo aan la gudbin muhiimad dheeraad ah halka <i>ay u badan tahay cod, ereyo farsamo, iwm.

Qalabka qoraalka

Ku beddel toosinta qoraalka, beddelka, qaabka, miisaanka, iyo midabka isticmaalkayada qoraalka iyo isticmaalka midabka .

Soo gaabinta

Hirgelinta habaysan ee curiyaha HTML ee <abbr>soo gaabinta iyo gaabinnada si loo muujiyo nooca la fidiyay ee dul heehaabaya. Soo gaabintu waxay leedahay xariiq toosan oo ay kasbadaan cursor caawinaad si ay u bixiyaan macnaha dheeraadka ah ee dullidda iyo isticmaalayaasha tignoolajiyada caawinta.

Ku dar .initialismsoo gaabinta cabbirka farta wax yar ka yar.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Xigashooyinka

Si aad u soo xiganayso blocks of content ka il kale oo ka mid ah dukumeentigaaga. Ku duub HTML<blockquote class="blockquote"> kasta sida xigashada.

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

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Magacaabida isha

Ku dar si aad <footer class="blockquote-footer">u aqoonsato isha. Ku duub magaca isha shaqada <cite>.

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

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Toosin

Isticmaal qalabka qoraalka sida loogu baahan yahay si aad u bedesho toosinta blockquote.

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

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Liisaska

Aan habayn

Ka saar meesha caadiga ah list-styleiyo bidixda bidix ee alaabta liiska (carruurta degdega ah oo keliya). Tani waxay khusaysaa oo keliya liiska carruurta dhow , taasoo la micno ah inaad u baahan doonto inaad ku darto fasalka liis kasta oo buul ah sidoo kale.

Tani waa liis
Waxay u muuqataa mid aan si buuxda u qaabaysanayn.
Dhisme ahaan, wali waa liis
Si kastaba ha ahaatee, qaabkani wuxuu khuseeyaa oo kaliya walxaha ilmaha ee dhow.
Liisaska goglan:
- ma saameeyaan qaabkan
- weli waxay muujin doontaa xabbad
- oo ay leeyihiin xad bidix oo habboon
Tani waxay weli ku iman kartaa anfaca xaaladaha qaarkood.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

Ka saar rasaasta liiska oo mari xoogaa iftiin marginleh oo isku jira laba fasal, .list-inlineiyo .list-inline-item.

Tani waa shay liis ah.
Iyo mid kale.
Laakin waxaa lagu soo bandhigay khadka.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Isku toosinta liiska sharraxaadda

Ku toosi ereyada iyo sharraxaadaha si toosan adiga oo isticmaalaya nidaamkayaga grid fasallada horay loo sii qeexay (ama isku darka semantic). Muddo dheer, waxaad si ikhtiyaari ah ugu dari kartaa .text-truncatefasal si aad qoraalka ugu gooyso ellipsis.

Liiska sharraxaadda

Liiska sharraxaadda ayaa ku habboon qeexida ereyada.

Muddada

Qeexida ereyga.

Iyo qaar kale oo qoraal qeexid meel-hayeyaal ah.

Erey kale

Qeexitaanku waa gaaban yahay, markaa ma jiraan cutubyo dheeraad ah ama wax kale.

Eray go'ay waa la gooyay

Tani waxay faa'iido yeelan kartaa marka boosku cidhiidhi yahay. Wuxuu ku daraa ellipsis dhamaadka.

Buul

Liiska qeexida buulkiisa: Waxaan maqlay inaad jeceshahay liisaska qeexitaanka. Aan geliyo liis qeexitaan gudaha liiskaaga qeexida.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Cabbirrada farta ka jawaabaya

Sida v4.3.0, Bootstrap waxay rabtaa ikhtiyaarka ah in lagu suurtageliyo cabbirada farta jawaab celinta, taasoo u oggolaanaysa qoraalka inuu si dabiici ah u cabbiro dhammaan qalabka iyo cabbirrada daawashada. RFS waxa lagu hawlgelin karaa iyadoo loo beddelo $enable-responsive-font-sizesdoorsoomaha Sass trueoo dib loo ururiyo Bootstrap.

Si loo taageero RFS , waxaan isticmaalnaa isku-darka Sass si aan u bedelno guryahayaga caadiga font-sizeah. Cabbirrada farta ka jawaabaya waxaa la isugu geyn doonaa calc()hawlo leh isku dhafan remiyo unugyo daawasho si ay awood ugu yeeshaan dabeecadda is-miidaaminta jawaabta ah. Wax badan oo ku saabsan RFS iyo qaabeynteeda ayaa laga heli karaa kaydkeeda GitHub .