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.

Boggaan

Goobaha caalamiga ah

Bootstrap wuxuu dejiyaa bandhig caalami ah oo aasaasi ah, sawir-qoris, iyo qaababka isku xirka. Marka xakameyn 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 iyada oo loo marayo $link-color.
Isticmaal si aad u $body-bgdejiso ( by default).background-color<body>#fff

Hababkaan waxaa laga heli karaa gudaha _reboot.scss, doorsoomayaasha caalamkana 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

html

<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

html

<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

Muujinta 5

Muujinta 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Cinwaannada bandhiga waxa lagu habeeyey $display-font-sizeskhariidadda Sass iyo laba doorsoomayaal, $display-font-weightiyo $display-line-height.

Cinwaannada bandhiga waxa lagu beddeli karaa laba doorsoome, $display-font-familyiyo $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Hogaamin

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

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

html

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

html

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

Ka digtoonow in summadan loo isticmaalo ujeeddooyin semantic:

waxay ka dhigan tahay qoraalka la calaamadeeyay ama loo iftiimiyay tixraac ama tilmaamid.
waxay ka dhigan tahay faallooyin-dhinac ah iyo daabac yar, sida xuquuqda daabacaadda iyo qoraalka sharciga ah.
<s>waxay ka dhigan tahay shay aan hadda khusayn ama aan sax ahayn.
waxay ka dhigan tahay taako ka mid ah qoraalka xariiqda ah kaas oo ay tahay in loo dhiibo hab tilmaamaya inuu leeyahay tafsiir aan qoraal ahayn.

Haddii aad rabto inaad qaabayso qoraalkaaga, waa inaad isticmaashaa casharradan soo socda:

.markwaxay dabaqi doontaa qaabab la mid ah kuwa .
.smallwaxay dabaqi doontaa qaabab la mid ah kuwa .
.text-decoration-underlinewaxay dabaqi doontaa qaabab la mid ah kuwa .
.text-decoration-line-throughwaxay dabaqi doontaa qaabab la mid ah kuwa <s>.

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

Qalabka qoraalka

Beddel toosinta qoraalka, beddelka, qaabka, miisaanka, dhererka laynka, qurxinta iyo midabka agabkayaga qoraalka iyo tamarta 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

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 <blockquote class="blockquote">HTML kasta sida xigashada.

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

html

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

Magacaabida isha

Tilmaamaha HTML wuxuu u baahan yahay in sifada blockquote la dhigo meel ka baxsan <blockquote>. Markaad bixinayso sifo, <blockquote>ku duub a <figure>oo isticmaal a <figcaption>ama qaybta heerka curiye (tusaale, ) .blockquote-footerfasalka. U hubso inaad sidoo kale ku duub magaca shaqada isha <cite>.

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

html

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

Toosin

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

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

html

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

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

html

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

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 quseeyaa oo kaliya walxaha ilmaha 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.

html

<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 marginah oo isku jira laba fasal, .list-inlineiyo .list-inline-item.

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

html

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

html

<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

Bootstrap 5, waxaanu awood u siinnay cabbirada farta jawaab celinta si toos ah, taasoo u oggolaanaysa qoraalka inuu si dabiici ah u cabbiro dhammaan qalabka iyo cabbirrada daawashada. U fiirso bogga RFS si aad u ogaato sida tani u shaqeyso.

Sass

Kala duwanaansho

Cinwaanadu waxay leeyihiin doorsoomayaal u go'ay cabbirka iyo kala dheeraynta.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Cutubyo qoraal-qoraal oo kala duwan oo halkan lagu daboolay iyo Reboot - ka ayaa waliba leh doorsoomayaal u go'ay.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Isku qas

Ma jiraan wax isku dhafan oo u gaar ah oo loogu talagalay qoraalka, laakiin Bootstrap waxay isticmaashaa Cabbirka Farta Jawaabta (RFS) .