Taayipoogiraafii

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

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 biraawzari (akkaataa idileetti 16px) jennee fudhanna.
$font-family-base, $font-size-base, fi amaloota $line-height-baseakka bu'uura maxxansaa keenyaa <body>.
Halluu hidhaa waliigalaa karaa saagi $link-colorfi jala sarara hidhaa qofa irratti hojii irra oolchi :hover.
( 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

<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

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

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

Geggeessi

Keeyyatni tokko .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii. Duis mollis, est kan koomoodoo hin taane.

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

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

.markfi .smallgitaawwan akkasumas akkaataa walfakkaataa hojiirra oolchuuf ni argamu akkasumas <mark>hiika <small>hiika hin barbaadamne kamiyyuu kan mallattoolee fidan irraa fagaatanii.

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

Faayidaa barruu

Faayidaa barruu fi faayidaa halluu keenyaan qindaa'ina barruu, jijjiiri, akkaataa, ulfaatina, fi halluu 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

<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. HTML<blockquote class="blockquote"> kamiyyuu akka caqasaatti marsi .

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

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

Madda tokko moggaasuu

<footer class="blockquote-footer">Madda adda baasuuf a itti dabali . Maqaa hojii madda <cite>.

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa

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

Hiriirsuu

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

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa

<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 taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa

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

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.

Lorem ipsum dolor taa'aa amet
Consectetur adipiscing elit jedhamuun beekama
Lakkoofsa guutuu molestie lorem at mass
Faasilisis kan pretium nisl aliquet keessatti argamu
Nulla volutpat alikiyaam velit jedhamuun beekama
- Phasellus iaculis neque jedhamuun beekama
- Purus sodales ultricies jedhamuun beekama
- Vestibulum laoreet porttiitor sem
- Ak tristique libero volutpat irratti
Faucibus porta lacus fringilla vel jedhamuun beekama
Aenean taa'u amet erat nunc
Eget porttitor lorem jedhamtu

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

Sarara keessaa

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

Lorem ipsum jedhamuun beekama
Phasellus iaculis jedhamuun beekama
Nullaa volutpat jedhama

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

Hiriirsa tarree ibsaa

Gitoota sirna tarjaa keenyaa durtii ibsaman (ykn makaa 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.

Euismod jedhama

Vestibulum id ligula porta felis euismod sanyiin eget laasiiniyaa odio sem nec elit.

Donec id elit non mi porta gravida yeroo eget metus jedhamutti.

Malesuada portaa jedhama

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Jechi ciccirame ni ciccirama

Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum massa qofa taa'uu amet risus.

Koonyaa gochuu

Tarree hiika man'ee: Eeniyaan posuere, tortor sed abaarsa 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>

Taayipogiraafii deebii kennuu danda’u

Taayipogiraafiin deebii kennuu jechuun barruu fi qaamolee salphaatti elementii font-sizehundee'wwan gaaffiiwwan miidiyaa walduraa duubaan jiran sirreessuudhaan iskeelii gochuu agarsiisa. Bootstrap kana siif hin godhu, garuu yoo barbaadde itti dabaluun salphaadha.

Fakkeenyi isaa qabatamaan kunooti. font-sizeGaaffii s fi miidiyaa barbaaddan filadhaa .

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