Samun ƙarancin ƙasa a kan maɓalli na kayan aikin Bootstrap, gami da tsarinmu don inganta, sauri, haɓakar yanar gizo mai ƙarfi.

HTML 5 doka

Bootstrap yana amfani da wasu abubuwan HTML da kaddarorin CSS waɗanda ke buƙatar amfani da tsarin HTML5. Hada shi a farkon duk ayyukan ku.

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

Wayar hannu ta farko

Tare da Bootstrap 2, mun ƙara salon abokantaka na zaɓi na wayar hannu don mahimman abubuwan tsarin. Tare da Bootstrap 3, mun sake rubuta aikin don zama abokantaka ta wayar hannu tun daga farko. Maimakon ƙara akan salon wayar hannu na zaɓi, ana gasa su kai tsaye. A zahiri, Bootstrap shine wayar hannu ta farko . Za a iya samun salon farko ta wayar hannu ko'ina cikin ɗakin karatu maimakon a cikin fayiloli daban-daban.

Don tabbatar da ma'ana mai kyau da taɓa zuƙowa, ƙara tag meta tag zuwa naku <head>.

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

Kuna iya musaki damar zuƙowa akan na'urorin hannu ta ƙara user-scalable=nozuwa tambarin kallo. Wannan yana hana zuƙowa, ma'ana masu amfani za su iya gungurawa kawai, kuma yana haifar da rukunin yanar gizon ku kamar aikace-aikacen asali. Gabaɗaya, ba mu ba da shawarar wannan akan kowane rukunin yanar gizo ba, don haka yi amfani da hankali!

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

Rubutun rubutu da haɗin kai

Bootstrap yana saita ainihin nunin duniya, rubutun rubutu, da salon haɗin kai. Musamman, mu:

Saita background-color: #fff;akanbody
Yi amfani da @font-family-base, @font-size-base, da @line-height-basesifofi azaman tushen rubutun mu
Saita kalar mahaɗin duniya ta hanyar @link-colorkuma yi amfani da layin layi kawai a kan:hover

Ana iya samun waɗannan salon a ciki scaffolding.less.

Normalize.css

Don ingantacciyar ma'anar mai binciken giciye, muna amfani da Normalize.css , aikin Nicolas Gallagher da Jonathan Neal .

Kwantena

Bootstrap yana buƙatar wani abu mai ƙunshe don nannade abubuwan da ke cikin rukunin yanar gizo da gina tsarin grid ɗin mu. Kuna iya zaɓar ɗaya daga cikin kwantena biyu don amfani da su a cikin ayyukanku. Yi la'akari da cewa, saboda paddingda ƙari, ba kwantena ba ne mai tushe.

Yi amfani .containerda madaidaicin akwati mai faɗi mai amsawa.

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

Yi amfani .container-fluidda akwati don cikakken faɗin ganga, mai faɗi duka faɗin wurin kallon ku.

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

Bootstrap ya haɗa da tsarin grid na ruwa na farko na wayar hannu wanda ya dace da sikeli har zuwa ginshiƙai 12 yayin da na'urar ko girman kallon kallo ke ƙaruwa. Ya haɗa da azuzuwan da aka ƙirƙira don zaɓuɓɓukan shimfidawa masu sauƙi, da kuma haɗaɗɗun haɗaɗɗiya masu ƙarfi don samar da ƙarin shimfidu na tamani .

Gabatarwa

Ana amfani da tsarin grid don ƙirƙirar shimfidar shafi ta hanyar jerin layuka da ginshiƙai waɗanda ke ɗaukar abun cikin ku. Ga yadda tsarin grid Bootstrap ke aiki:

Dole ne a sanya layuka a cikin .container(daidaitacce-nisa) ko .container-fluid(cikakken nisa) don daidaitawa da manne.
Yi amfani da layuka don ƙirƙirar ƙungiyoyin ginshiƙai a kwance.
Ya kamata a sanya abun ciki a cikin ginshiƙai, kuma ginshiƙai kawai na iya zama yaran layuka.
Ƙididdigar azuzuwan grid kamar .rowkuma .col-xs-4ana samun su don yin shimfiɗin grid da sauri. Hakanan za'a iya amfani da ƙananan mixins don ƙarin shimfidu na ma'ana.
ginshiƙai suna ƙirƙirar gutters (rabi tsakanin abun cikin shafi) ta hanyar padding. Wannan padding ɗin ana kashe shi a cikin layuka na shafi na farko da na ƙarshe ta hanyar ragi mara kyau akan .rows.
Rage mara kyau shine dalilin da ya sa misalan da ke ƙasa suka fita waje. Don haka abun ciki a cikin ginshiƙan grid ya jera tare da abun ciki mara grid.
An ƙirƙiri ginshiƙan grid ta ƙayyadaddun adadin ginshiƙai goma sha biyu da kuke son faɗaɗawa. Misali, guda uku daidai ginshiƙai zasu yi amfani da uku .col-xs-4.
Idan an sanya fiye da ginshiƙai 12 a cikin jere ɗaya, kowane rukuni na ƙarin ginshiƙai, a matsayin raka'a ɗaya, za su naɗe kan sabon layi.
Azuzuwan grid sun shafi na'urori masu faɗin allo sama da ko daidai da girman maki, kuma suna ƙetare azuzuwan grid da aka yi niyya ga ƙananan na'urori. Don haka, misali amfani da kowane .col-md-*aji zuwa kashi ba kawai zai shafi salon sa akan matsakaicin na'urori ba har ma da manyan na'urori idan .col-lg-*aji ba ya nan.

Dubi misalan don amfani da waɗannan ƙa'idodin zuwa lambar ku.

Tambayoyin watsa labarai

Muna amfani da tambayoyin kafofin watsa labaru masu zuwa a cikin Ƙananan fayilolin mu don ƙirƙirar maɓalli na maɓalli a cikin tsarin mu.

/* 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) { ... }

Wani lokaci muna faɗaɗa waɗannan tambayoyin kafofin watsa labarai don haɗawa max-widthdon iyakance CSS zuwa ƙananan na'urori.

@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) { ... }

Zaɓuɓɓukan Grid

Dubi yadda sassan tsarin grid na Bootstrap ke aiki a cikin na'urori da yawa tare da tebur mai amfani.

	Ƙarin ƙananan na'urori wayoyi (<768px)	Ƙananan na'urori Allunan (≥768px)	Matsakaicin na'urori Desktops (≥992px)	Manyan Desktops (≥1200px)
Halin grid	A kwance a kowane lokaci	Rushewa don farawa, a kwance sama da wuraren karya
Faɗin kwantena	Babu (atomatik)	750px ku	970px ku	1170px
Gaban aji	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# na ginshiƙai	12
Faɗin ginshiƙi	Mota	~ 62px	~81px	~97px
Faɗin gutter	30px (15px a kowane gefen shafi)
Nestable	Ee
Matsaloli	Ee
Yin odar ginshiƙi	Ee

Misali: Stack-to-horizontal

Yin amfani da saiti guda ɗaya na .col-md-*azuzuwan grid, zaku iya ƙirƙirar tsarin grid na asali wanda ke farawa daga kan na'urorin hannu da na'urorin kwamfutar hannu (ƙarin ƙarami zuwa ƙarami) kafin ya zama kwance akan na'urorin tebur (matsakaici). Sanya ginshiƙan grid a kowane .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Misali: kwandon ruwa

Juya kowane ƙayyadadden shimfidar grid mai faɗi zuwa shimfidar faɗin faɗin ta hanyar canza mafi girman ku .containerzuwa .container-fluid.

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

Misali: Wayar hannu da tebur

Ba sa son ginshiƙan ku su taru a cikin ƙananan na'urori? Yi amfani da ƙarin ƙananan da matsakaitan azuzuwan grid na na'ura ta ƙara .col-xs-* .col-md-*zuwa ginshiƙan ku. Dubi misalin da ke ƙasa don kyakkyawan ra'ayi na yadda duk yake aiki.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.kol-xs-6

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

Misali: Wayar hannu, kwamfutar hannu, tebur

Gina a kan misalin da ya gabata ta ƙirƙirar madaidaicin tsari mai ƙarfi da ƙarfi tare da .col-sm-*azuzuwan kwamfutar hannu.

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

.col-xs-6 .col-md-4

.col-xs-6 .col-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>

Misali: Kundin ginshiƙi

Idan an sanya fiye da ginshiƙai 12 a cikin jere ɗaya, kowane rukuni na ƙarin ginshiƙai, a matsayin raka'a ɗaya, za su naɗe kan sabon layi.

.kol-xs-9

.col-xs-4
Tun daga 9 + 4 = 13> 12, wannan 4-column-fadi div ana naɗe shi a kan sabon layi azaman ɗaya mai jujjuyawa.

.col-xs-6
ginshiƙai masu zuwa suna ci gaba tare da sabon layi.

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

Sake saitin ginshiƙi mai amsawa

Tare da matakan grid huɗu da ke akwai za ku daure ku shiga cikin al'amurra inda, a wasu wuraren hutu, ginshiƙan ku ba su bayyana daidai kamar yadda ɗayan ya fi ɗayan tsayi. Don gyara wannan, yi amfani da haɗin haɗin a da azuzuwan aikin.clearfix mu masu amsawa .

.col-xs-6 .col-sm-3
Maimaita girman kallon ku ko duba shi akan wayarku misali.

.col-xs-6 .col-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>

Baya ga sharewar ginshiƙi a wuraren karyewa, ƙila ka buƙaci sake saiti, turawa, ko ja . Dubi wannan a aikace a cikin misalin grid .

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

ginshiƙan kashewa

Matsar da ginshiƙai zuwa dama ta amfani .col-md-offset-*da azuzuwan. Waɗannan azuzuwan suna ƙara gefen hagu na shafi ta *ginshiƙai. Misali, .col-md-offset-4yana motsawa .col-md-4sama da ginshiƙai huɗu.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-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>

Hakanan zaka iya soke gyare-gyare daga ƙananan matakan grid tare da .col-*-offset-0azuzuwan.

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

ginshiƙan gida

Don shigar da abun cikin ku tare da tsoho grid, ƙara sabon .rowda saitin .col-sm-*ginshiƙai a cikin .col-sm-*ginshiƙi da ke akwai. Layukan da aka kafa yakamata su haɗa da saitin ginshiƙai waɗanda suka haɗa har zuwa 12 ko ƙasa da haka (ba a buƙatar ku yi amfani da duk ginshiƙai 12 da ake da su ba).

Mataki na 1: .col-sm-9

Mataki na 2: .col-xs-8 .col-sm-6

Mataki na 2: .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>

Yin odar ginshiƙi

Sauƙaƙan canza tsarin ginshiƙan grid ɗin mu tare .col-md-push-*da .col-md-pull-*azuzuwan masu gyara.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-ja-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>

Ƙananan mixins da masu canji

Baya ga azuzuwan grid da aka riga aka gina don shimfidu masu sauri, Bootstrap ya haɗa da Ƙananan masu canji da mahaɗa don samar da naku mai sauƙi, shimfidu na natsuwa.

Masu canji

Masu canji suna ƙayyade adadin ginshiƙai, faɗin gutter, da wurin tambayar kafofin watsa labarai inda za a fara ginshiƙai masu iyo. Muna amfani da waɗannan don samar da azuzuwan grid da aka riga aka rubuta a sama, da kuma ga mahaɗin al'ada da aka jera a ƙasa.

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

Mixins

Ana amfani da Mixins tare da masu canjin grid don samar da CSS na ma'ana don ginshiƙan grid ɗaya ɗaya.

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

Misali amfani

Kuna iya canza masu canji zuwa dabi'un al'ada na ku, ko kawai amfani da mixins tare da tsoffin ƙimar su. Anan ga misalin amfani da saitunan tsoho don ƙirƙirar shimfidar ginshiƙi biyu tare da tazara tsakanin.

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

Kanun labarai

Duk kanun HTML, <h1>ta hanyar <h6>, akwai su. .h1Hakanan ana samun ta hanyar .h6azuzuwan, don lokacin da kuke son daidaita salon rubutun rubutu amma har yanzu kuna son a nuna rubutun ku ta layi.

h1. Bootstrap jagora	Semibold 36px
h2. Bootstrap jagora	Semibold 30px
h3. Bootstrap jagora	Semibold 24px
h4. Bootstrap jagora	Semibold 18px
h5. Bootstrap jagora	Semibold 14px
h6. Bootstrap jagora	Semibold 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>

Ƙirƙiri ƙarami, rubutu na sakandare a cikin kowane taken tare da jigon jigon <small>ko .smallaji.

h1. Bootstrap kan rubutun Sakandare

h2. Bootstrap kan rubutun Sakandare

h3. Bootstrap jagora rubutun Sakandare

h4. Bootstrap jagora rubutun Sakandare

h5. Bootstrap jagora rubutun Sakandare

h6. Bootstrap kan rubutun Sakandare

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

Kwafin jiki

Tsoffin duniya na Bootstrap font-sizeshine 14px , tare da line-heightna 1.428 . Ana amfani da wannan a cikin <body>da kuma duk sakin layi. Bugu da kari, <p>(sakin layi) suna karɓar gefen ƙasa na rabin tsayin layin da aka ƙididdige su (10px ta tsohuwa).

Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula.

Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id un mi porta gravida a eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Kwafin jikin jagora

Sanya sakin layi ya fice ta ƙara .lead.

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

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

Gina tare da Kadan

Ma'aunin rubutu ya dogara ne akan ƙananan ma'auni guda biyu a cikin masu canji . kasa : @font-size-baseda @line-height-base. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe. Muna amfani da waɗancan sauye-sauyen da wasu sassauƙan lissafi don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari. Keɓance su kuma Bootstrap ya daidaita.

Abubuwan rubutu na layi

Alama rubutu

Don haskaka gudu na rubutu saboda dacewarsa a wani mahallin, yi amfani da <mark>alamar.

Kuna iya amfani da alamar alamar zuwahaskakawarubutu.

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

Rubutun da aka goge

Don nuna tubalan rubutun da aka goge yi amfani da <del>alamar.

~~Wannan layin rubutun ana nufin a kula dashi azaman rubutun da aka goge.~~

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

Tsare-tsare rubutu

Don nuna tubalan rubutu waɗanda ba su dace ba yi amfani da <s>alamar.

~~Wannan layin rubutun ana nufin a bi da shi kamar yadda ba daidai ba ne.~~

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

Saka rubutu

Don nuna ƙari ga daftarin aiki yi amfani da <ins>alamar.

Wannan layin rubutun ana nufin a kula dashi azaman ƙari ga takaddar.

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

Rubutun jakunkuna

Don layi layi da rubutu yi amfani da <u>alamar.

Wannan layin rubutun zai fassara kamar yadda aka ja layi

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

Yi amfani da tsoffin alamun girmamawa na HTML tare da salo marasa nauyi.

Karamin rubutu

Don rage jaddada layin layi ko tubalan rubutu, yi amfani da <small>alamar don saita rubutu a 85% girman iyaye. Abubuwan kan gaba suna karɓar nasu font-sizedon gida<small> abubuwan gida.

Hakanan zaka iya amfani da kashi na layi tare da .smallmaimakon kowane <small>.

Wannan layin rubutun ana nufin a kula dashi azaman bugu mai kyau.

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

M

Don jaddada guntun rubutu tare da nauyin rubutu mai nauyi.

Ana fassara gunkin rubutu mai zuwa azaman rubutu mai ƙarfi .

<strong>rendered as bold text</strong>

Rubutun rubutu

Don jaddada guntun rubutu tare da rubutun.

Ana fassara gunkin rubutu mai zuwa azaman rubutun rubutun .

<em>rendered as italicized text</em>

Madadin abubuwa

Jin kyauta don amfani <b>kuma <i>a cikin HTML5. <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba yayin <i>da galibin murya ne, kalmomin fasaha, da sauransu.

Azuzuwan daidaitawa

Sauƙaƙe daidaita rubutu zuwa sassa tare da azuzuwan daidaita rubutu.

Rubutun hagu masu layi.

Rubutun da aka daidaita a tsakiya.

Rubutun daidaitacce.

Maganar gaskiya.

Babu rubutu na kunsa.

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

Azuzuwan canji

Canza rubutu a cikin sassa tare da azuzuwan babban rubutu.

Ƙananan rubutu.

Rubutun babba.

Babban rubutu.

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

Taqaitaccen bayani

Salon aiwatar da abubuwan HTML <abbr>don gajartawa da gajarta don nuna faɗaɗɗen sigar akan hover. Gajartawa tare da titlesifa suna da iyakar haske mai dige-dige na ƙasa da mai siginar taimako akan shawagi, yana ba da ƙarin mahallin akan shawagi da masu amfani da fasahar taimako.

Gajartawar asali

Gajartawar kalmar sifa ita ce attr .

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

Farko

Ƙara .initialismzuwa ga taƙaitaccen girman girman rubutu kaɗan.

HTML shine abu mafi kyau tun yankakken gurasa.

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

Adireshi

Gabatar da bayanin tuntuɓar kakanni mafi kusa ko duka aikin. Ajiye tsarawa ta ƙare duk layi da <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Cikakken Suna
[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>

Blockquotes

Don faɗar tubalan abun ciki daga wani tushe a cikin takaddar ku.

Default blockquote

Kunna <blockquote>kowane HTML a matsayin zance. Don madaidaiciyar magana, muna ba da shawarar a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

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

Zaɓuɓɓukan Blockquote

Salo da abun ciki suna canzawa don sauƙaƙan bambancin akan ma'auni <blockquote>.

Sunan tushe

Ƙara wani <footer>don gano tushen. Kunna sunan tushen aikin a cikin <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen

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

Madadin nuni

Ƙara .blockquote-reversedon blockquote tare da abun ciki mai daidaita daidai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen

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

Lissafi

Ba a ba da oda ba

Jerin abubuwan da odar ba ta da mahimmanci a bayyane.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculus neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat a
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

An yi oda

Jerin abubuwan da odar ke da mahimmanci a bayyane.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Mara salo

Cire tsoho list-styleda gefen hagu akan abubuwan jeri (yara nan take kawai). Wannan kawai ya shafi jerin abubuwa na yara nan da nan , ma'ana kuna buƙatar ƙara ajin don kowane jeri na gida kuma.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculus neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat a
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Layin layi

Sanya duk abubuwan jeri akan layi guda tare display: inline-block;da wasu fakitin haske.

Lorem ipsum
Phasellus iaculus
Nulla volutpat

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

Bayani

Jerin sharuɗɗan tare da kwatancensu masu alaƙa.

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id un mi porta gravida a eget metus.
Malesuada porta: Ka yi la'akari da abin da ake kira euismod.

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

Bayanin kwance

Yi sharuddan da kwatance a <dl>layi gefe-gefe. Yana farawa a jeri kamar tsoho <dl>s, amma lokacin da navbar ya faɗaɗa, haka yi waɗannan.

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id un mi porta gravida a eget metus.
Malesuada porta: Ka yi la'akari da abin da ake kira euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Gyara ta atomatik

Lissafin bayanin a kwance za su yanke sharuddan da suka yi tsayi da yawa don dacewa da ginshiƙin hagu tare da text-overflow. A cikin kunkuntar wuraren kallo, za su canza zuwa tsayayyen shimfidar wuri.

Layin layi

Kunna snippets na layi tare da <code>.

Alal misali, <section>ya kamata a nannade shi azaman layi.

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

Shigar da mai amfani

Yi amfani da <kbd>alamar shigarwar da aka saba shigar da ita ta madannai.

Don canza kundayen adireshi, rubuta cd sunan kundin adireshi.
Don shirya saituna, danna 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>

Tushe na asali

Yi amfani <pre>da layukan lamba da yawa. Tabbatar da kubuta daga kowane maƙallan kusurwa a cikin lambar don yin daidai.

<p>Sample rubutu a nan...</p>

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

Kuna iya ƙara .pre-scrollableajin da zaɓin, wanda zai saita max-tsawo na 350px kuma ya ba da madaidaicin madaidaicin y-axis.

Masu canji

Don nuna masu canji yi amfani da<var> alamar.

y = m x + b

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

Samfurin fitarwa

Don nuna tubalan samfurin fitarwa daga shirin yi amfani da <samp>alamar.

Ana nufin ɗaukar wannan rubutu azaman samfurin fitarwa daga shirin kwamfuta.

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

Misali na asali

Don salo na asali — padding haske da masu rarraba a kwance kawai - ƙara ajin tushe .tablezuwa kowane <table>. Yana iya zama da wahala sosai, amma idan aka ba da yawan amfani da teburi don wasu plugins kamar kalanda da masu zaɓen kwanan wata, mun zaɓi ware salon teburin mu na al'ada.

Taken tebur na zaɓi.
#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

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

Layukan tsige

Yi amfani .table-stripeddon ƙara zakin zebra zuwa kowane jere na tebur a cikin <tbody>.

Daidaita-browser

Ana yin salo ta hanyar :nth-childzaɓen CSS, wanda babu shi a cikin Internet Explorer 8.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

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

Tebur mai iyaka

Ƙara .table-bordereddon iyakoki a duk bangarorin tebur da sel.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

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

Juya layuka

Ƙara .table-hoverdon kunna yanayin jujjuyawa akan layuka na tebur a cikin <tbody>.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

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

Tebur mai tauri

Ƙara .table-condenseddon sanya tebur ɗin ya zama ƙarami ta hanyar yankan tantanin halitta a rabi.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

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

Azuzuwan yanayi

Yi amfani da azuzuwan mahallin don canza launi na tebur ko sel guda ɗaya.

Class	Bayani
`.active`	Yana amfani da launi mai jujjuyawa zuwa wani jere ko tantanin halitta
`.success`	Yana nuna aiki mai nasara ko tabbatacce
`.info`	Yana nuna tsaka tsaki canji ko aiki
`.warning`	Yana nuna gargaɗin da zai buƙaci kulawa
`.danger`	Yana nuna wani aiki mai haɗari ko mai yuwuwa mara kyau

#	Hanyar shafi	Hanyar shafi	Hanyar shafi
1	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
2	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
3	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
4	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
5	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
6	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
7	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
8	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi
9	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi	Abubuwan da ke cikin ginshiƙi

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

Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana a layin tebur ko tantanin halitta ɗaya kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abubuwan da ke cikin kanta (rubutun da ake iya gani a cikin layin tebur da ya dace), ko kuma an haɗa su ta hanyar madadin, kamar ƙarin rubutu da ke ɓoye tare da .sr-onlyajin.

Tables masu amsawa

Ƙirƙirar tebur masu amsawa ta hanyar naɗa kowane .tableciki .table-responsivedon sanya su gungurawa a kwance akan ƙananan na'urori (a ƙarƙashin 768px). Lokacin duba akan wani abu mafi girma fiye da faɗin 768px, ba za ku ga wani bambanci a cikin waɗannan teburin ba.

Yanke/tsatsewa tsaye

Tables masu amsawa suna amfani da overflow-y: hidden, wanda ke cire duk wani abun ciki wanda ya wuce ƙasa ko saman saman teburin. Musamman, wannan na iya kashe menus na zazzagewa da sauran widgets na ɓangare na uku.

Firefox da filin ajiye motoci

Firefox yana da wasu salo mai ban sha'awa na filin da ya ƙunshi widthwanda ke tsangwama tare da tebur mai amsawa. Ba za a iya soke wannan ba tare da takamaiman hack na Firefox wanda ba mu bayar a Bootstrap ba:

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

Don ƙarin bayani, karanta wannan Amsar Tarin Ruwa .

#	Taken tebur	Taken tebur	Taken tebur	Taken tebur	Taken tebur	Taken tebur
1	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
2	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
3	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta

#	Taken tebur	Taken tebur	Taken tebur	Taken tebur	Taken tebur	Taken tebur
1	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
2	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
3	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta

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

Misali na asali

Sarrafa nau'ikan nau'ikan mutum ɗaya suna karɓar wasu salo ta duniya ta atomatik. Duk rubutun <input>, <textarea>, da <select>abubuwa masu .form-controlan saita su width: 100%;ta tsohuwa. Kunna lakabi da sarrafawa .form-groupdon mafi kyawun tazara.

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

Kar a haxa ƙungiyoyin tsari tare da ƙungiyoyin shigarwa

Kar a haxa ƙungiyoyin tsari kai tsaye tare da ƙungiyoyin shigarwa . Madadin haka, gida rukunin shigarwa a cikin rukunin tsari.

Tsarin layi

Ƙara .form-inlinezuwa fom ɗin ku (wanda ba dole ba ne ya zama a <form>) don sarrafawar katanga-launi da hagu. Wannan kawai ya shafi fom a cikin wuraren kallo waɗanda ke da faɗin akalla 768px.

Yana iya buƙatar faɗin al'ada

Abubuwan shigarwa da zaɓaɓɓun an width: 100%;yi amfani da su ta tsohuwa a cikin Bootstrap. A cikin siffofin layi, mun sake saita cewa don width: auto;haka sarrafawa da yawa zasu iya zama akan layi ɗaya. Dangane da shimfidar ku, ana iya buƙatar ƙarin faɗin al'ada.

Koyaushe ƙara lakabi

Masu karatun allo za su sami matsala da fom ɗinku idan ba ku haɗa da lakabin kowane shigarwa ba. Don waɗannan nau'ikan layi, zaku iya ɓoye alamun ta amfani da .sr-onlyajin. Akwai ƙarin hanyoyin hanyoyin samar da lakabi don fasahar taimako, kamar aria-label, aria-labelledbyko titlesifa. Idan babu ɗaya daga cikin waɗannan, masu karatun allo za su iya yin amfani da placeholdersifa, idan akwai, amma lura cewa placeholderba a ba da shawarar yin amfani da azaman madadin wasu hanyoyin yin lakabi ba.

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

Siffar kwance

Yi amfani da azuzuwan grid ɗin da aka ayyana Bootstrap don daidaita lakabi da ƙungiyoyin sarrafa nau'i a cikin shimfidar wuri ta ƙara .form-horizontalzuwa tsari (wanda ba dole ba ne ya zama <form>). Yin haka yana canza .form-groups don yin aiki azaman layuka, don haka babu buƙatar .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>

Abubuwan sarrafawa masu goyan baya

Misalai na daidaitattun sarrafa nau'i masu goyan baya a cikin shimfidar tsari na misali.

Abubuwan shigarwa

Mafi yawan sarrafa nau'i na gama gari, filayen shigarwa na tushen rubutu. Ya haɗa da tallafi ga kowane nau'in HTML5: text, password, datetime, datetime-local, date, month, time, , week, number, email, url, search, tel, da color.

Nau'in sanarwar da ake buƙata

Abubuwan da aka shigar za a cika su ne kawai idan typean bayyana su da kyau.

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

Ƙungiyoyin shigarwa

Don ƙara haɗe-haɗen rubutu ko maɓalli kafin da/ko bayan kowane tushen rubutu <input>, duba ɓangaren shigar da ƙungiyar .

Yankin rubutu

Ikon tsari wanda ke goyan bayan layukan rubutu da yawa. Canja rowssifa kamar yadda ya cancanta.

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

Akwatunan rajista da rediyo

Akwatunan rajista don zaɓar ɗaya ko zaɓuɓɓuka da yawa a cikin jeri, yayin da rediyo ke zaɓar zaɓi ɗaya daga mutane da yawa.

Ana goyan bayan akwatunan rajistan shiga da radiyo, amma don samar da siginan "ba a yarda ba" akan karkatar da iyaye <label>, kuna buƙatar ƙara .disabledajin ga iyaye .radio, .radio-inline, .checkbox, ko .checkbox-inline.

Tsohuwar (tarage)

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

Akwatunan rajistan layi da rediyo

Yi amfani da .checkbox-inlineko .radio-inlineazuzuwan akan jerin akwatuna ko radiyo don sarrafawa waɗanda ke bayyana akan layi ɗaya.

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

Akwatunan rajista da rediyo ba tare da rubutun lakabi ba

Idan ba ku da rubutu a cikin <label>, an sanya shigarwar kamar yadda kuke tsammani. A halin yanzu yana aiki akan akwatunan rajistan shiga da rediyo marasa layi. Ka tuna har yanzu samar da wani nau'i na lakabin don fasahar taimako (misali, ta amfani da 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>

Zaba

Lura cewa yawancin zaɓin menu na asali - wato a cikin Safari da Chrome - suna da sasanninta da ba za a iya canzawa ta hanyar border-radiuskaddarorin ba.

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

Don <select>sarrafawa tare da multiplesifa, ana nuna zaɓuɓɓuka da yawa ta tsohuwa.

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

A tsaye iko

Lokacin da kake buƙatar sanya rubutu a sarari kusa da lakabin tsari a cikin fom, yi amfani da .form-control-staticajin akan <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>

Yanayin mayar da hankali

Muna cire tsoffin outlinesifofi akan wasu nau'ikan sarrafawa kuma muna amfani da box-shadowa wurin sa don :focus.

`:focus`Jihar demo

Shigar da misalin da ke sama yana amfani da salo na al'ada a cikin takaddun mu don nuna :focusjihar akan .form-control.

Jihar naƙasassu

Ƙara disabledsifa ta boolean akan shigarwa don hana hulɗar mai amfani. Abubuwan da aka kashe sun bayyana sun fi sauƙi kuma suna ƙara not-allowedsiginan kwamfuta.

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

An kashe saitin filayen

Ƙara disabledsifa zuwa <fieldset>don kashe duk abubuwan sarrafawa a cikin <fieldset>lokaci ɗaya.

Faɗakarwa game da ayyukan haɗin gwiwar`<a>`

Ta hanyar tsoho, masu bincike za su kula da duk sarrafa nau'i na asali ( <input>, <select>da <button>abubuwa) a cikin <fieldset disabled>nakasassu, suna hana mu'amalar madannai da linzamin kwamfuta a kansu. Koyaya, idan fom ɗin ku kuma ya haɗa da <a ... class="btn btn-*">abubuwa, waɗannan za a ba su salon pointer-events: none. Kamar yadda aka gani a cikin sashin game da yanayin nakasa don maɓalli (kuma musamman a cikin ƙaramin yanki don abubuwan anga), wannan kadarar CSS ba ta riga ta daidaita ba kuma ba ta da cikakken tallafi a cikin Opera 18 da ƙasa, ko a cikin Internet Explorer 11, kuma ta ci nasara. 't hana masu amfani da madannai damar mayar da hankali ko kunna waɗannan hanyoyin haɗin. Don haka don zama lafiya, yi amfani da JavaScript na al'ada don kashe irin waɗannan hanyoyin haɗin.

Daidaita-browser

Yayin da Bootstrap zai yi amfani da waɗannan salon a cikin duk masu bincike, Internet Explorer 11 da ƙasa ba sa cikakken goyon bayan disabledsifa akan <fieldset>. Yi amfani da JavaScript na al'ada don kashe saitin filin a cikin waɗannan masu binciken.

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

Karanta kawai

Ƙara readonlysifa ta boolean akan shigarwa don hana gyara ƙimar shigarwar. Abubuwan da ake karantawa kawai suna bayyana masu sauƙi (kamar abubuwan da aka kashe), amma suna riƙe daidaitaccen siginan kwamfuta.

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

Taimako rubutu

Toshe matakin taimakon rubutu don sarrafa tsari.

Haɗa rubutun taimako tare da sarrafa tsari

Rubutun taimako ya kamata a haɗa shi a fili tare da sarrafa nau'i wanda ya shafi amfani da aria-describedbysifa. Wannan zai tabbatar da cewa fasahar taimako - kamar masu karanta allo - za su sanar da wannan rubutun taimako lokacin da mai amfani ya mai da hankali ko shigar da sarrafawa.

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

Jihohin tabbatarwa

Bootstrap ya haɗa da salon tabbatarwa don kuskure, faɗakarwa, da jihohin nasara akan sarrafa tsari. Don amfani, ƙara .has-warning, .has-error, ko .has-successzuwa kashi na iyaye. Kowane .control-label, .form-control, kuma .help-blocka cikin wannan kashi zai karɓi salon tabbatarwa.

Isar da yanayin tabbatarwa ga fasaha masu taimako da masu amfani da makafi

Yin amfani da waɗannan salon tabbatarwa don nuna yanayin sarrafa nau'i kawai yana ba da alamar gani, alamar launi, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo - ko ga masu amfani da makafi.

Tabbatar cewa an samar da wata madaidaicin alamar jihar. Misali, zaku iya haɗa da alama game da jiha a cikin <label>rubutun sarrafa nau'i da kanta (kamar yadda yake a cikin misalin lambar da ke gaba), haɗa da Glyphicon (tare da madadin rubutu mai dacewa ta amfani da .sr-onlyaji - duba misalan Glyphicon ), ko ta hanyar samar da ƙarin toshe rubutun taimako . Musamman don fasahohin taimako, ana iya sanya madaidaitan tsari mara inganci aria-invalid="true".

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

Tare da gumaka na zaɓi

Hakanan zaka iya ƙara gumakan martani na zaɓi tare da ƙari .has-feedbackda gunkin dama.

Gumakan amsawa suna aiki tare da <input class="form-control">abubuwan rubutu kawai.

Gumaka, lakabi, da ƙungiyoyin shigarwa

Ana buƙatar sanya gumakan martani da hannu don abubuwan shigarwa ba tare da lakabi ba kuma don ƙungiyoyin shigarwa tare da ƙari akan dama. Ana ƙarfafa ku sosai don samar da takubba don duk abubuwan da aka shigar don dalilai masu isa. Idan kuna son hana alamun nunawa, ɓoye su tare da .sr-onlyajin. Idan dole ne ku yi ba tare da takalmi ba, daidaita topdarajar gunkin martani. Don ƙungiyoyin shigarwa, daidaita rightƙimar zuwa ƙimar pixel da ta dace dangane da faɗin addon ku.

Isar da ma'anar gunkin zuwa fasahar taimako

Don tabbatar da cewa fasahar taimako - kamar masu karanta allo - suna isar da ma'anar gunki daidai, ƙarin ɓoyayyun rubutu yakamata a haɗa shi tare da .sr-onlyajin kuma a haɗe shi a sarari tare da sarrafa nau'ikan da ke da alaƙa da amfani aria-describedby. A madadin, tabbatar da cewa ma'anar (misali, gaskiyar cewa akwai gargadi ga wani filin shigar da rubutu) an isar da shi ta wani nau'i daban-daban, kamar canza rubutun ainihin <label>alaƙa da sarrafa nau'i.

Ko da yake waɗannan misalan sun riga sun ambaci yanayin tabbatarwa na nau'ikan sarrafa nau'ikan su a cikin <label>rubutun kanta, dabarar da ke sama (ta amfani .sr-onlyda rubutu da aria-describedby) an haɗa su don dalilai na misali.

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

Gumaka na zaɓi a cikin siffofin kwance da layi

<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`Gumaka na zaɓi tare da alamun ɓoye

Idan kayi amfani da .sr-onlyajin don ɓoye nau'i mai sarrafa nau'i <label>(maimakon amfani da wasu zaɓuɓɓukan lakabi, kamar aria-labelsifa), Bootstrap zai daidaita matsayin gunkin ta atomatik da zarar an ƙara shi.

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

Sarrafa girman girman

Saita tsayi ta amfani da azuzuwan kamar .input-lg, kuma saita faɗin ta amfani da azuzuwan grid kamar .col-lg-*.

Girman tsayi

Ƙirƙirar sarrafa tsari mai tsayi ko gajere wanda ya dace da girman maɓalli.

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

Girman nau'in nau'i na kwance

Girman lakabi da sauri da samar da sarrafawa a ciki .form-horizontalta ƙara .form-group-lgko .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>

Girman ginshiƙi

Kunna abubuwan shiga cikin ginshiƙan grid, ko kowane ɓangaren iyaye na al'ada, don aiwatar da nisa da ake so cikin sauƙi.

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

Maballin tags

Yi amfani da azuzuwan maɓalli akan <a>, <button>, ko <input>kashi.

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

takamaiman amfani

Yayin da za a iya amfani da azuzuwan maɓalli a kan <a>da <button>abubuwa, <button>abubuwa ne kawai ake tallafawa a cikin abubuwan haɗin nav da navbar ɗin mu.

Hanyoyin haɗi suna aiki azaman maɓalli

Idan <a>ana amfani da abubuwan don yin aiki azaman maɓalli - yana haifar da ayyuka na cikin shafi, maimakon kewaya zuwa wani takarda ko sashe a cikin shafin na yanzu - ya kamata kuma a ba su abin da ya dace role="button".

Maɓallin browsing

A matsayin mafi kyawun aiki, muna ba da shawarar yin amfani da <button>kashi a duk lokacin da zai yiwu don tabbatar da madaidaicin ma'anar mai binciken giciye.

Daga cikin wasu abubuwa, akwai kwaro a cikin Firefox <30 wanda ke hana mu saita maɓallai line-heightna <input>tushen, yana sa ba su dace daidai da tsayin sauran maɓallan akan Firefox ba.

Zabuka

Yi amfani da kowane ɗayan darussan maɓalli don ƙirƙirar maɓalli mai salo da sauri.

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

Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana ga maɓalli kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (rubutun da ake gani na maɓalli), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da ke ɓoye tare da .sr-onlyajin.

Girman girma

Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-lg, .btn-sm, ko .btn-xsdon ƙarin girma.

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

Ƙirƙirar maɓallan matakin toshe-waɗanda ke faɗin faɗin mahaifa- ta ƙara .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>

Jihar mai aiki

Maɓallai za su bayyana a danna (tare da bango mai duhu, iyakar duhu, da inuwar saiti) lokacin aiki. Don <button>abubuwa, ana yin wannan ta hanyar :active. Don <a>abubuwa, an yi shi da .active. Koyaya, zaku iya amfani .activeda <button>s (kuma ku haɗa da aria-pressed="true"sifa) idan kuna buƙatar kwafin yanayin aiki da tsari.

Maɓallin maɓallin

Ba buƙatar ƙarawa :activeba kamar yadda yake ajin ƙididdiga, amma idan kuna buƙatar tilasta bayyanar iri ɗaya, ci gaba da ƙara .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>

Anga kashi

Ƙara .activeajin zuwa <a>maɓalli.

Mahadar farko mahada

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

Jihar naƙasassu

Sanya maɓallan su yi kama da ba za a danna su ta hanyar mayar da su tare da opacity.

Maɓallin maɓallin

Ƙara disabledsifa zuwa <button>maɓalli.

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

Daidaita-browser

Idan ka ƙara disabledsifa zuwa <button>, Internet Explorer 9 da ƙasa za su sanya rubutu launin toka tare da inuwar rubutu mara kyau wanda ba za mu iya gyarawa ba.

Anga kashi

Ƙara .disabledajin zuwa <a>maɓalli.

Mahadar farko mahada

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

Muna amfani .disabledda ajin mai amfani anan, kama da na gama gari .active, don haka ba a buƙatar prefix.

Haɗin aikin haɗin gwiwa

Wannan ajin yana amfani pointer-events: noneda shi don ƙoƙarin kashe ayyukan haɗin yanar gizo na <a>s, amma wannan kayan CSS ba a daidaita ba tukuna kuma ba a samun cikakken tallafi a cikin Opera 18 da ƙasa, ko a cikin Internet Explorer 11. Bugu da ƙari, har ma a cikin masu binciken da ke goyan bayan pointer-events: none, keyboard kewayawa ya kasance ba shi da tasiri, ma'ana cewa masu amfani da madannai masu gani da masu amfani da fasahar taimako har yanzu za su iya kunna waɗannan hanyoyin haɗin. Don haka don zama lafiya, yi amfani da JavaScript na al'ada don kashe irin waɗannan hanyoyin haɗin.

Hotuna masu amsawa

Hotuna a cikin Bootstrap 3 za a iya sanya su cikin jin daɗi ta hanyar ƙari na .img-responsiveajin. Wannan ya shafi max-width: 100%;, height: auto;kuma display: block;ga hoton domin ya daidaita da kyau zuwa kashi na iyaye.

Don tsakiyar hotuna masu amfani da .img-responsiveajin, yi amfani da .center-blockmaimakon .text-center. Duba sashin azuzuwan taimako don ƙarin cikakkun bayanai game da .center-blockamfani.

Hotunan SVG da IE 8-10

A cikin Internet Explorer 8-10, hotunan SVG tare .img-responsiveda girman su ba su da yawa. Don gyara wannan, ƙara width: 100% \9;inda ya cancanta. Bootstrap baya amfani da wannan ta atomatik saboda yana haifar da rikitarwa zuwa wasu tsarin hoto.

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

Siffofin hoto

Ƙara azuzuwan zuwa <img>kashi don sauƙin salo a kowane aiki.

Daidaita-browser

Ka tuna cewa Internet Explorer 8 ba shi da tallafi don sasanninta.

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

Launuka na yanayi

Isar da ma'ana ta launi tare da ɗimbin girmamawa azuzuwan amfani. Ana iya amfani da waɗannan zuwa hanyoyin haɗin gwiwa kuma za su yi duhu a kan shawagi kamar yadda tsarin haɗin yanar gizon mu na asali.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Ka yi la'akari da abin da ake kira euismod.

Donec ullamcorper nulla non metus 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>

Ma'amala da takamaiman

Wani lokaci ba za a iya amfani da azuzuwan girmamawa ba saboda keɓancewar wani zaɓi. A mafi yawan lokuta, isasshiyar mafita ita ce kunsa rubutun ku <span>tare da aji.

Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abubuwan da ke cikin kanta (ana amfani da launukan mahallin kawai don ƙarfafa ma'anar da ta riga ta kasance a cikin rubutu/tambarin), ko kuma an haɗa ta ta hanyar madadin, kamar ƙarin rubutu da ke ɓoye tare da .sr-onlyajin. .

Bayanan yanayi

Mai kama da azuzuwan launi na mahallin, a sauƙaƙe saita bangon wani abu zuwa kowane aji na mahallin. Abubuwan anka za su yi duhu akan shawagi, kamar azuzuwan rubutu.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Ka yi la'akari da abin da ake kira euismod.

Donec ullamcorper nulla non metus 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>

Ma'amala da takamaiman

Wasu lokuta ba za a iya amfani da azuzuwan bayanan mahallin ba saboda keɓancewar wani zaɓi. A wasu lokuta, isasshiyar mafita ita ce haɗa abun cikin ku a <div>cikin aji.

Isar da ma'ana ga fasahar taimako

Kamar yadda yake tare da launuka na mahallin , tabbatar da cewa duk wata ma'anar da aka fitar ta hanyar launi kuma ana isar da ita a cikin sigar da ba ta gabatarwa kawai ba.

Rufe gumaka

Yi amfani da madaidaicin gunkin kusa don korar abun ciki kamar tsari da faɗakarwa.

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

Kulawa

Yi amfani da kulawa don nuna ayyukan zazzagewa da jagora. Lura cewa tsohuwar kulawa za ta juya ta atomatik a menus da aka sauke .

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

Saurin yawo

Tashi wani kashi zuwa hagu ko dama tare da aji. !importantan haɗa shi don guje wa takamaiman batutuwa. Hakanan za'a iya amfani da azuzuwan azaman mixins.

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

Katange abun ciki na tsakiya

Saita wani kashi zuwa display: blockda tsakiya ta margin. Akwai shi azaman mixin da aji.

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

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

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

Sharefix

Sauƙaƙe floats ta ƙara .clearfix zuwa kashi na iyaye . Yana amfani da ƙaramin share fage kamar yadda Nicolas Gallagher ya shahara. Hakanan za'a iya amfani dashi azaman mixin.

<!-- 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();
}

Nunawa da ɓoye abun ciki

Tilasta wani kashi don nunawa ko ɓoye ( ciki har da masu karanta allo ) tare da amfani .showda .hiddenazuzuwan. Waɗannan azuzuwan suna amfani !importantda su don guje wa ƙayyadaddun rikice-rikice, kamar masu yawo da sauri . Suna samuwa kawai don jujjuya matakin toshe. Hakanan za'a iya amfani da su azaman mixins.

.hideyana samuwa, amma ba koyaushe yana shafar masu karanta allo ba kuma yana ƙarewa har zuwa v3.0.1. Yi amfani .hiddenko .sr-onlya maimakon haka.

Bugu da ƙari, .invisibleana iya amfani da shi don kunna ganuwa kawai na wani abu, ma'ana displayba a gyaggyara sa ba kuma ɓangaren na iya yin tasiri ga tafiyar daftarin aiki.

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

Mai karanta allo da abun ciki na kewayawa madannai

Boye wani abu ga duk na'urori ban da masu karanta allo tare da .sr-only. Haɗa .sr-onlytare da .sr-only-focusablesake nuna kashi lokacin da aka mayar da hankali (misali ta mai amfani da madannai kawai). Wajibi ne don bin mafi kyawun ayyuka . Hakanan za'a iya amfani dashi azaman mixins.

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

Sauya hoto

Yi amfani da .text-hideajin ko mahaɗa don taimakawa maye gurbin abun ciki na rubutu tare da hoton bango.

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

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

Don saurin haɓaka abokantaka na wayar hannu, yi amfani da waɗannan azuzuwan masu amfani don nunawa da ɓoye abun ciki ta na'urar ta hanyar tambayar kafofin watsa labarai. Hakanan an haɗa da azuzuwan masu amfani don juya abun ciki lokacin buga.

Yi ƙoƙarin amfani da waɗannan akan ƙayyadaddun tushe kuma guje wa ƙirƙirar nau'ikan rukunin yanar gizo daban-daban. Madadin haka, yi amfani da su don dacewa da gabatarwar kowace na'ura.

Akwai azuzuwan

Yi amfani da guda ɗaya ko haɗe-haɗe na azuzuwan da ke akwai don jujjuya abun ciki a cikin wuraren faɗuwar kallo.

	Ƙarin ƙananan na'uroriWayoyi (<768px)	Ƙananan na'uroriAllunan (≥768px)	Na'urori masu matsakaiciKwamfuta (≥992px)	Manyan na'uroriKwamfuta (≥1200px)
`.visible-xs-*`	Ganuwa	Boye	Boye	Boye
`.visible-sm-*`	Boye	Ganuwa	Boye	Boye
`.visible-md-*`	Boye	Boye	Ganuwa	Boye
`.visible-lg-*`	Boye	Boye	Boye	Ganuwa
`.hidden-xs`	Boye	Ganuwa	Ganuwa	Ganuwa
`.hidden-sm`	Ganuwa	Boye	Ganuwa	Ganuwa
`.hidden-md`	Ganuwa	Ganuwa	Boye	Ganuwa
`.hidden-lg`	Ganuwa	Ganuwa	Ganuwa	Boye

Dangane da v3.2.0, .visible-*-*azuzuwan kowane wurin hutu sun zo cikin bambance-bambancen guda uku, ɗaya don kowane displayƙimar kadarorin CSS da aka jera a ƙasa.

Ƙungiyar azuzuwan	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Don haka, don ƙarin ƙananan xsfuska ( ) misali, .visible-*-*azuzuwan da ake da su sune: .visible-xs-block, .visible-xs-inline, da .visible-xs-inline-block.

Azuzuwan .visible-xs, .visible-sm, .visible-md, da .visible-lgkuma wanzuwa, amma sun ƙare har zuwa v3.2.0 . Sun yi kusan daidai da .visible-*-block, sai dai tare da ƙarin lokuta na musamman don <table>abubuwan da ke da alaƙa.

Buga azuzuwan

Kama da azuzuwan amsa na yau da kullun, yi amfani da waɗannan don jujjuya abun ciki don bugawa.

Darasi	Browser	Buga
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Boye	Ganuwa
`.hidden-print`	Ganuwa	Boye

Hakanan ajin .visible-printyana wanzu amma an soke shi har zuwa v3.2.0 . Yana da kusan daidai da .visible-print-block, sai dai tare da ƙarin lokuta na musamman don <table>abubuwan da ke da alaƙa.

Abubuwan gwaji

Maimaita girman burauzar ku ko lodi akan na'urori daban-daban don gwada azuzuwan masu amfani.

Ganuwa akan...

Alamun kore kore suna nuna ɓangaren yana bayyane a wurin kallon ku na yanzu.

Karamin karami ✔ Ganuwa akan x-karami

Karami ✔ Ganuwa akan karami

Matsakaici ✔ Ganuwa akan matsakaici

Babba ✔ Ganuwa akan manya

Karami da kanana ✔ Ganuwa akan x-kanana da ƙanana

Matsakaici da babba ✔ Ganuwa akan matsakaici da babba

Karami da matsakaita ✔ Ganuwa akan x-kanana da matsakaici

Karami da babba ✔ Ganuwa akan kanana da babba

Karami da babba ✔ Ganuwa akan x-kanana da babba

Ƙananan da matsakaici ✔ Ganuwa akan kanana da matsakaita

Boye akan...

Anan, alamun koren kuma suna nuna ɓoyayyiyar ɓangaren a wurin kallon ku na yanzu.

Karamin karami ✔ Boye akan x-karami

Karami ✔ Boye akan karami

Matsakaici ✔ Boye akan matsakaici

Babba ✔ Boye akan babba

Karami da kanana ✔ Boye akan x-kanana da ƙanana

Matsakaici da babba ✔ Boye akan matsakaici da babba

Karami da matsakaita ✔ Boye akan x-kanana da matsakaici

Karami da babba ✔ Boye akan kanana da babba

Karami da babba ✔ Boye akan x-kanana da babba

Ƙananan da matsakaici ✔ Boye akan kanana da matsakaita

Bootstrap's CSS an gina shi akan Ƙananan, mai aiwatarwa tare da ƙarin ayyuka kamar masu canji, mixins, da ayyuka don haɗa CSS. Waɗanda ke neman amfani da tushen Fayiloli kaɗan maimakon fayilolin CSS ɗinmu da aka haɗe suna iya yin amfani da yawancin masu canji da mahaɗan da muke amfani da su a cikin tsarin.

Ana rufe masu canjin grid da mixins a cikin sashin tsarin Grid .

Haɗa Bootstrap

Ana iya amfani da Bootstrap aƙalla hanyoyi biyu: tare da haɗakarwar CSS ko tare da tushen Ƙananan fayiloli. Don tattara Ƙananan fayiloli, tuntuɓi sashin Farawa don yadda ake saita yanayin ci gaban ku don gudanar da mahimman umarni.

Kayan aikin haɗin ɓangare na uku na iya aiki tare da Bootstrap, amma ƙungiyar mu ba ta da goyan bayan su.

Masu canji

Ana amfani da sauye-sauye a cikin gabaɗayan aikin a matsayin hanya don daidaitawa da raba dabi'un da aka saba amfani da su kamar launuka, tazara, ko tarin rubutu. Don cikakken ɓarna, da fatan za a duba Customizer .

Launuka

Sauƙaƙe yin amfani da tsarin launi guda biyu: launin toka da na ma'ana. Launuka masu launin toka suna ba da dama ga sauri zuwa inuwar baƙar fata da aka saba amfani da su yayin da na fassara ya haɗa da launuka daban-daban waɗanda aka ba da ƙima masu ma'ana.

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

Yi amfani da kowane ɗayan waɗannan masu canjin launi kamar yadda suke ko sake sanya su zuwa mafi ma'ana masu ma'ana don aikinku.

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

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

Zane-zane

Kadan daga cikin masu canji don daidaita mahimman abubuwan kwarangwal ɗin rukunin yanar gizonku da sauri.

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

Hanyoyin haɗi

Sauƙaƙa salon hanyoyin haɗin yanar gizon ku tare da madaidaicin launi tare da ƙima ɗaya kawai.

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

Lura cewa @link-hover-coloryana amfani da aiki, wani kayan aiki mai ban sha'awa daga Ƙananan, don ƙirƙirar launi mai dacewa ta atomatik. Kuna iya amfani da darken, lighten, saturate, da desaturate.

Rubutun rubutu

Sauƙaƙe saita nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i) nau'i-nau'i. Bootstrap yana yin amfani da waɗannan kuma don samar da mahaɗin rubutu cikin sauƙi.

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

Gumaka

Sau biyu masu saurin canji don keɓance wuri da sunan fayil na gumakanku.

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

Abubuwan da aka gyara

Abubuwan da ke cikin Bootstrap suna amfani da wasu tsoho masu canji don saita ƙima na gama gari. Anan ne aka fi amfani da su.

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

Mixins masu siyarwa

Mixins masu siyarwa sune mixins don taimakawa tallafawa masu bincike da yawa ta haɗa da duk prefixes masu siyarwa masu dacewa a cikin CSS ɗin ku.

Girman akwatin

Sake saita samfurin akwatin kayan aikin ku tare da mahaɗa guda ɗaya. Don mahallin, duba wannan labarin mai taimako daga Mozilla .

An soke mixin kamar na v3.2.0 , tare da gabatarwar Autoprefixer. Don adana jituwa-baya, Bootstrap zai ci gaba da amfani da mahaɗin a ciki har sai Bootstrap v4.

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

Zagaye sasanninta

A yau duk masu bincike na zamani suna goyan bayan border-radiuskadarorin da ba a sa gaba ba. Don haka, babu .border-radius()mixin, amma Bootstrap ya haɗa da gajerun hanyoyi don saurin zagaye sasanninta biyu a wani gefen abu.

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

Akwatin (Drop) inuwa

Idan masu sauraron ku suna amfani da sababbin kuma mafi girma masu bincike da na'urori, tabbatar da yin amfani da box-shadowdukiyar da kanta. Idan kuna buƙatar tallafi don tsofaffin na'urorin Android (pre-v4) da na'urorin iOS (pre-iOS 5), yi amfani da mahaɗin da aka yanke don ɗaukar -webkitprefix ɗin da ake buƙata.

An soke mixin kamar na v3.1.0, tun da Bootstrap baya goyan bayan tsofaffin dandamali waɗanda ba sa goyan bayan daidaitaccen kadarorin. Don adana jituwa-baya, Bootstrap zai ci gaba da amfani da mahaɗin a ciki har sai Bootstrap v4.

Tabbatar yin amfani da rgba()launuka a cikin inuwar akwatin ku don haka suna haɗuwa kamar yadda zai yiwu tare da bango.

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

Sauye-sauye

Mixins masu yawa don sassauci. Saita duk bayanan canji tare da guda ɗaya, ko ƙididdige ɗan lokaci da tsawon lokacin da ake buƙata.

An soke mixins kamar na v3.2.0, tare da gabatarwar Autoprefixer. Don adana jituwa-baya, Bootstrap zai ci gaba da amfani da mahaɗin ciki har sai Bootstrap v4.

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

Sauye-sauye

Juyawa, sikeli, fassara (matsar da), ko karkatar da kowane abu.

An soke mixins kamar na v3.2.0, tare da gabatarwar Autoprefixer. Don adana jituwa-baya, Bootstrap zai ci gaba da amfani da mahaɗin ciki har sai Bootstrap v4.

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

raye-raye

Mixin guda ɗaya don amfani da duk kaddarorin rayarwa na CSS3 a cikin shela ɗaya da sauran haɗe-haɗe don kaddarorin mutum ɗaya.

An soke mixins kamar na v3.2.0, tare da gabatarwar Autoprefixer. Don adana jituwa-baya, Bootstrap zai ci gaba da amfani da mahaɗin ciki har sai Bootstrap v4.

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

Bahaushe

Saita rashin sarari don duk masu bincike kuma samar da filterkoma baya ga IE8.

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

Rubutun wuri

Samar da mahallin don sarrafa tsari a cikin kowane fage.

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

ginshiƙai

Ƙirƙirar ginshiƙai ta hanyar CSS a cikin kashi ɗaya.

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

Gradients

Sauƙaƙe juya kowane launuka biyu zuwa bangon bango. Samun ci gaba da saita alkibla, yi amfani da launuka uku, ko amfani da radial gradient. Tare da mixin guda ɗaya za ku sami duk prefixed syntaxes da kuke buƙata.

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

Hakanan zaka iya ƙayyade kusurwar daidaitaccen launi biyu, gradient na layi:

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

Idan kana buƙatar salon gradient na aski, yana da sauƙi, kuma. Kawai saka launi guda ɗaya kuma za mu lulluɓe wani farin ratsin fari mai jujjuyawa.

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

Haɓaka ante kuma yi amfani da launuka uku maimakon. Saita launi na farko, launi na biyu, tsayawar launi na biyu (ƙimar kashi kamar 25%), da launi na uku tare da waɗannan mixins:

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

A kula! Idan kun taɓa buƙatar cire gradient, tabbatar da cire kowane takamaiman IE wanda filterwataƙila kun ƙara. Kuna iya yin haka ta amfani da .reset-filter()mixin tare da background-image: none;.

Mixins masu amfani

Mixins masu amfani sune mixins waɗanda ke haɗa in ba haka ba kaddarorin CSS marasa alaƙa don cimma takamaiman manufa ko ɗawainiya.

Sharefix

Manta ƙara class="clearfix"zuwa kowane kashi kuma a maimakon haka ƙara .clearfix()mixin a inda ya dace. Yana amfani da micro clearfix daga Nicolas Gallagher .

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

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

Tsaya a kwance

Yi sauri tsakiya kowane bangare a cikin mahaifansa. Ana buƙatar widthko max-widthsaita.

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

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

Girman mataimaka

Ƙayyade girman abu cikin sauƙi.

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

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

Wuraren da za a iya daidaitawa

Sauƙaƙe daidaita zaɓuɓɓukan girman girman kowane yanki na rubutu, ko kowane abu. Matsaloli ga dabi'ar burauza ta al'ada ( both).

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

Yanke rubutu

Sauƙaƙe datse rubutu tare da ellipsis tare da mixin guda ɗaya. Yana buƙatar kashi ya zama blockko inline-blockmatakin.

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

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

Hotunan retina

Ƙayyade hanyoyin hoto guda biyu da girman hoton @1x, kuma Bootstrap zai samar da tambayar mai jarida @2x. Idan kuna da hotuna da yawa da za ku yi aiki, yi la'akari da rubuta CSS hoton retina da hannu a cikin tambayar kafofin watsa labarai guda ɗaya.

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

Yayin da aka gina Bootstrap akan Ƙananan, yana da tashar tashar Sass na hukuma . Muna kiyaye shi a cikin keɓan ma'ajiyar GitHub kuma muna ɗaukar sabuntawa tare da rubutun juyawa.

Me ya hada

Tunda tashar tashar Sass tana da repo daban kuma tana hidimar masu sauraro daban-daban, abubuwan da ke cikin aikin sun bambanta sosai da babban aikin Bootstrap. Wannan yana tabbatar da tashar tashar Sass ta dace da yawancin tsarin tushen Sass gwargwadon yiwuwa.

Hanya	Bayani
`lib/`	Ruby gem code (Sass sanyi, Rails da Compass hadewa)
`tasks/`	Rubutun masu juyawa (juyawa ƙasa ƙasa zuwa Sass)
`test/`	Gwaje-gwajen tattarawa
`templates/`	Bayyanar fakitin Compass
`vendor/assets/`	Sass, JavaScript, da fayilolin rubutu
`Rakefile`	Ayyuka na ciki, kamar rake da juyawa

Ziyarci ma'ajin GitHub na tashar tashar Sass don ganin waɗannan fayilolin suna aiki.

Shigarwa

Don bayani kan yadda ake shigarwa da amfani da Bootstrap don Sass, tuntuɓi GitHub readme . Ita ce mafi sabuntar tushen kuma ya haɗa da bayanai don amfani tare da Rails, Compass, da daidaitattun ayyukan Sass.

Bootstrap don Sass

CSS

Dubawa

HTML 5 doka

Wayar hannu ta farko

Rubutun rubutu da haɗin kai

Normalize.css

Kwantena

Tsarin Grid

Gabatarwa

Tambayoyin watsa labarai

Zaɓuɓɓukan Grid

Misali: Stack-to-horizontal

Misali: kwandon ruwa

Misali: Wayar hannu da tebur

Misali: Wayar hannu, kwamfutar hannu, tebur

Misali: Kundin ginshiƙi

Sake saitin ginshiƙi mai amsawa

ginshiƙan kashewa

ginshiƙan gida

Yin odar ginshiƙi

Ƙananan mixins da masu canji

Masu canji

Mixins

Misali amfani

Rubutun rubutu

Kanun labarai

h1. Bootstrap jagora

h2. Bootstrap jagora

h3. Bootstrap jagora

h4. Bootstrap jagora

h5. Bootstrap jagora

h6. Bootstrap jagora

h1. Bootstrap kan rubutun Sakandare

h2. Bootstrap kan rubutun Sakandare

h3. Bootstrap jagora rubutun Sakandare

h4. Bootstrap jagora rubutun Sakandare

h5. Bootstrap jagora rubutun Sakandare

h6. Bootstrap kan rubutun Sakandare

Kwafin jiki

Kwafin jikin jagora

Gina tare da Kadan

Abubuwan rubutu na layi

Alama rubutu

Rubutun da aka goge

Tsare-tsare rubutu

Saka rubutu

Rubutun jakunkuna

Karamin rubutu

M

Rubutun rubutu

Madadin abubuwa

Azuzuwan daidaitawa

Azuzuwan canji

Taqaitaccen bayani

Gajartawar asali

Farko

Adireshi

Blockquotes

Default blockquote

Zaɓuɓɓukan Blockquote

Sunan tushe

Madadin nuni

Lissafi

Ba a ba da oda ba

An yi oda

Mara salo

Layin layi

Bayani

Bayanin kwance

Gyara ta atomatik

Lambar

Layin layi

Shigar da mai amfani

Tushe na asali

Masu canji

Samfurin fitarwa

Tables

Misali na asali

Layukan tsige

Daidaita-browser

`:focus`Jihar demo

Faɗakarwa game da ayyukan haɗin gwiwar`<a>`

`.sr-only`Gumaka na zaɓi tare da alamun ɓoye