Source

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 u qaadaneynaa xididka caadiga ah ee biraawsarka font-size(sida caadiga ah 16px) si booqdayaashu ay u habeeyaan cilladaha 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 loogu talagalay inay sida ugu fiican ugu shaqeeyaan hilibka boggaaga. Marka aad u baahan tahay ciwaad si aad u soo baxdo, tixgeli inaad isticmaasho ciwaanka bandhig -qaab ka weyn, waxyar oo ka fikir badan.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor actor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 agabkayaga qoraalka iyo isticmaalka midabka .

Soo gaabinta

Dhaqangelinta habaysan ee curiyaha HTML ee <abbr>soo gaabinta iyo soo gaabinta si loo muujiyo nooca la fidiyay ee dul heehaabaya. Soo gaabintu waxay leedahay xariiq toosan oo ay kasbato cursor caawinaad si ay u bixiso xaalad dheeraad ah oo ku saabsan 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 xigato baloogyada macluumaadka ka yimid ilo kale oo ku jira dukumeentigaaga. Ku duub HTML<blockquote class="blockquote"> kasta sida xigashada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Magacaabida isha

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya.

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya.

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya.

Qof caan ku ah Ciwaanka Isha

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

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

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

Inline

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id un mi porta gravida iyo eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Eray go'ay waa la gooyay

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Buul

Liiska qeexida buulkiisa: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Qoraal qoraal ah oo jawaab ah

Qoraal-qoraalka ka jawaabaya waxa loola jeedaa qoraalka la miisaamo iyo qaybaha iyada oo si fudud loo hagaajinayo curiyaha xididka ee font-sizesu'aalo warbaahineed oo taxane ah. Bootstrap kuma samaynayso tan adiga, laakiin way fududahay in lagu daro haddii aad u baahan tahay.

Halkan waxaa ah tusaale ahaan ficil ahaan. Dooro wax kasta font-sizeoo s iyo weydiimaha warbaahinta aad rabto.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}