Taayipoogiraafii

Galmee fi fakkeenyota barruu Bootstrap, qindaa'inoota addunyaa, mata dureewwan, barruu qaamaa, tarreewwanii fi kkf dabalatee.

Fuula kana irratti

Haala addunyaa

Bootstrap agarsiisa addunyaa bu'uuraa, barreessuu, fi akkaataa walqabsiisaa saaga. Yeroo too'annoon dabalataa barbaachisu, gitaalee faayidaa barruu ilaali .

Tuullaa qubee dhalootaa kan font-familytokkoon tokkoo OS fi meeshaadhaaf isa gaarii filatu fayyadami.
Iskeelii akaakuu caalaatti hammataa fi dhaqqabamaa font-sizeta'eef, daawwattoonni akka barbaachisummaa isaatti durtii biraawzari isaanii dhuunfachuu akka danda'aniif hundee durtii biraawzarichaa (akkaataa idileetti 16px) fayyadamna.
$font-family-base, $font-size-base, fi amaloota $line-height-baseakka bu'uura maxxansaa keenyaa <body>.
Halluu hidhaa waliigalaa karaa $link-color.
( durtii) irratti $body-bga saaguuf fayyadami .background-color<body>#fff

Akkaataawwan kun keessaa argamuu danda'u _reboot.scss, fi jijjiiramoonni waliigalaa keessatti ibsamaniiru _variables.scss. $font-size-basekeessa galchuu kee mirkaneessi rem.

Mata dureewwan

Mata dureewwan HTML hundi, <h1>karaa <h6>, ni argamu.

Mata duree	Fakkeenya
`<h1></h1>`	h1. Mata duree bootstrap jedhu
`<h2></h2>`	h2. Mata duree bootstrap jedhu
`<h3></h3>`	h3. Mata duree bootstrap jedhu
`<h4></h4>`	h4. Mata duree bootstrap jedhu
`<h5></h5>`	h5. Mata duree bootstrap jedhu
`<h6></h6>`	h6. Mata duree bootstrap jedhu

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

.h1karaa .h6gitaawwaniis ni argamu, yeroo akkaataa qubee mataduree tokkoo walsimsiisuu barbaaddu garuu qaama HTML walqabate fayyadamuu hin dandeenyeef.

h1. Mata duree bootstrap jedhu

h2. Mata duree bootstrap jedhu

h3. Mata duree bootstrap jedhu

h4. Mata duree bootstrap jedhu

h5. Mata duree bootstrap jedhu

h6. Mata duree bootstrap jedhu

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>

Mata dureewwan dhuunfachuu

Barruu mata duree lammaffaa xiqqaa Bootstrap 3 irraa irra deebi'uuf gitaalee faayidaa hammataman fayyadami.

Mata duree agarsiisa faashinii Barruu lammaffaa faded wajjin

html

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

Mata dureewwan agarsiisi

Qaamonni mata duree aadaa foon qabiyyee fuula keetii keessatti akka gaariitti akka hojjetan qophaa'aniiru. Yeroo mata duree adda ta’uuf barbaaddu, mata duree agarsiisaa fayyadamuu yaadaa —akkaataa mata duree guddaa, xiqqoo yaada qabu.

Agarsiisa 1.

Agarsiisa 2.

Agarsiisa 3.

Agarsiisa 4.

Agarsiisa 5.

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

Mata dureewwan agarsiisaa karaa $display-font-sizeskaartaa Sass fi jijjiiramoota lamaa, $display-font-weightfi $display-line-height.

Mata dureewwan agarsiisaa karaa jijjiiramoota lamaa, $display-font-familyfi $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;

Geggeessi

Keeyyatni tokko .lead.

Kun keewwata dursaa dha. Keeyyata idilee irraa adda ta’ee mul’ata.

html

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

Qaamolee barruu sarara keessaa

Qaamolee HTML5 sarara keessaa waliigalaadhaaf akkaataa.

Taagiin mallattoo itti fayyadamuu dandeessairra keessabarreeffama.

~~Sararri barruu kun akka barruu haqameetti akka ilaalamu yaadameeti.~~

~~Sararri barreeffamaa kun kana booda akka sirrii hin taaneetti akka ilaalamu yaadameeti.~~

Sararri barruu kun akka dabalata galmeetti akka ilaalamu yaadameeti.

Sararri barruu kun akka jala sararametti ni agarsiisa.

Sararri barruu kun akka qubee xiqqaatti akka ilaalamu yaadameeti.

Sararri kun akka barruu jajjabootti agarsiifame.

Sararri kun akka barruu jallisii ta'etti agarsiifame.

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>

Taagiiwwan sun kaayyoo hiikaaf akka fayyadaman of eeggadhu:

barruu kaayyoo wabii ykn mallattoodhaaf mallattoo itti godhame ykn calaqqifame bakka bu'a.
yaada cinaa fi qubee xixiqqaa bakka bu’a, akka mirga waraabbii fi barreeffama seeraa.
<s>elementii kana booda barbaachisaa hin taane ykn kana booda sirrii hin taane bakka bu’a.
span barruu sarara keessaa kan haala ibsa barruu hin taane qabaachuu isaa agarsiisuun agarsiifamuu qabu bakka bu'a.

Yoo barruu kee akkaataa itti gochuu barbaadde, bakka isaa gita armaan gadii fayyadamuu qabda:

.markakkaataa .
.smallakkaataa .
.text-decoration-underlineakkaataa .
.text-decoration-line-throughakkaataa <s>.

Armaan olitti osoo hin agarsiifamin, bilisaan fayyadamuu fi HTML5 keessatti. jechoota ykn gaaleewwan barbaachisummaa dabalataa osoo hin dabarsin calaqqisiisuuf kan yaadame yoo ta’u, irra caalaa sagalee, jechoota teeknikaa fi kkf kan ta’udha.

Faayidaa barruu

Hiriirsa barruu, jijjiiri, akkaataa, ulfaatina, sarara-olka'iinsa, faaya fi halluu faayidaa barruu fi faayidaa halluu keenyaa wajjin jijjiiri .

Gabateewwan

Hojiirra oolmaa istaayil ta'e <abbr>elementii HTML's gabaabduu fi gabaabduudhaaf gosa babal'ate hover irratti agarsiisuuf. Gabateewwan sarara durtii qabu fi qaree gargaarsaa argachuun haala dabalataa hover irratti fi fayyadamtoota teeknooloojiiwwan gargaarsaa kennuudhaaf.

.initialismQubee-size xiqqoo xiqqaa ta'eef gabaabduutti dabali .

attr

HTML

html

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

Jechoota ugguraa

Galmee kee keessaa madda biraa irraa uggura qabiyyee caqasuudhaaf. <blockquote class="blockquote">HTML kamiyyuu akka caqasaatti marsi .

Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.

html

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

Madda tokko moggaasuu

Ispeeksiin HTML amalli caqasa ugguraa ala akka kaa'amu barbaada <blockquote>. Yeroo amaloota kennitu, kee <blockquote>a keessatti marsiiti <figure>a <figcaption>ykn qaama sadarkaa uggura (fkn, ) .blockquote-footergita waliin fayyadami. <cite>Maqaa hojii madda akkasumas itti marsuu mirkaneessi .

Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.

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>

Hiriirsuu

Hiriirsa caqasaa ugguraa kee jijjiiruuf akka barbaachisummaa isaatti faayilii barruu fayyadami.

Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.

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>

Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.

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>

Tarreewwan

Unstyled ta'e

list-styleWantoota tarree irratti marga durtii fi bitaa haqi (ijoollee battalaa qofa). Kun wanta tarree ijoollee battalaa qofa ilaallata , jechuunis tarreewwan man'ee kamiifuu gita dabaluu si barbaachisa akkasumas.

Kun tarreedha.
Guutummaatti unstyled ta'ee mul'ata.
Caasaadhaan ammallee tarreedha.
Haa ta'u malee, akkaataan kun elementoota mucaa battalaa qofa irratti hojjeta.
Tarreewwan man'ee keessa jiran:
- akkaataa kanaan hin tuqaman
- ammas rasaasa ni agarsiisa
- fi margina bitaa sirrii ta’e qabaachuu
Kun amma iyyuu haalawwan tokko tokko keessatti faayidaa qabaachuu dandaʼa.

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>

Sarara keessaa

Rasaasa tarree tokkoo haqiitii ifa tokko margintokko walnyaatinsa gita lamaatiin hojiirra oolchi, .list-inlinefi .list-inline-item.

Kun wanta tarreedha.
Kan biraa immoo.
Garuu sarara keessaa agarsiifamu.

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>

Hiriirsa tarree ibsaa

Gitoota sirna tarjaa keenyaa durtii ibsaman (ykn makaawwan hiikaa) fayyadamuun jechootaa fi ibsaalee qajeelaan qindeessii. .text-truncateYeroo dheeraadhaaf, barruu eliipsiitiin cicciruuf filannoodhaan gita dabaluu dandeessa .

Tarreewwan ibsa

Tarreen ibsa jechoota hiikuuf mijataa dha.

Jecha

Hiika jecha kanaaf kenname.

Akkasumas barruu hiika iddooqa tokko tokko dabalataa.

Jecha biraa

Hiikni kun gabaabaa waan ta’eef keewwata dabalataa ykn waan tokkollee hin jiru.

Jechi ciccirame ni ciccirama

Kunis yeroo bakki dhiphatu faayidaa qabaachuu danda’a. Dhuma irratti eliipsii itti dabala.

Koonyaa gochuu

Tarree hiika man'ee: Tarreewwan hiika akka jaallattan dhaga'eera. Mee tarree hiika kee keessa tarree hiikaa tokkon kaa'a.

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>

Hammangaa qubee deebii kennu

Bootstrap 5 keessatti, hammangaa qubee deebii kennu durtii dandeessifneerra, barruun hammangaa meeshaa fi buufata ilaalchaa irratti caalaatti uumamaan akka safaru hayyamneerra. Kun akkamitti akka hojjetu baruuf fuula RFS ilaalaa .

Sass jedhama

Jijjiiramoota

Mata dureewwan jijjiiramoota of kennanii tokko tokko safaraa fi addaan fageenyaaf qabu.

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

Qaamonni taayipoogiraafii adda addaa asitti fi Reboot keessatti uwwifaman jijjiiramoota adda ta'anis qabu.

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

Mixins jedhaman

Miksiin adda ta'e barreessuudhaaf hin jiru, garuu Bootstrap Responsive Font Sizing (RFS) fayyadama .