Bu'uuraalee Bootstrap ijoo ta'an irratti lowdown argadhu, mala keenya guddina weeb fooyya'aa, saffisaa, cimaa ta'e dabalatee.

Gosa doktii HTML5

Bootstrap qaamolee HTML murtaa'oo fi amaloota CSS kanneen fayyadama gosa doktii HTML5 barbaadan fayyadama. Jalqaba pirojektoota kee hunda irratti dabali.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Mobile dursa

Bootstrap 2 waliin, roga ijoo unkaaf akkaataa filannoowwan michuu moobaayilaaf ta'an daballeerra. Bootstrap 3 waliin pirojektii jalqabarraa kaasee moobaayilaaf mijaawaa akka ta'uuf irra deebiin barreessineerra. Akkaataa moobaayilaa filannoo irratti dabaluu mannaa, isaan sirriitti gara wiirtuutti bishaanitti makamaniiru. Dhugaa dubbachuuf, Bootstrap jalqaba mobile dha . Akkaataawwan jalqabaa moobaayilaa faayiloota adda addaa keessatti osoo hin taane guutummaa mana kitaabaa keessatti argamuu danda'u.

Agarsiisa sirrii fi guddisuu tuquu mirkaneessuuf, mallattoo meetaa buufata ilaalchaa gara keetti dabali <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noDandeettii guddisuu meeshaalee sochootuu irratti mallattoo meetaa buufata ilaalchaa irratti dabaluudhaan hanqisuu dandeessa . Kunis guddisuu hanqisa, jechuunis fayyadamtoonni garagalchuu qofa danda'u, fi bu'aan isaas marsariitiin kee xiqqoo akka application dhalootaa ta'ee akka itti dhaga'amu taasisa. Walumaagalatti, marsariitii hunda irratti kana hin gorsinu, kanaaf of eeggannoo godhaa!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Taayipoogiraafii fi hidhannoowwan

Bootstrap agarsiisa addunyaa bu'uuraa, barreessuu, fi akkaataa walqabsiisaa saaga. Addatti ammoo, nuti:

background-color: #fff;Irratti kaa'ibody
@font-family-baseAmaloota , @font-size-base, fi @line-height-baseakka bu'uura maxxansaa keenyaatti fayyadami
Halluu hidhaa waliigalaa karaa saagi @link-colorfi sarara hidhaa qofa irratti hojii irra oolchi:hover

Akkaataawwan kun keessaa argachuun ni danda'ama scaffolding.less.

Normalize gochuu.css

Fakkeenya qaxxaamuraa-browser fooyya'aa ta'eef , Normalize.css fayyadamna , pirojektii Nicolas Gallagher fi Jonathan Neal .

Konteenaroota

Bootstrap qabiyyee saayitii marsuu fi sirna giiridii keenyaa kaa'uuf elementii of keessaa qabu barbaada. Pirojektoota kee keessatti fayyadamuuf qabduu lama keessaa tokko filachuu dandeessa. Hubadhu, sababa paddingfi kana caalaa, qabduun lamaanuu nestable miti.

.containerQabduu bal'ina dhaabbataa deebii kennuuf fayyadami .

<div class="container">
  ...
</div>

Qabduu bal'ina guutuuf fayyadami .container-fluid, bal'ina guutuu buufata ilaalchaa keetii kan bal'isu.

<div class="container-fluid">
  ...
</div>

Bootstrap deebii kan kennu, sirna giiridii dhangala'aa jalqabaa socho'aa kan meeshaan ykn guddinni buufata ilaalchaa dabalaa deemuun hanga tarjaa 12tti haala sirrii ta'een guddisu of keessatti qabata. Filannoowwan qindaa'ina salphaadhaaf gitaalee durtii ibsaman of keessatti qabata , akkasumas qindaa'inoota hiika baay'ee uumuuf makaawwan humna qaban of keessatti qabata .

Seensa

Sirnoonni tarjaa qindaa'inoota fuula karaa tarreewwanii fi tarjaawwan tartiiba qabiyyee kee keessa jiran uumuuf fayyadamu. Sirni giiridii Bootstrap akkamitti akka hojjetu kunooti:

.containerTarreewwan sirriitti qindaa'uu fi qaawwaaf ( bal'ina-dhaabbataa) ykn .container-fluid(bal'ina-guutuu ) keessa kaa'amuu qabu .
Gareewwan tarjaawwan qajeeloo uumuuf tarreewwan fayyadami.
Qabiyyeen tarjaawwan keessa kaa'amuu qaba, fi tarjaawwan qofti ijoollee tarreewwanii battalumatti ta'uu danda'u.
Gitoota tarjaa durtii ibsaman akka .rowfi .col-xs-4haalata tarjaa saffisaan hojjechuuf ni argamu. Miksiin xiqqaan qindaa'inoota hiika baay'eedhaafis fayyadamuun ni danda'ama.
Tarjaawwan gutters (qaawwa qabiyyee tarjaa gidduu jiru) karaa uumu padding. Paadiingiin sun tarreewwan keessatti tarjaa jalqabaa fi isa dhumaa karaa margina negaatiivii .rows irratti ofseeti.
Margiin negaatiivii fakkeenyonni armaan gadii maaliif akka outdent ta’aniif. Qabiyyeen tarjaawwan tarjaa keessa jiru qabiyyee tarjaa hin taane waliin akka sararamuuf.
Tarjaawwan tarjaa lakkoofsa tarjaawwan jiran kudha lamaa kan ati span gochuu barbaaddu ifteessuudhaan uumamu. Fakkeenyaaf, tarjaawwan walqixa sadii sadii fayyadamu turan .col-xs-4.
Yoo tarjaawwan 12 ol tarree tokko keessa kaa'aman, tokkoon tokkoon garee tarjaawwan dabalataa, akka yuunitii tokkootti, sarara haaraa irratti ni marma.
Gitoota tarjaa meeshaalee bal'ina iskiriinii hammangaa tuqaa ciccitaa caalu ykn walqixa qaban irratti raawwatiinsa qabu, fi gita tarjaa meeshaalee xixiqqoo irratti xiyyeeffate irra darba. Kanaafuu, fkn gita kamiyyuu elementii tokko irratti hojii irra oolchuun meeshaalee giddugaleessaa irratti qofa osoo hin taane yoo gitaan tokko hin jirre .col-md-*meeshaalee gurguddoo irrattis istaayilii isaa irratti dhiibbaa qabaata ..col-lg-*

Fakkeenyota qajeeltoowwan kana koodii kee irratti hojiirra oolchuuf jiran ilaali.

Gaaffii miidiyaa

Sirna giiridii keenya keessatti qabxiiwwan ciccituu furtuu uumuuf gaaffiiwwan miidiyaa armaan gadii faayiloota keenya Xiqqaa keessatti fayyadamna.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Gaaffiiwwan miidiyaa kana irratti darbee darbee bal'isnee a hammachuudhaan max-widthCSS tuuta meeshaalee dhiphoo ta'anitti daangeessina.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Filannoowwan giiridii

Akkaataa gama sirna tarjaa Bootstrap meeshaalee hedduu gabatee harkaa qaban irratti hojjetan ilaali.

	Meeshaalee xixiqqoo dabalataa Bilbiloota (<768px) .	Meeshaalee xixiqqoo Taableetota (≥768px) .	Meeshaalee giddu galeessaa Desktops (≥992px) .	Meeshaalee gurguddoo Desktops (≥1200px) .
Amala giiridii	Yeroo hunda Horizontal ta’a	Jalqabuuf kufe, qabxiiwwan cabbii olitti qajeelaa
Bal’ina qabduu	Tokkollee hin jiru (auto) .	750px ta'a	970px ta'a	1170px ta'a
Durtii gitaa	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# kan tarjaawwanii	12.
Bal'ina tarjaa	Auto	~62px jedhama	~81px jedhama	~97px jedhama
Bal'ina gutter	30px (15px tokkoon tokkoon cinaacha tarjaa tokkoo irratti) .
Nestable kan ta'e	Eeyyee
Ofseetota	Eeyyee
Tartiiba tarree	Eeyyee

Fakkeenya: Tuulamaa-gara-horizontal

Tuuta gita tarjaa tokko fayyadamuun .col-md-*, meeshaalee deeskitooppii (giddu galeessa) irratti qajeelaa ta'uu isaa dura meeshaalee sochootuu fi meeshaalee taableetii (hanga xiqqaa dabalataa hanga xiqqaa) irratti tuulamee jalqabu sirna giiridii bu'uuraa uumuu dandeessa. Tarjaawwan tarjaa kamiyyuu keessa kaa'i .row.

.kol-md-1 jedhamuun beekama

.kol-md-8 jedhamuun beekama

.kol-md-4 jedhamuun beekama

.kol-md-6 jedhamuun beekama

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Fakkeenya: Qabduu dhangala’aa

Haalata tarjaa bal'ina dhaabbataa kamiyyuu gara qindaa'ina bal'ina guutuutti jijjiiri, isa alaa kee .containergara .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Fakkeenya: Mobaayila fi deeskitooppii

Tarjaawwan kee salphaatti meeshaalee xixiqqoo keessatti akka tuulaman hin barbaadduu? .col-xs-* .col-md-*Tarjaawwan kee irratti dabaluudhaan gita tarjaa meeshaa xiqqaa fi giddugaleessaa dabalataa fayyadami . Akkaataa inni hundi itti hojjetu yaada fooyya'aa argachuuf fakkeenya armaan gadii ilaali.

.kol-xs-12 .kol-md-8 jedhamuun beekama

.kol-xs-6 .kol-md-4 jedhamuun beekama

.col-xs-6 jedhamuun beekama

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Fakkeenyaaf: Mobaayila, taableetii, deeskitooppii

.col-sm-*Fakkeenya duraa irratti ijaari, gita taableetii waliin haalata daran daayinamikii fi humna guddaa qabu uumuudhaan .

.kol-xs-12 .kol-sm-6 .kol-md-8

.kol-xs-6 .kol-md-4 jedhamuun beekama

.kol-xs-6 .kol-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Fakkeenya: Marfama tarjaa

Yoo tarjaawwan 12 ol tarree tokko keessa kaa'aman, tokkoon tokkoon garee tarjaawwan dabalataa, akka yuunitii tokkootti, sarara haaraa irratti ni marma.

.kol-xs-9 jedhamuun beekama

.col-xs-4
Erga 9 + 4 = 13 > 12, div bal'ina tarjaa 4 kun akka yuunitii walitti aanee tokkootti sarara haaraa irratti marfama.

.col-xs-6
Tarjaawwan itti aanan sarara haaraa irratti itti fufu.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Tarjaa deebii kennuudhaan deebisanii saaga

Sadarkaa afran giiridoota jiran waliin dhimmoota bakka, bakka cabbii murtaa'e irratti, tarjaawwan kee tokko isa kaan caalaa dheeraa waan ta'eef sirriitti hin qulqulleessine keessa fiiguun kee hin oolu. Sana sirreessuuf, walnyaatinsa a fi gita faayidaa deebii kennuu.clearfix keenyaa fayyadami .

.col-xs-6 .col-sm-3 Viewport
keessan jijjiiri ykn fakkeenyaaf bilbila keessan irratti ilaalaa.

.kol-xs-6 .kol-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Qabxiilee ciccituu deebii kennuu irratti tarjaa qulqulleessuu malees , ofseetota, dhiibuu, ykn harkisa deebisanii saaguu si barbaachisuu danda'a . Kana gochaan fakkeenya tarjaa keessatti ilaali .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Tarreewwan ofseeti gochuu

.col-md-offset-*Gitoota fayyadamuun tarjaawwan gara mirgaatti sochoosi . Gitoota kunniin marga bitaa tarjaa tarjaadhaan dabalu *. Fakkeenyaaf, tarjaa afur irra .col-md-offset-4sochoosa ..col-md-4

.kol-md-4 jedhamuun beekama

.kol-md-4 .kol-md-ofseeti-4

.kol-md-3 .kol-md-ofseeti-3

.kol-md-6 .kol-md-ofseeti-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Akkasumas ofseetota sadarkaa tarjaa gadii irraa .col-*-offset-0gita waliin irra darbuu dandeessa.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Tarreewwan koonyaa gochuu

Qabiyyee kee tarjaa durtii waliin man'ee gochuuf, tarjaa haaraa .rowfi tuuta .col-sm-*tarjaa jiru keessaa dabali .col-sm-*. Tarreewwan man'ee tuuta tarjaawwan hanga 12 fi isaa gadi ida'an of keessatti qabachuu qabu (tarjaawwan 12 jiran hunda fayyadamuun hin barbaachisu).

Sadarkaa 1ffaa: .col-sm-9

Sadarkaa 2ffaa: .col-xs-8 .col-sm-6

Sadarkaa 2ffaa: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Tartiiba tarree

Tartiiba tarjaawwan tarjaa keenya ijaaraman gitaalee .col-md-push-*fi .col-md-pull-*fooyyessaa wajjin salphaatti jijjiiri.

.kol-md-9 .kol-md-dhiibuu-3

.kol-md-3 .kol-md-harkisuu-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Miksiinii fi jijjiiramoota xiqqaa

Gitoota tarjaa durtii ijaaraman kanneen qindaa'inoota saffisaa ta'aniif dabalataan , Bootstrap jijjiiramoota Xiqqaa fi makaawwan haalata salphaa, hiika mataa keetii saffisaan uumuuf of keessatti qabata.

Jijjiiramoota

Jijjiiramoonni lakkoofsa tarjaa, bal'ina gutter, fi qabxii gaaffii miidiyaa tarjaawwan lola'an itti jalqaban murteessu. Kanneen gita tarjaa durtii ibsaman armaan olitti galmaa'an uumuuf, akkasumas makaa amala armaan gadii tarreeffamaniif fayyadamna.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins jedhaman

Miksiin jijjiiramoota tarjaa waliin ta'uun CSS hiika tarjaa tarjaa dhuunfaa uumuuf fayyadamu.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Fakkeenya fayyadama

Jijjiiramoota gara gatiiwwan amala mataa keetii fooyyessuu dandeessa, ykn makaawwan gatiiwwan durtii isaanii waliin qofa fayyadamuu dandeessa. Fakkeenyi qindaa'inoota durtii fayyadamuun qindaa'ina tarjaa lamaa qaawwa gidduu jiru uumuuf kunooti.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Mata dureewwan

Mata dureewwan HTML hundi, <h1>karaa <h6>, ni argamu. .h1karaa .h6gitaawwaniis ni jiru, yeroo ati akkaataa qubee mataduree tokkoo walsimsiisuu barbaaddu garuu ammas barruun kee sarara keessaa akka mul'atu barbaadduuf.

h1. Mata duree bootstrap jedhu	Walakkaa jajjaboo 36px
h2. Mata duree bootstrap jedhu	Walakkaa jajjaboo 30px
h3. Mata duree bootstrap jedhu	Walakkaa jajjaboo 24px
h4. Mata duree bootstrap jedhu	Walakkaa jajjaboo 18px
h5. Mata duree bootstrap jedhu	Walakkaa jajjaboo 14px
h6. Mata duree bootstrap jedhu	Walakkaa jajjaboo 12px

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

<small>Barruu salphaa, lammaffaa mata duree kamiyyuu keessatti mallattoo waliigalaa ykn .smallgita waliin uumi .

h1. Mata duree bootstrap Barruu lammaffaa

h2. Mata duree bootstrap Barruu lammaffaa

h3. Mata duree bootstrap Barruu lammaffaa

h4. Mata duree bootstrap Barruu lammaffaa

h5. Mata duree bootstrap Barruu lammaffaa

h6. Mata duree bootstrap Barruu lammaffaa

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

Koppii qaamaa

Bootstrap'n durtii addunyaa 14pxfont-size dha , a of 1.428 . Kunis keewwata fi hunda irratti raawwatiinsa qaba. Dabalataanis, (keewwattoonni) margina jalaa walakkaa sarara-olka'iinsa isaanii shallagame (10px durtii) argatu.line-height<body><p>

Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Nullam id dolor id nibh ultricies konkolaataa.

Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Donec ullamcorper nulla kan hin meetus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit. Donec ullamcorper nulla kan hin meetus auctor fringilla.

Maecenas sed diam eget risus varius blandit taa'uu amet non magna. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit.

<p>...</p>

Koppii qaama dursaa

Keeyyatni tokko .lead.

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

<p class="lead">...</p>

Xiqqaadhaan ijaarame

Iskeeliin maxxansaa jijjiiramoota keessatti jijjiiramoota Xiqqaa lama irratti hundaa'a.less : @font-size-basefi @line-height-base. Inni jalqabaa hammangaa qubee bu'uuraa guutummaatti fayyadamu yoo ta'u inni lammaffaan immoo olka'iinsa sarara bu'uuraati. Jijjiiramoota sanaa fi herrega salphaa tokko tokko fayyadamnee margaa, paadiingii, fi sarara-olka'iinsa akaakuu keenya hundaafi kkf uumna. Isaan kana dhuunfachiisi Bootstrap ni madaqsa.

Qaamolee barruu sarara keessaa

Barreeffama mallattoo qabu

Fiigicha barruu sababa barbaachisummaa isaatiin haalata biraa keessatti calaqqisiisuuf, <mark>mallattoo fayyadami.

Taagiin mallattoo itti fayyadamuu dandeessairra keessabarreeffama.

You can use the mark tag to <mark>highlight</mark> text.

Barreeffama haqame

Uggura barruu haqame agarsiisuuf <del>mallattoo fayyadami.

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

<del>This line of text is meant to be treated as deleted text.</del>

Barreeffama keessaa rukutuu

Uggura barruu kana booda barbaachisaa hin taane agarsiisuuf <s>mallattoo fayyadami.

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

<s>This line of text is meant to be treated as no longer accurate.</s>

Barruu galfame

Dabalata galmee agarsiisuuf <ins>mallattoo fayyadami.

Sararri barruu kun akka dabalata galmeetti akka ilaalamu yaadameeti.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Barreeffama jala sararame

Barruu jala <u>sararuuf mallattoo fayyadami.

Sararri barruu kun akka jala sararametti ni agarsiisa

<u>This line of text will render as underlined</u>

Mallattoolee cimsa durtii HTML akkaataa salphaa qaban fayyadami.

Barreeffama xiqqaa

Sarara keessaa ykn uggura barruu cimsuu irraa hir'isuuf, <small>barruu hammangaa warraa %85 irratti saaguuf mallattoo fayyadami. font-sizeQaamonni mataduree qaamolee man'eedhaaf kan isaanii fudhatu <small>.

Akka filannootti qaama sarara keessaa .smallbakka kamiyyuu waliin fayyadamuu dandeessa <small>.

Sararri barruu kun akka qubee xiqqaatti akka ilaalamu yaadameeti.

<small>This line of text is meant to be treated as fine print.</small>

Ija jabeessa

Cuqqaa barruu ulfaatina qubee ulfaataa ta'een cimsuuf.

Kutaan barruu armaan gadii akka barruu jajjabootti agarsiifama .

<strong>rendered as bold text</strong>

Qubee jallisii

Cuqqaa barruu qubee jallisiitiin cimsuuf.

Kutaan barruu armaan gadii akka barruu jallisii ta'etti agarsiifama .

<em>rendered as italicized text</em>

Qaamolee wal jijjiirraa

Fayyadamuuf bilisa ta'aa <b>fi <i>HTML5 keessatti. <b>jechoota ykn gaaleewwan barbaachisummaa dabalataa osoo hin dabarsin calaqqisiisuuf kan yaadame yoo ta’u <i>irra caalaa sagalee, jechoota teeknikaa fi kkf kan ta’udha.

Gitoota qindeessuu

Barruu gara qaamolee gita qindeessaa barruu qabanitti salphaatti irra deebi'ii qindeessii.

Barruu bitaa qindaa'e.

Barruu giddugaleessa qindaa'e.

Barruu mirgaa qindaa'e.

Barreeffama haqa qabeessa.

Barreeffama marfamu hin qabu.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Kutaalee jijjiiramaa

Barruu qaamolee gita qubee guddaa barruu qaban keessatti jijjiiri.

Barreeffama qubee xiqqaa qabu.

Barreeffama qubee guddaa qabu.

Barreeffama qubee guddaadhaan barreeffame.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Gabateewwan

Hojiirra oolmaa istaayil ta'e <abbr>elementii HTML's gabaabduu fi gabaabduudhaaf gosa babal'ate hover irratti agarsiisuuf. Gabaabduuwwan titleamaloota qaban daangaa jalaa tuqaa ifaa fi qaree gargaarsaa yeroo hover qabu, haala dabalataa hover irratti fi fayyadamtoota teeknooloojiiwwan gargaarsaa kenna.

Gabatee bu’uuraa

Gabaabduun jecha amaloota attr dha .

<abbr title="attribute">attr</abbr>

Jalqaba qabaachuu

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

HTML erga daabboo ciranii as waan hunda caaludha.

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

Teessoowwan

Odeeffannoo quunnamtii akaakayyuu dhiyoo jiruuf ykn qaama hojii guutuuf dhiyeessu. Sararoota hunda waliin xumuruun foormaatii eegi <br>.

Twitter, Inc.
1355 Daandii Gabaa, Suutaa 900
Saan Firaansiiskoo, CA 94103
P: (123) 456-7890

Maqaa Guutuu
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Jechoota ugguraa

Galmee kee keessaa madda biraa irraa uggura qabiyyee caqasuudhaaf.

Caqasa uggura durtii

HTML<blockquote> kamiyyuu akka caqasaatti marsi . Caqasoota qajeeloodhaaf, a .<p>

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Filannoowwan caqasaa ugguruu

Jijjiirama akkaataa fi qabiyyee jijjiirama salphaa istaandaardii irratti <blockquote>.

Madda tokko moggaasuu

<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>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Agarsiisa wal jijjiirraa

.blockquote-reverseQabiyyee mirgaan qindaa'eef caqasa ugguraaf dabali .

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

Mata duree Madda keessatti nama beekamaa

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Tarreewwan

Ajaja hin qabne

Tarree wantoota tartiiba ifatti dhimma hin qabne.

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>
  <li>...</li>
</ul>

Ajajame

Tarree wantoota tartiiba ifatti dhimma itti bahu .

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
Faucibus porta lacus fringilla vel jedhamuun beekama
Aenean taa'u amet erat nunc
Eget porttitor lorem jedhamtu

<ol>
  <li>...</li>
</ol>

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>...</li>
</ul>

Sarara keessaa

Wantoota tarree hunda sarara tokko irratti display: inline-block;fi padding ifaa tokko tokko waliin kaa'i.

Lorem ipsum jedhamuun beekama
Phasellus iaculis jedhamuun beekama
Nullaa volutpat jedhama

<ul class="list-inline">
  <li>...</li>
</ul>

Ibsa

Tarree jechoota ibsa isaanii waliin walqabatan waliin.

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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Ibsa qajeelaa

Jechootaa fi ibsawwan <dl>wal cinaa sararaan tolchi. Akka durtii s tuulamee jalqaba <dl>, garuu yeroo navbar babal'atu, kanaaf kana godhi.

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.
Felis euismod semper eget laasiiniyaa jedhamuun beekama: Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum massa qofa taa'uu amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Ofiin cicciruu

Tarreewwan ibsa qajeelaa jechoota tarjaa bitaa keessatti walsimsiisuuf baay'ee dheeraa ta'an text-overflow. Buufatawwan ilaalchaa dhiphoo ta'an keessatti, gara qindaa'ina durtii tuulameetti ni jijjiiramu.

Sarara keessaa

Cuquliisa koodii sarara keessaa waliin marsi <code>.

Fakkeenyaaf, <section>akka sarara keessaatti marfamuu qaba.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Galtee fayyadamaa

<kbd>Galtee akkaataa adda addaatiin karaa kiiboordii galfamu agarsiisuuf kan fayyadami .

Galmeewwan jijjiiruuf, cdmaqaa galmee itti aansuun barreessi.
Sajoo gulaaluuf, dhiibi ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Blookii bu'uuraa

<pre>Sararoota koodii hedduudhaaf fayyadami . Sirnaan agarsiisuuf koodii keessatti qaree kofa kamiyyuu miliquu kee mirkaneessi.

<p>Barruu fakkeenyaa asitti...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Filannoodhaan .pre-scrollablegita dabaluu dandeessa, kunis olka'iinsa ol'aanaa 350px saaguu fi barruu qaxxaamuraa siiqqe y kenna.

Jijjiiramoota

Jijjiiramoota agarsiisuuf <var>mallattoo fayyadami.

y = m x + b jedhamuun beekama

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Bu’aa sample

Uggura agarsiisuuf bu'aa fakkeenyaa sagantaa irraa <samp>mallattoo fayyadami.

Barreeffamni kun akka bu’aa fakkeenyaa sagantaa kompiitaraa irraa argamutti akka ilaalamu yaadameeti.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Fakkeenya bu’uuraa

Akkaataa bu'uuraatiif—paadiingii ifaa fi qoqqoodduu qajeelaa qofaaf—gita bu'uuraa .tablekamiyyuutti dabali <table>. Super redundant fakkaachuu danda'a, garuu itti fayyadama bal'aa gabatee pilaaginoota biroo kan akka kalaandarii fi filattoota guyyaa yoo ilaalle, akkaataa gabatee amala keenyaa adda baasuu filanneerra.

Barreeffama gabatee filannoo.
#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

<table class="table">
  ...
</table>

Tarreewwan sarara qaban

.table-stripedTarree gabatee kamiyyuu keessaa zebra-striping dabaluudhaaf fayyadami <tbody>.

Walsimsiisa qaxxaamuraa-browser

Gabateewwan sarara qaban karaa :nth-childfilannoo CSS, kan Internet Explorer 8 keessatti hin argamu, akkaataa itti qophaa'u.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

<table class="table table-striped">
  ...
</table>

Gabatee daangaa qabu

.table-borderedDaangaawwan gama hundaan gabatee fi man'eewwaniif dabali .

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

<table class="table table-bordered">
  ...
</table>

Tarreewwan hover

.table-hoverTarreewwan gabatee irratti haalata hover dandeessisuuf dabali <tbody>.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

<table class="table table-hover">
  ...
</table>

Gabatee gabaabfame

.table-condensedPaadiingii seelii walakkaatti muruun gabateewwan caalaatti kompaaktii gochuuf itti dabali .

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

<table class="table table-condensed">
  ...
</table>

Kutaalee haala dubbii (contextual classes).

Tarreewwan gabatee ykn man'eelee dhuunfaa halluu itti gochuuf gitawwan yaadannoo fayyadami.

Kutaa	Ibsa
`.active`	Halluu hover tarree ykn man'ee murtaa'e irratti hojii irra oolcha
`.success`	Tarkaanfii milkaa’aa ykn gaarii agarsiisa
`.info`	Jijjiirama ykn gocha odeeffannoo giddu galeessa ta’e agarsiisa
`.warning`	Akeekkachiisa xiyyeeffannoo barbaadu ta’uu danda’u agarsiisa
`.danger`	Tarkaanfii balaa qabu ykn hamaa ta’uu danda’u agarsiisa

#	Mata duree tarjaa	Mata duree tarjaa	Mata duree tarjaa
1. 1.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
2. 2.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
3. 3.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
4.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
5. 5.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
6. 6.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
7. 7.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
8. 8.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree
9. 9.	Qabiyyee tarree	Qabiyyee tarree	Qabiyyee tarree

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Tarree gabatee ykn man'ee dhuunfaa irratti hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul'ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriiniitti hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (barruu mul'atu tarree/man'ee gabatee barbaachisaa ta'e keessatti), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-onlygita waliin dhokatee.

Gabateewwan deebii kennan

Meeshaalee xixiqqoo irratti (768px jalatti) akka qajeelaan akka tarreeffaman gochuuf, kamiyyuu .tablekeessatti marsuudhaan gabatee deebii kennu uumi. .table-responsiveYeroo waan bal'ina 768px ol ta'e kamiyyuu irratti ilaaltu, gabateewwan kana keessatti garaagarummaa tokkollee hin argitu.

Dhaabbataa ciccituu/ciccituu

Gabateewwan deebii kennan overflow-y: hidden, kan qabiyyee kamiyyuu kan qarqara jalaa ykn gubbaa gabatee bira darbee deemu fayyadamu fayyadamu. Keessattuu, kun menu gadi bu'aa fi wiijetoota qaama sadaffaa biroo irraa cicciruu danda'a.

Firefox fi tuuta dirree

Firefox akkaataa tuuta dirree awkward tokko tokko widthkan gabatee deebii kennuu gidduu seenu hirmaachisu qaba. Kun hack Firefox adda ta'e kan Bootstrap keessatti hin kennine malee irra darbuu hin danda'u:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Odeeffannoo dabalataaf, deebii Tuullaa Overflow kana dubbisi .

#	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee
1. 1.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee
2. 2.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee
3. 3.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee

#	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee	Mata duree gabatee
1. 1.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee
2. 2.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee
3. 3.	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee	Man'ee gabatee

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Fakkeenya bu’uuraa

To'annoon unkaa dhuunfaa ofumaan akkaataa addunyaa tokko tokko argatu. Barruu <input>, <textarea>, fi <select>qaamolee waliin hunduu akka durtiitti .form-controlqindaa'u . Fageenya gaarii ta'eef width: 100%;asxaalee fi too'annoowwan keessa marsi ..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Garee unkaa gareewwan galtee waliin hin makiin

Garee unkaa kallattiin gareewwan galtee waliin hin makamin . Inumaayyuu, garee galtee garee unkaa keessaa man'ee.

Unka sarara keessaa

To'annoo bitaa-hiriirfamee fi sarara keessaa-ugguraaf unka kee irratti dabali .form-inline(kan a ta'uu hin qabne ). Kun unkaalee mul'annoo keessaa yoo xiqqaate bal'ina 768px qaban qofaaf hojjeta.<form>

Bal'ina amala barbaadu ta'a

Galteewwanii fi filannoowwan width: 100%;Bootstrap keessatti durtiidhaan hojiirra oolaniiru. Unkaalee sarara keessaa keessa, sana gara width: auto;too'attoonni hedduun sarara tokko irratti jiraachuu akka danda'anitti deebisna. Haalata kee irratti hundaa'uun, bal'inni amala dabalataa barbaachisuu danda'a.

Yeroo hunda asxaalee itti dabali

Dubbistoonni iskiriinii unkaalee kee irratti rakkina ni qabaatu yoo galtee hundaaf asxaa hin daballe. .sr-onlyUnkaalee sarara keessaa kanaaf, asxaalee gita fayyadamuun dhoksuu dandeessa . Malli filannoo dabalataa teknooloojiiwwan gargaarsaaf asxaa kennuu, kan akka aria-label, aria-labelledbyykn titleamalli jiru. Yoo kanneen keessaa tokkollee hin jirre, dubbistoonni iskiriinii amallicha fayyadamuutti gargaaramuu danda'u , yoo jiraate, garuu akka bakka bu'aa malawwan asxaa birootti placeholderfayyadamuun akka hin gorfanne hubadhu .placeholder

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Bifa qajeelaa

Asxaalee fi gareewwan too'annoo unkaa haalata qajeelaa keessatti unkaatti dabaluudhaan qindeessuuf gitawwan tarjaa durtii Bootstrap fayyadami .form-horizontal(innis a ta'uu hin qabu <form>). Kana gochuun s akka tarreewwan tarjaa akka amala qabaatu jijjiira .form-group, kanaaf .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

To'annoo deeggarame

Fakkeenyota too'annoo unkaa istaandaardii qindaa'ina unkaa fakkeenyaa keessatti deeggaraman.

Galteewwan

To'annoo unkaa baay'ee beekamaa, man'eewwan galtee barruu irratti hundaa'an. Deeggarsa akaakuu HTML5 hundaaf of keessatti qabata: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, fi color.

Ibsa gosa barbaachisaadha

Galteewwan guutummaatti kan akkaataa itti ta'an yoo isaanii typesirnaan labsame qofa.

<input type="text" class="form-control" placeholder="Text input">

Garee galtee

Barruu ykn qaree walitti makame barruu irratti hundaa'e kamiyyuu duraa fi/ykn booda dabaluuf <input>, qaama garee galtee ilaali .

Naannoo barreeffamaa

To'annoo unkaa kan sararoota barruu hedduu deeggaru. rowsAkka barbaachisummaa isaatti amalli jijjiiri .

<textarea class="form-control" rows="3"></textarea>

Sanduuqawwan filannoo fi raadiyoo

Sanduuqonni filannoo tarree tokko keessatti filannoo tokko ykn hedduu filachuuf yoo ta'an, raadiyoowwan ammoo filannoo tokko baay'ee keessaa filachuuf.

Sanduuqawwan filannoo fi raadiyoowwan hanqifaman ni deeggaraman, garuu qaree "hin hayyamamne" hover warraa irratti kennuudhaaf, gita gara warraatti <label>dabaluu si barbaachisa , , , ykn ..disabled.radio.radio-inline.checkbox.checkbox-inline

Durtii (tuulame) .

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Sanduuqa filannoo fi raadiyoo sarara keessaa

.checkbox-inlineToo'annoo sarara walfakkaataa irratti mul'ataniif gitaalee ykn .radio-inlinesanduuqawwan filannoo ykn raadiyoowwan walduraa duubaan jiran irratti fayyadami .

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Sanduuqawwan filannoo fi raadiyoowwan barruu asxaa hin qabne

Yoo barruu keessaa hin qabne <label>, galteen akka ati eegdutti iddoo qaba. Yeroo ammaa sanduuqa filannoo sarara keessa hin taanee fi raadiyoo qofa irratti hojjeta. Ammas teknooloojiiwwan gargaarsaaf bifa asxaa tokko tokko kennuu yaadadhu (fakkeenyaaf, fayyadamuu aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Filata

border-radiusHubadhaa, menu filannoo dhalootaa hedduun-jechuunis Safari fi Chrome keessatti-golee geengoo karaa qabeentaa fooyya'uu hin dandeenye qabu .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>Too'annoowwan amaloota qabaniif multiple, filannoowwan hedduun durtii agarsiifamu.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

To'annoo istaatiksii

Yeroo barruu ifa ta'e asxaa unkaa cina unka keessa kaa'uu barbaaddu, .form-control-staticgita a irratti fayyadami <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Haala xiyyeeffannoo

Akkaataa durtii outlinetoo'annoo unkaa tokko tokko irratti haqnee box-shadowbakka isaa a tiif hojii irra oolchina :focus.

Demo `:focus`state

Galteen fakkeenyaa armaan olii galmee keenya keessatti :focushaalata a irratti agarsiisuuf akkaataa amala fayyadama .form-control.

Haala hanqifame

disabledWalqunnamtii fayyadamaa ittisuuf amaloota boolii galtee irratti dabali . Galteewwan hanqifaman salphaa ta'anii mul'atanii not-allowedqaree dabalu.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Tuuta man'ee hanqifame

Too'annoowwan hunda keessaa yeroo tokkotti hanqisuuf disabledamalli gara atti dabali .<fieldset><fieldset>

Of eeggannoo waa'ee dalagaa hidhaa kan`<a>`

Akka durtiitti, biraawzaroonni too'annoo unkaa dhalootaa ( <input>, <select>fi <button>qaamolee) a keessa jiran hunda <fieldset disabled>akka hanqifameetti ilaalu, walqunnamtii furtuu fi hantuutee lamaanuu isaan irratti dhorka. Haa ta'u malee, yoo unkaan kee <a ... class="btn btn-*">elementootas of keessaa qabaate, kunniin akkaataa pointer-events: none. Akkuma kutaa waa'ee haalata hanqifame qareedhaaf (fi addatti kutaa xiqqaa elementoota anchor keessatti) keessatti ibsame, qabeentiin CSS kun ammallee sadarkaa hin qabnee fi Opera 18 fi isaa gadii keessatti guutummaatti hin deeggaramne, ykn Internet Explorer 11 keessatti, fi mo'ate 't fayyadamtoonni kiiboordii hidhannoowwan kana akka hin xiyyeeffanne ykn akka hin hojjenne dhorka. Kanaafuu nageenya qabaachuuf, hidhannoo akkasii hanqisuuf JaavaScript amala fayyadami.

Walsimsiisa qaxxaamuraa-browser

Bootstrap akkaataa kana biraawzaroota hunda keessatti hojiirra oolchu yoo ta'u, Internet Explorer 11 fi isaa gadii disabledamaloota a irratti guutummaatti hin deeggaran <fieldset>. Tuuta dirree biraawwaroota kana keessatti hanqisuuf JaavaScript amala fayyadami.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Dubbisa qofa ibsi

readonlyFooyya'iinsa gatii galtee ittisuuf amalli boolii galtee irratti dabali . Galteewwan dubbisa qofaaf salphaa ta'anii mul'atu (akkuma galtee hanqifame), garuu qaree istaandaardii qabadhu.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Barreeffama gargaarsaa

Barruu gargaarsa sadarkaa uggura too'annoo unkaaf.

Barruu gargaarsaa too'annoo unkaa wajjin walqabsiisuu

aria-describedbyBarruun gargaarsaa too'annoo unkaa amaloota fayyadamuu wajjin walqabatu waliin ifatti walqabsiisuu qaba . Kunis teknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – barreeffama gargaarsaa kana yeroo fayyadamaan xiyyeeffatu ykn to’annoo seenu akka beeksisan ni mirkaneessa.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Haala mirkaneessuu

Bootstrap akkaataa mirkaneessuu dogongora, akeekkachiisa, fi haalata milkaa'ina too'annoo unkaa irratti of keessatti qabata. Fayyadamuuf, .has-warning, .has-error, ykn .has-successgara qaama warraatti dabali. Kamiyyuu .control-label, .form-control, fi .help-blockqaama sana keessaa akkaataawwan mirkaneessuu ni fudhata.

Haala mirkaneessaa teknooloojiiwwan gargaaraa fi fayyadamtoota halluu jaamaa ta’aniif dabarsuu

Akkaataawwan mirkaneessaa kana fayyadamuun haala too'annoo unkaa agarsiisuuf agarsiisa mul'ataa, halluu irratti hundaa'e qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa - kan akka dubbistoota iskiriinii - ykn fayyadamtoota halluu jaamaa ta'aniif hin dabarfamu.

Agarsiisni mootummaa filannoo ta’es akka kennamu ni taasisa. Fakkeenyaaf, <label>barruu too'annoo unkaa mataa isaa keessatti akeekkachiisa waa'ee haalataa hammachuu dandeessa (akkuma fakkeenya koodii armaan gadii keessatti ta'u), Gilifiikoonii hammachuu dandeessa (barruu filannoo sirrii ta'e waliin .sr-onlygita fayyadamuun - fakkeenyota Giliifiikoonii ilaali ), ykn kennuudhaan uggura barruu gargaarsa dabalataa . aria-invalid="true"Addatti teeknooloojiiwwan gargaarsaaf, too'annoowwan unkaa sirrii hin taanes amaloota ramadamuu danda'u .

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Mallattoolee filannoo wajjin

Akkasumas mallattoolee yaada filannoo dabaluu .has-feedbackfi mallattoo mirgaatiin dabaluu dandeessa.

<input class="form-control">Mallattoolee yaada deebii qaamolee barruu qofa waliin hojjetu .

Mallattoolee, asxaalee, fi gareewwan galtee

Mallattoolee yaada deebii harkaan kaa'uun galtee asxaa hin qabnee fi gareewwan galtee dabalataa mirgaa qabaniif barbaachisaadha. Sababa dhaqqabummaaf galtee hundaaf asxaa akka kennitan cimsinee isin jajjabeessina. Yoo asxaaleen akka hin mul'anne dhorkuu barbaadde, .sr-onlygita waliin dhoksi. Yoo asxaalee malee gochuu qabda ta'e, topgatii mallattoo yaada deebii sirreessii. Gareewwan galteedhaaf, rightbal'ina dabalata kee irratti hundaa'uun gatii gara gatii piikselii sirrii ta'etti sirreessii.

Hiika mallattoo sanaa gara teeknooloojiiwwan gargaarsaatti dabarsuu

Teeknooloojiiwwan gargaaraa – kan akka dubbistoota iskiriinii – hiika mallattoo sirritti akka dabarsan mirkaneessuuf, barreeffamni dhokataa dabalataa daree wajjin hammatamuu .sr-onlyfi to’annoo unkaa fayyadamuu wajjin walqabatee ifatti walqabsiisuu qaba aria-describedby. Akka filannootti, hiikni (fakkeenyaaf, dirree galtee barruu murtaa'eef akeekkachiisni jiraachuu isaa) bifa biraa tokkoon akka darbu mirkaneessi, kan akka barruu qabatamaa <label>too'annoo unkaa wajjin walqabate jijjiiruu.

Fakkeenyonni armaan gadii duraan haala mirkaneessuu too’annoo unkaa isaanii <label>barruu mataa isaa keessatti kan eeran ta’us, tooftaa armaan olii ( .sr-onlybarruu fi aria-describedby) fayyadamuun kaayyoo fakkeenyaaf hammatameera.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Mallattoolee filannoo unka qajeelaa fi sarara keessaatiin

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`Mallattoolee filannoo asxaalee dhokataa qaban

Yoo .sr-onlygita fayyadamtee too'annoo unkaa dhoksuuf <label>(filannoowwan asxaa biroo fayyadamuu irra, kan akka aria-labelamalootaa), Bootstrap ofumaan bakka mallattoo erga dabalamee booda sirreessa.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Saayizii to'achuu

Gitoota akka fayyadamuun olka'iinsa saagi .input-lg, fi gita tarjaa tarjaa akka fayyadamuun bal'ina saagi .col-lg-*.

Olka’iinsa olka’iinsaa safaruu

To'annoo unkaa dheeraa ykn gabaabaa kan hammangaa qaree walsimsiisu uumi.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Hangii garee unka qajeelaa

Saffisaan asxaalee fi too'annoo unkaa keessaa .form-horizontalguddisuudhaan .form-group-lgykn .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Safara tarjaa

Galteewwan tarjaawwan tarjaa, ykn qaama warraa amala kamiyyuu keessatti, bal'ina barbaadame salphaatti dirqisiisuuf marsi.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Mallattoolee buttooni

Gitoota qaree <a>, <button>, ykn <input>elementii irratti fayyadami.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Fayyadama haala dubbii adda ta’e

Gitoota qaree irratti <a>fi <button>elementoota fayyadamuun kan danda'amu yoo ta'u, qaamolee qofatu <button>qaamolee nav fi navbar keenya keessaa deeggarama.

Hidhamtoota akka buttooniitti hojjetan

Yoo <a>elementoonni akka qaree hojjechuuf fayyadaman – dalagaa fuula keessaa kakaasuu, gara galmee ykn kutaa biraa fuula ammaa keessa deemuu irra – isaanis sirrii ta'e kennamuu qaba role="button".

Agarsiisa qaxxaamuraa-browser

Akka shaakala gaariitti, agarsiisa qaxxaamuraa-browzarii walsimsiisuu mirkaneessuuf yeroo danda'ametti elementii fayyadamuu baay'ee gorsina .<button>

Wantoota biroo keessaa, Firefox <30 keessatti dogongorri tokkoline-height jira kan qaree of -based akka hin saagne nu dhorku <input>, kunis olka'iinsa qaree biroo Firefox irratti sirriitti akka wal hin simne taasisa.

Filannoowwan

Saffisaan qaree akkaataa uumuuf gita qaree jiran kamiyyuu fayyadami.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Halluu fayyadamuun buttooni tokkotti hiika dabaluu agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame yookaan qabiyyee ofii irraa ifa ta'uu isaa mirkaneessi (barruu mul'atu kan qaree), yookaan karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-onlygita waliin dhokate.

Saayiziiwwan

Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? .btn-lg, .btn-sm, ykn .btn-xshammangaa dabalataaf dabali .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Qabduu sadarkaa ugguraa uumi—kanneen bal'ina guutuu warraa dabarsan— dabaluudhaan .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Haala sochii qabu

Qabduuwwan yeroo socho'an dhiibamanii ni mul'atu (duuba dukkanaa'aa, daangaa dukkanaa'aa, fi golgaa galtee waliin). Elementiiwwaniif <button>, kun karaa :active. Elementiiwwaniif <a>, .active. Haa ta'u malee, yoo haalata socho'aa sagantaadhaan fakkeessuu barbaadde s .activeirratti fayyadamuu dandeessa <button>(fi amallicha hammachuu dandeessa).aria-pressed="true"

Qaama qaree

Gitaa sobaa waan ta'eef dabaluu hin barbaachisu :active, garuu yoo mul'ata walfakkaatu dirqisiisuu barbaadde, fuulduratti deemtee itti dabali .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elementii ankuraa

.activeGitaa gara <a>qareewwanitti dabali .

Link jalqabaa Hidhata

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Haala hanqifame

Qabduulee akka hin cuqaafamne godhi opacity.

Qaama qaree

disabledAmala gara <button>qareewwanitti dabali .

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Walsimsiisa qaxxaamuraa-browser

Yoo disabledamaloota a tti dabalte <button>, Internet Explorer 9 fi isaa gadii barruu halluu diimaa barruu-gaaddidduu jibbisiisoo nuti sirreessuu hin dandeenyeen ni agarsiisa.

Elementii ankuraa

.disabledGitaa gara <a>qareewwanitti dabali .

Link jalqabaa Hidhata

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

.disabledAsitti akka gita faayidaatti fayyadamna, gita waliigalaa wajjin wal fakkaata , .activekanaaf durtii tokkollee hin barbaachisu.

Of eeggannoo dalagaa walqabsiisaa

Gitni kun pointer-events: nonedalagaa hidhaa s hanqisuuf yaaluuf fayyadama <a>, garuu qabeentiin CSS sun ammallee sadarkaa hin qabnee fi Opera 18 fi isaa gadii keessatti guutummaatti hin deeggaramne, ykn Internet Explorer 11. Dabalataanis, biraawzaroota deeggaran keessatti illee pointer-events: none, kiiboordii navigeeshiniin dhiibbaa hin qabu, jechuunis fayyadamtoonni kiiboordii ijaan qabaniifi fayyadamtoonni teeknooloojii gargaarsaa ammallee hidhannoowwan kana hojiitti hiikuu ni danda’u jechuudha. Kanaafuu nageenya qabaachuuf, hidhannoo akkasii hanqisuuf JaavaScript amala fayyadami.

Fakkiiwwan deebii kennan

.img-responsiveFakkiiwwan Bootstrap 3 keessa jiran karaa dabalata gitaa deebii-michuu ta'uu danda'u . Kun max-width: 100%;, height: auto;fi display: block;fakkii irratti akka inni elementii warraatti akka gaariitti iskeelii godhutti hojjeta.

.img-responsiveFakkiiwwan gita fayyadaman giddugaleessa gochuuf , .center-blockbakka .text-center. Waa'ee fayyadamaa bal'inaan kutaa gita gargaaraa ilaali ..center-block

Fakkiiwwan SVG fi IE 8-10

Internet Explorer 8-10 keessatti, fakkiiwwan SVG with .img-responsiveguddina wal hin madaalle qabu. Kana sirreessuuf width: 100% \9;bakka barbaachisaa ta'etti itti dabali. Bootstrap kana ofumaan hojiirra hin oolchu sababiin isaas bifa fakkii biroo irratti rakkoo waan fiduuf.

<img src="..." class="img-responsive" alt="Responsive image">

Boca fakkii

<img>Fakkiiwwan piroojektii kamiyyuu keessatti salphaatti akkaataa gochuuf gitaalee gara elementii tokkootti dabali .

Walsimsiisa qaxxaamuraa-browser

Internet Explorer 8 deeggarsa golee geengoo ta'eef akka hin qabne yaada keessa galchaa.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Halluuwwan haala dubbii (contextual colors).

Hiika karaa halluu daree faayidaa cimsuu harka muraasaan dabarsuu. Isaan kun hidhannoo irrattis hojiirra ooluu danda'u akkasumas akkuma akkaataa hidhaa durtii keenyaa hover irratti ni dukkanaa'u.

Fusce dapibus, tellus ac abaarsa koomoodoo, tortor mauris nibh jedhamuun beekama.

Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Duis mollis, est non commodo luctus, nisi erat ligulaa geejjibaa.

Maecenas sed diam eget risus varius blandit taa'uu amet non magna.

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Donec ullamcorper nulla kan hin meetus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Adda ta’uu wajjin walqabatee

Yeroo tokko tokko kutaaleen cimsuu sababa adda ta’uu filannoo biraatiin hojiirra ooluu hin danda’an. Yeroo baay'ee, furmaanni gahaan barruu kee a <span>gita waliin marsuudha.

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame yookaan qabiyyee ofii isaa irraa ifa ta'uu isaa mirkaneessi (halluuwwan haalata hiika duraan barruu/mallattoo keessatti argamu cimsuuf qofa fayyadamu), yookaan karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-onlygita waliin dhokatee .

Duubbee haala dubbii (contextual backgrounds).

Gitoota halluu barruu yaadannoo wajjin walfakkaata, salphaatti duubbee elementii gara gita yaadannoo kamiyyuu saagi. Qaamonni anchor hover irratti ni dukkanaa'u, akkuma gita barruu.

Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Duis mollis, est non commodo luctus, nisi erat ligulaa geejjibaa.

Maecenas sed diam eget risus varius blandit taa'uu amet non magna.

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Donec ullamcorper nulla kan hin meetus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Adda ta’uu wajjin walqabatee

Yeroo tokko tokko gitaawwan duubbee haalata sababa adda ta'uu filannoo biraatiin hojiirra ooluu hin danda'an. Haala tokko tokko keessatti, furmaanni gahaan qabiyyee elementii kee a keessatti <div>gita waliin marsuudha.

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Akkuma halluuwwan haala dubbii (contextual colors) , hiikni karaa halluu darbu kamiyyuu bifa qulqulluu dhiheessi hin taaneen akka darbu mirkaneessi.

Mallattoo cufi

Qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf mallattoo cufiinsa waliigalaa fayyadami.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets jedhaman

Hojii fi kallattii gadi bu'aa agarsiisuuf carets fayyadami. Hubadhu, caret durtii ofumaan menu gadi bu'aa keessatti duubatti deebi'a .

<span class="caret"></span>

Saffisaan kan lola'u

Qaama tokko gita waliin gara bitaatti ykn mirgaatti yaasaa. !importantdhimmoota adda ta’uu akka hin uumamneef hammatameera. Kutaawwan akka mixinsittis fayyadamuun ni danda’ama.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Uggura qabiyyee giddugaleessaa

Qaama tokko gara display: blockfi giddugaleessa karaa margin. Akka mixin fi class tti ni argama.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Qulqulleessi

Qaama warraa irrattifloat dabaluudhaan s salphaatti qulqulleessi . Micro clearfix akka Nicolas Gallagher jaallatamutti fayyadama. Akka mixin ttis fayyadamuu ni danda'ama..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Qabiyyee agarsiisuu fi dhoksuu

Qabeentaa akka agarsiifamu ykn dhokfamu dirqisi ( dubbistoota iskiriinii dabalatee ) fayyadama .showfi .hiddengitaalee waliin. Gitoonni kun !importantwaldhabdee adda ta'uu hambisuuf fayyadamu, akkuma saffisaan lola'an . Isaanis sadarkaa block toggling qofaaf kan argamanidha. Akka mixinsittis fayyadamuun ni danda’ama.

.hideni argama, garuu yeroo hunda dubbistoota iskiriinii irratti dhiibbaa hin qabu akkasumas v3.0.1 irraa eegalee kan hin fayyadamnedha. .hiddenBakka isaa ykn itti fayyadami .sr-only.

Kana malees, .invisiblemul'achuu elementii qofa jijjiiruuf fayyadamuu ni danda'ama, jechuunis isaa displayhin fooyya'ee fi qaamni ammallee dhangala'aa galmee irratti dhiibbaa uumuu danda'a.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Qabiyyee navigeeshinii dubbisaa iskiriinii fi kiiboordii

Dubbistoota iskiriinii malee meeshaalee hundaaf elementii tokko dhoksi .sr-only. .sr-onlyQabeentaa yeroo xiyyeeffannoo qabu ammas agarsiisuuf waliin walitti makuu .sr-only-focusable(fkn fayyadamaa kiiboordii qofaan). Muuxannoo gaarii dhaqqabummaa hordofuuf barbaachisaa dha . Akka mixins ttis fayyadamuu ni danda’ama.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Bakka bu'iinsa suuraa

.text-hideQabiyyee barruu qaama tokkoo fakkii duubbeetiin bakka buusuuf gargaaruuf gita ykn mixin fayyadami .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Misooma saffisaa mobaayilaaf mijaawaa ta'eef, qabiyyee meeshaadhaan karaa gaaffii miidiyaa agarsiisuu fi dhoksuuf gita faayidaa kana fayyadami. Akkasumas gita faayidaa qabiyyee yeroo maxxanfamu jijjiiruuf hammatamaniiru.

Kanneen daangeffame irratti fayyadamuuf yaali akkasumas guutummaatti gosoota adda addaa marsariitii tokkoo uumuu irraa fagaadhu. Kanaa mannaa, meeshaan tokkoon tokkoon isaanii dhiheessan dabaluudhaaf isaanitti fayyadami.

Kutaawwan jiran

Qabiyyee qaxxaamuraa qaxxaamuraa iddoowwan ilaalchaa irratti jijjiiruuf tokko ykn walnyaatinsa gitaalee jiran fayyadami.

	Meeshaalee xixiqqoo dabalataaBilbiloota (<768px) .	Meeshaalee xixiqqooTaableetota (≥768px) .	Meeshaalee giddu galeessaaDeeskitooppii (≥992px) .	Meeshaalee gurguddooDeeskitooppii (≥1200px) .
`.visible-xs-*`	Mul'ata	Dhokataa	Dhokataa	Dhokataa
`.visible-sm-*`	Dhokataa	Mul'ata	Dhokataa	Dhokataa
`.visible-md-*`	Dhokataa	Dhokataa	Mul'ata	Dhokataa
`.visible-lg-*`	Dhokataa	Dhokataa	Dhokataa	Mul'ata
`.hidden-xs`	Dhokataa	Mul'ata	Mul'ata	Mul'ata
`.hidden-sm`	Mul'ata	Dhokataa	Mul'ata	Mul'ata
`.hidden-md`	Mul'ata	Mul'ata	Dhokataa	Mul'ata
`.hidden-lg`	Mul'ata	Mul'ata	Mul'ata	Dhokataa

v3.2.0 irraa eegalee, .visible-*-*gitaawwan tokkoon tokkoo tuqaa cabbii garaagarummaa sadiitiin dhufu, tokkoon tokkoo displaygatii qabeentaa CSS armaan gadii tarreeffameef tokko.

Garee daree barnootaa	CSS jedhamuun beekama`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Kanaafuu, iskiriinii dabalataa xixiqqoo ( xs) fakkeenyaaf, .visible-*-*gitaawwan jiran: .visible-xs-block, .visible-xs-inline, fi .visible-xs-inline-block.

Gitoota .visible-xs, .visible-sm, .visible-md, fi .visible-lgakkasumas jiru, garuu akka v3.2.0 tti hin barbaachifne . Isaan tilmaamaan walqixa walqixa ta'u .visible-*-block, haala addaa dabalataa <table>elementoota toggling -walqabatan malee.

Kutaalee maxxansaa

Kutaawwan deebii idilee wajjin wal fakkaatu, qabiyyee maxxansaaf jijjiiruuf kanneen fayyadami.

Daree barnootaa	Browser jedhamuun beekama	Maxxansa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Dhokataa	Mul'ata
`.hidden-print`	Mul'ata	Dhokataa

Gitni .visible-printkunis jira garuu akka v3.2.0tti hin fayyadamne. Innis tilmaamaan walqixa .visible-print-block, haala addaa dabalataa <table>elementoota -walqabataniif malee.

Dhimma qorannoo

Gitoota faayidaa deebii kennan qorachuuf safara biraawzari kee jijjiiri ykn meeshaalee adda addaa irratti fe'i.

Kan mul'atu...

Mallattoolee magariisaa qaama mul'ata ammaa kee keessatti akka mul'atu agarsiisu.

Dabalataan xiqqaadha ✔ X-xiqqaa irratti mul'ata

Xiqqoo ✔ Xiqqaa irratti mul'ata

Giddugaleessa ✔ Giddugaleessa irratti mul'ata

Bal'aa ✔ Guddaa irratti mul'ata

Xiqqaa fi xiqqaa dabalataa ✔ X-xiqqaa fi xixiqqaa irratti mul'ata

Giddugaleessaa fi guddaa ✔ Giddugaleessaa fi guddaa irratti mul'ata

Dabalataan xiqqaa fi giddu galeessa ✔ X-xiqqaa fi giddu galeessa irratti mul'ata

Xiqqaa fi guddaa ✔ Xiqqaa fi guddaa irratti mul'ata

Dabalataan xiqqaa fi guddaa ✔ X-xiqqaa fi guddaa irratti mul'ata

Xiqqaa fi giddu galeessa ✔ Xiqqaa fi giddu galeessa irratti mul'ata

Irratti dhokatee...

Asitti, mallattoowwan sakatta'iinsaa magariisaas qaamni mul'ata ammaa kee keessatti dhokatee akka jiru agarsiisu.

Dabalataan xiqqaadha ✔ X-xiqqaa irratti dhokatee jira

Xiqqoo ✔ Xiqqaa irratti dhokatee jira

Giddugaleessa ✔ Meediyaa irratti dhokatee jira

Bal'aa ✔ Guddaa irratti dhokatee jira

Xiqqaa fi xiqqaa dabalataa ✔ X-xiqqaa fi xixiqqaa irratti dhokatee jira

Giddugaleessaa fi guddaa ✔ Giddugaleessaa fi guddaa irratti dhokatee jira

Dabalataan xiqqaa fi giddu galeessa ✔ X-xiqqaa fi giddu galeessa irratti dhokatee jira

Xiqqaa fi guddaa ✔ Xiqqaa fi guddaa irratti dhokatee jira

Dabalataan xiqqaa fi guddaa ✔ X-xiqqaa fi guddaa irratti dhokatee jira

Xiqqaa fi giddu galeessa ✔ Xiqqaa fi giddu galeessa irratti dhokatee jira

CSS Bootstrap's Less irratti ijaarame, dursaa dalagaa dabalataa kan akka jijjiiramoota, mixins, fi faankishiniiwwan CSS qindeessuuf qaban. Warri faayiloota CSS keenya qindaa'an osoo hin taane faayiloota madda Less fayyadamuu barbaadan jijjiiramoota baay'ee fi mixins nuti guutummaa unkaa keessatti fayyadamnu fayyadamuu danda'u.

Jijjiiramoonni giiridii fi makaawwan kutaa sirna Giriidii keessatti uwwifamaniiru .

Bootstrap qindeessuu

Bootstrap yoo xiqqaate karaa lama fayyadamuun ni danda'ama: CSS qindaa'e waliin ykn faayilii madda Less waliin. Faayilota Xiqqaa qindeessuuf, akkaataa naannoo misoomaa kee ajajoota barbaachisoo ta'an hojjechuuf qindeessitu kutaa Jalqabuu ilaali .

Meeshaaleen qindeessaa qaama sadaffaa Bootstrap waliin hojjechuu danda'u, garuu garee keenya ijootiin hin deeggaraman.

Jijjiiramoota

Jijjiiramoonni guutummaa pirojektii keessatti akka karaa gatiiwwan yeroo baay'ee fayyadaman kan akka halluu, addaan fageenya, ykn tuullaa qubee giddugaleessa gochuu fi qooduuf fayyadamu. Cabbii guutuuf, maaloo Customizer ilaali .

Halluuwwan

Salphaatti iskiimota halluu lama fayyadami: halluu diimaa fi hiika. Halluuwwan halluu diimaa golgaawwan gurraacha yeroo baay'ee fayyadamaniif saffisaan qaqqabummaa kan kennan yoo ta'u hiikni halluuwwan adda addaa gatiiwwan haalata hiika qabaniif ramadaman of keessatti qabatu.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Jijjiiramoota halluu kana keessaa kamiyyuu akkuma jiranitti fayyadami ykn jijjiiramoota hiika caalaa piroojektii keetiif irra deebi'ii ramadi.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Iskaafooldii

Jijjiiramoota muraasa elementoota furtuu lafee marsariitii keetii saffisaan dhuunfachuuf.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Hidhamtoota

Hidhamtoota kee halluu sirrii ta'een gatii tokko qofaan salphaatti akkaataa itti godhi.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Hubadhu, the @link-hover-colorfaankishinii fayyadama, meeshaa ajaa'ibaa kan biraa Less irraa, ofumaan halluu hover sirrii uumuuf. darken, lighten, saturate, fi fayyadamuu dandeessa desaturate.

Taayipoogiraafii

Jijjiiramoota ariifataa muraasaan salphaatti barruu kee, hammangaa barruu, dursaa fi kanneen biroo saagi. Bootstrap kanneen akkasumas fayyadamuun mixins maxxansaa salphaa ta'e kennuudhaaf.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Mallattoolee

Jijjiiramoota saffisaa lama bakka fi maqaa faayilii mallattoolee keetii dhuunfachuuf.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Qaamolee

Qaamonni guutummaa Bootstrap keessatti gatiiwwan waliigalaa saaguuf jijjiiramoota durtii tokko tokko fayyadamu. Kunoo kanneen baay’inaan itti fayyadamnu.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Miksiinota gurguraa

Miksiin gurgurtootaa CSS kee qindaa'e keessatti durtii gurgurtootaa barbaachisoo ta'an hunda hammachuudhaan biraawzaroota hedduu deeggaruuf gargaaruuf mixins dha.

Sanduuqa-saayizii gochuu

Moodeela saanduqa qaamolee kee mixin tokkoon deebisi. Yaadannoo isaaf, barruu gargaaraa kana Mozilla irraa ilaali .

Miksiin akka v3.2.0tti hin fayyadamne, seensa Autoprefixer waliin. Walsimsiisa duubatti deebi'uu eeguuf, Bootstrap hanga Bootstrap v4tti mixin keessoodhaan fayyadamuu itti fufa.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Goleewwan geengoo ta’an

Har'a biraawzaroonni ammayyaa hundi border-radiusqabeentaa durtii hin qabne deeggaru. Akka kanaan, .border-radius()mixin hin jiru, garuu Bootstrap karaa gabaabaa golee lama gama murtaa'aa wanta tokkoo irratti saffisaan naannessisuuf gargaaran of keessatti qabata.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Gaaddidduuwwan saanduqa (Drop).

box-shadowYoo dhaggeeffattoonni xiyyeeffannoo keetii biraawzarootaa fi meeshaalee haaraa fi gurguddoo fayyadamaa jiran ta'e, qabeenya sana ofuma isaatiin qofa fayyadamuu kee mirkaneessi . Yoo meeshaalee Android durii (pre-v4) fi iOS (pre-iOS 5) deeggarsa barbaaddan, mixin hin barbaachifne fayyadamuun durtii-webkit barbaachisu fudhadhaa .

Miksiin kun v3.1.0 irraa eegalee kan hin fayyadamne yoo ta'u, Bootstrap waltajjiiwwan yeroon isaanii darbe kanneen qabeentaa istaandaardii hin deeggarre ifatti waan hin deeggarreef. Walsimsiisa duubatti deebi'uu eeguuf, Bootstrap hanga Bootstrap v4tti mixin keessoodhaan fayyadamuu itti fufa.

Halluuwwan golboo saanduqa kee keessatti fayyadamuu kee mirkaneessi akka rgba()isaan hamma danda'ametti duubbee wajjin wal-xaxaa ta'een wal makaa.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Ce'umsa

Miksiinota dachaa dachaa ta’anii socho’uu danda’uuf. Odeeffannoo ce'umsaa hunda tokkoon saagi, ykn akka barbaachisummaa isaatti harkifannaa fi yeroo adda ta'e ifteessi.

Miksiinoonni akka v3.2.0tti hin barbaachifne , seensa Autoprefixer waliin. Walsimsiisa duubatti deebi'uu eeguuf, Bootstrap hanga Bootstrap v4tti mixins keessoodhaan fayyadamuu itti fufa.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Jijjiirama

Wanti kamiyyuu naannessi, iskeelii, hiikkaa (sochoosi), ykn skew godhi.

Miksiinoonni akka v3.2.0tti hin barbaachifne , seensa Autoprefixer waliin. Walsimsiisa duubatti deebi'uu eeguuf, Bootstrap hanga Bootstrap v4tti mixins keessoodhaan fayyadamuu itti fufa.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animeeshiniiwwan

Amaloota sochii CSS3 hunda ibsa tokko keessatti fayyadamuuf mixin tokko fi amaloota dhuunfaaf mixin biroo.

Miksiinoonni akka v3.2.0tti hin barbaachifne , seensa Autoprefixer waliin. Walsimsiisa duubatti deebi'uu eeguuf, Bootstrap hanga Bootstrap v4tti mixins keessoodhaan fayyadamuu itti fufa.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opaasitii

Opacity biraawzaroota hundaaf saagi fi filterIE8'f fallback kenni.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Barruu iddooqa

Tokkoon tokkoo man'ee keessaa too'annoo unkaadhaaf haalata kenni.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Tarreewwan

Tarjaawwan karaa CSS qaama tokko keessaa uumuu.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Giraadiyaantii

Halluuwwan lamaan kamiyyuu gara garagalcha duubbee salphaatti jijjiiri. Caalaatti guddati fi kallattii saagi, halluu sadii fayyadami, ykn garagalcha raadiyaalii fayyadami. Miksiin tokkoon qindaa'inoota durtii hunda si barbaachisan argatta.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Akkasumas kofa halluu lamaa istaandaardii, garagalcha sararaawaa ifteessuu dandeessa:

#gradient > .directional(#333; #000; 45deg);

Yoo barber-stripe style gradient barbaadde, sun salphaadha, akkasumas. Halluu tokko qofa ifteessiiti sarara adii ifa ta'e ni haguuggina.

#gradient > .striped(#333; 45deg);

Antee ol kaasiitii bakka isaa halluu sadii fayyadami. Halluu jalqabaa, halluu lammaffaa, dhaabbii halluu halluu lammaffaa (gatii dhibbeentaa akka 25%), fi halluu sadaffaa makaawwan kanaan saagi:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Mataa ol qaba! Yoom iyyuu garaagarummaa balleessuu yoo barbaadde, IE-specific kamiyyuu kan filterati dabalte ta'uu danda'u haquu kee mirkaneessi. Sana gochuu dandeessa .reset-filter()mixin cinaatti fayyadamuun background-image: none;.

Miksiinota faayidaa qaban

Miksiinonni faayidaa miksiinoota amaloota CSS kanneen haala biraatiin wal hin qabanne walitti makuun galma ykn hojii murtaa'e galmaan ga'aniidha.

Qulqulleessi

class="clearfix"Elementii kamiyyuu irratti dabaluu dagadhuutii .clearfix()bakka barbaachisaa ta'etti mixin itti dabali. Nicolas Gallagher irraa micro clearfix fayyadama .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Giddugaleessa gochuu horizontal ta’uu

Dafii elementii kamiyyuu warra isaa keessaa giddugaleessa godhaa. Barbaachisa widthykn max-widthkaa'amuu qaba.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Gargaartoota saayizii gochuu

Dimenshiniiwwan wantaa salphaatti ifteessi.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Naannoowwan barruu guddinaan jijjiiramuu danda'an

Filannoowwan safara jijjiirraa naannoo barruu kamiifuu, ykn qaama biraa kamiifuu salphaatti qindeessii. Durtii gara amala biraawzari idileetti ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Barruu cicciruu

Barruu salphaatti eliipsiitiin mixin tokkoon cicciri. Elementiin akka ta'u blockykn inline-blocksadarkaa barbaada.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Fakkiiwwan retiinaa

Daandiiwwan fakkii lamaa fi safara fakkii @1x ifteessi, Bootstrap gaaffii miidiyaa @2x ni kenna. Yoo fakkiiwwan baay'ee tajaajiluuf qabaatte, gaaffii miidiyaa tokko keessatti CSS fakkii retiinaa kee harkaan barreessuu yaadaa.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap Less irratti kan ijaarame yoo ta'u, akkasumas buufata Sass ofiisaa qaba . Kuusaa GitHub adda ta'e keessatti kunuunsinee fooyya'iinsa iskiriiptii jijjiirraatiin ni qabaanna.

Waan dabalame

Buufatni Sass repo addaa waan qabuuf dhaggeeffattoota xiqqoo adda ta'an waan tajaajiluuf, qabiyyeen pirojektichaa pirojektii Bootstrap isa guddaa irraa baayyee adda. Kunis buufanni Sass hanga danda'ametti sirnoota Sass irratti hundaa'an hedduu waliin akka walsimu mirkaneessa.

Karaa	Ibsa
`lib/`	Koodii Ruby gem (Qindeessituu Sass, walitti makamuu Rails fi Compass) .
`tasks/`	Iskiriiptii jijjiirraa (olka'aa Less gara Sass tti jijjiiruu) .
`test/`	Qormaata qindeessaa
`templates/`	Paakeejii koompaasii manifeestii
`vendor/assets/`	Faayilota Sass, JaavaScript, fi qubee
`Rakefile`	Hojiiwwan keessoo, kan akka rake fi convert

Faayilota kana hojiidhaan ilaaluuf kuusaa GitHub buufata Sass daawwadhu .

Dhaabbii

Odeeffannoo akkaataa Bootstrap for Sass fe'uu fi itti fayyadamuuf, kuusaa GitHub readme ilaali . Madda yeroo ammaa ta'ee fi odeeffannoo Rails, Compass, fi pirojektoota Sass istaandaardii wajjin fayyadamuuf of keessatti qabata.

Bootstrap kan Sass jedhamuuf

CSS jedhamuun beekama

Haala Waliigalaa

Gosa doktii HTML5

Mobile dursa

Taayipoogiraafii fi hidhannoowwan

Normalize gochuu.css

Konteenaroota

Sirna giiridii

Seensa

Gaaffii miidiyaa

Filannoowwan giiridii

Fakkeenya: Tuulamaa-gara-horizontal

Fakkeenya: Qabduu dhangala’aa

Fakkeenya: Mobaayila fi deeskitooppii

Fakkeenyaaf: Mobaayila, taableetii, deeskitooppii

Fakkeenya: Marfama tarjaa

Tarjaa deebii kennuudhaan deebisanii saaga

Tarreewwan ofseeti gochuu

Tarreewwan koonyaa gochuu

Tartiiba tarree

Miksiinii fi jijjiiramoota xiqqaa

Jijjiiramoota

Mixins jedhaman

Fakkeenya fayyadama

Taayipoogiraafii

Mata dureewwan

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

h1. Mata duree bootstrap Barruu lammaffaa

h2. Mata duree bootstrap Barruu lammaffaa

h3. Mata duree bootstrap Barruu lammaffaa

h4. Mata duree bootstrap Barruu lammaffaa

h5. Mata duree bootstrap Barruu lammaffaa

h6. Mata duree bootstrap Barruu lammaffaa

Koppii qaamaa

Koppii qaama dursaa

Xiqqaadhaan ijaarame

Qaamolee barruu sarara keessaa

Barreeffama mallattoo qabu

Barreeffama haqame

Barreeffama keessaa rukutuu

Barruu galfame

Barreeffama jala sararame

Barreeffama xiqqaa

Ija jabeessa

Qubee jallisii

Qaamolee wal jijjiirraa

Gitoota qindeessuu

Kutaalee jijjiiramaa

Gabateewwan

Gabatee bu’uuraa

Jalqaba qabaachuu

Teessoowwan

Jechoota ugguraa

Caqasa uggura durtii

Filannoowwan caqasaa ugguruu

Madda tokko moggaasuu

Agarsiisa wal jijjiirraa

Tarreewwan

Ajaja hin qabne

Ajajame

Unstyled ta'e

Sarara keessaa

Ibsa

Ibsa qajeelaa

Ofiin cicciruu

Koodii

Sarara keessaa

Galtee fayyadamaa

Blookii bu'uuraa

Jijjiiramoota

Bu’aa sample

Gabateewwan

Fakkeenya bu’uuraa

Tarreewwan sarara qaban

Walsimsiisa qaxxaamuraa-browser

Demo `:focus`state

Of eeggannoo waa'ee dalagaa hidhaa kan`<a>`

`.sr-only`Mallattoolee filannoo asxaalee dhokataa qaban