Amatsinda ya buto

Koresha amatsinda ya buto kugirango uhuze buto nyinshi hamwe nkigice kimwe. Kububaka hamwe nurukurikirane <a>cyangwa <button>ibintu.

Imyitozo myiza

Turasaba amabwiriza akurikira yo gukoresha amatsinda ya buto hamwe nibikoresho byifashishwa:

• Buri gihe ukoreshe ikintu kimwe mumatsinda imwe ya buto, <a>cyangwa <button>.
• Ntukavange buto yamabara atandukanye mumatsinda amwe.
• Koresha amashusho wongeyeho cyangwa aho kuba inyandiko, ariko menya neza ko ushiramo alt hamwe numutwe wicyubahiro aho bikenewe.

Amatsinda afitanye isano na Button hamwe nigitonyanga (reba hano hepfo) agomba guhamagarwa ukundi kandi buri gihe ushizemo caret yamanutse kugirango yerekane imyitwarire igamije.

Urugero rusanzwe

Dore uko HTML ishakisha itsinda rya buto risanzwe ryubatswe hamwe na buto ya tagi ya labour:

<div class = "btn-itsinda" > 
  <buto icyiciro = "btn" > 1 </button> 
  <buto icyiciro = "btn" > 2 </button> 
  <buto icyiciro = "btn" > 3 </button> 
</div>

Urugero rw'ibikoresho

Huza <div class="btn-group">ibice bya a <div class="btn-toolbar">kubintu byinshi bigoye.

<div class = "btn-toolbar" > 
  <div class = "btn-itsinda" > 
    ...
  </div>
</div>

Kugenzura agasanduku na radiyo nziza

Amatsinda ya buto arashobora kandi gukora nka radio, aho buto imwe yonyine ishobora kuba ikora, cyangwa agasanduku, aho umubare uwo ariwo wose wa buto ushobora kuba ukora. Reba inyandiko ya Javascript kubyo.

Shaka javascript »

Ibitonyanga mumatsinda ya buto

Umutwe! Utubuto dufite ibitonyanga bigomba kuba byiziritse kugiti cyabyo .btn-groupmuburyo .btn-toolbarbwo gutanga neza.

Incamake n'ingero

Koresha buto iyariyo yose kugirango utere menu yamanutse uyishyire muri a .btn-grouphanyuma utange menu ikwiye.

Urugero

Bisa na buto itsinda, marike yacu ikoresha buto isanzwe, ariko hamwe nintoki zongeweho kugirango tunonosore imiterere kandi dushyigikire Bootstrap yamanutse jQuery plugin.

<div class = "btn-itsinda" > 
  <a class = "btn guta-toggle" data-toggle = "dropdown" href = "#">   
    Igikorwa
    <span class = "caret" > </span> 
  </a>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Akorana na buto zose zingana

Ibitonyanga bya buto bikora mubunini ubwo aribwo bwose. buto yawe ingano kuri .btn-large,, .btn-smallcyangwa .btn-mini.

Irasaba javascript

Ibitonyanga bya buto bisaba Bootstrap yamanutse plugin kugirango ikore.

Rimwe na rimwe-nka mobile-ibimanuka bizamanuka hanze yukureba. Ugomba gukemura guhuza intoki cyangwa hamwe na javascript yihariye.

Incamake n'ingero

Kubaka kuri buto yitsinda ryimiterere na marike, turashobora gukora byoroshye buto yo gutandukana. Gutandukanya utubuto tugaragaza ibikorwa bisanzwe ibumoso hamwe no kumanura iburyo iburyo hamwe nibihuza.

Ingano

Koresha inyongera ya buto y'ibyiciro .btn-mini, .btn-smallcyangwa .btn-largekubunini.

<div class = "btn-itsinda" > 
  ...
  <ul class = "guta-menu gukurura-iburyo" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Urugero

Twagutse kuri bouton isanzwe yamanutse kugirango dutange buto ya kabiri igikorwa ikora nkigitonyanga gitandukanye.

<div class = "btn-itsinda" > 
  <buto icyiciro = "btn" > Igikorwa </button> 
  <buto icyiciro = "btn kumanuka-guhinduranya" data-toggle = "igitonyanga" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Ibitonyanga

Ibitonyanga byamanuka birashobora kandi guhindurwa kuva hasi hejuru wongeyeho icyiciro kimwe kubabyeyi ba hafi .dropdown-menu. Bizahindura icyerekezo cya i .caretno guhinduranya menu ubwayo kugirango yimuke kuva hasi hejuru aho hejuru hejuru.

<div class = "btn-itsinda ryamanutse" > 
  <buto icyiciro = "btn" > Igitonyanga </button> 
  <buto icyiciro = "btn kumanuka-guhinduranya" data-toggle = "igitonyanga" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Icyiciro cyibanze gikomeye

Ibice byose bya nav hano - tabs, ibinini, na lisiti - dusangire ikimenyetso kimwe shingiro hamwe nuburyo binyuze mumasomo .nav.

Igihe cyo gukoresha

Amababi n'ibinini nibyiza kubice birimo cyangwa kugendagenda hagati yimpapuro zibirimo.

Guhuza ibice

Guhuza nav ihuza, koresha ibyiciro .pull-leftbyingirakamaro .pull-right. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe.

Ibanze

Fata imiyoboro isanzwe <ul>hanyuma wongereho .nav-tabs:

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-tabs" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Ibinini by'ibanze

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-ibinini" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Uburyo bwo gutondeka 'em

Nka tabs n'ibinini bitambitse kubisanzwe, gusa ongeraho icyiciro cya kabiri .nav-stacked,, kugirango bigaragare bihagaritse.

Utubuto

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Ibinini byegeranye

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-ibinini nav-stacked" > 
  ...
</ul>

Ibikubiyemo bikize byoroshye

Ibitonyanga byamanutse muri Bootstrap tabs hamwe nibinini biroroshye cyane kandi bisaba gusa HTML yinyongera gusa na plugin yoroheje ya jQuery.

Jya kuri page ya Javascript kugirango usome docs mugutangiza ibitonyanga muri Bootstrap.

Tab hamwe nibitonyanga

• Murugo
• Ubufasha
• Kumanuka
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Ibinini hamwe nibitonyanga

• Murugo
• Ubufasha
• Kumanuka
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-ibinini" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Porogaramu-yuburyo bwo kuyobora

Urutonde rwa Nav rutanga inzira yoroshye kandi yoroshye yo kubaka amatsinda ya nav ihuza imitwe idahwitse. Bakoreshwa neza kuruhande nka Finder muri OS X.

Mu buryo bwubaka, zubatswe kumurongo umwe wa nav yuburyo bwa tabs n'ibinini, bityo imikoreshereze no kuyitunganya biroroshye.

Nibishushanyo

Urutonde rwa Nav narwo rworoshe gutunganya hamwe nudushushondanga. Ongeraho <i>tagi ikwiye hamwe nishuri hanyuma urashiraho.

Ibice bitambitse

Ongeraho utandukanya utambitse mugukora urutonde rwubusa hamwe nurwego .divider, nka gutya:

<ul class = "nav nav-urutonde" > 
  ...
  <li urwego = "umutandukanya" > </li> 
  ...
</ul>

Urugero nav

Fata urutonde rwihuza hanyuma wongereho class="nav nav-list":

<ul class = "nav nav-urutonde" > 
  <li urwego = "nav-umutwe" > 
    Andika umutwe
  </li>
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li>
    <a href = "#"> Isomero </a> _ 
  </li>
  ...
</ul>

Urugero hamwe namashusho

Urugero rumwe, ariko hamwe na <i>tagi kumashusho.

<ul class = "nav nav-urutonde" > 
  ...
  <li>
    <a href = "#"> _ 
      <i urwego = "igishushanyo-igitabo" > </i> 
      Isomero
    </a>
  </li>
  ...
</ul>

Harimo iki

Zana tabs yawe mubuzima hamwe na plugin yoroshye yo guhinduranya hagati yibirimo ukoresheje tabs. Bootstrap ihuza tabs muburyo butandukanye: hejuru (isanzwe), iburyo, hepfo, n'ibumoso.

Guhindura hagati yabo biroroshye kandi bisaba gusa guhindura ibimenyetso bike cyane.

Fade muri tabs

Kugirango utume gushira, ongera .fadekuri buri .tab-pane.

Irasaba plugin ya jQuery

Amababi yose ya tabbable akoreshwa na plugin yacu yoroheje ya jQuery. Soma byinshi kubyerekeranye no kuzana tabbable mubuzima kurupapuro rwa javascript .

Shaka javascript →

Urugero

Kugirango ukore tabs, kora .tab-paneindangamuntu idasanzwe kuri buri tab hanyuma uyizengere .tab-content.

Kuburyo cyangwa ibumoso bwahujwe tabs, funga i .nav-tabsna ..tab-content.tabbable

Ikimenyetso kiboneye

Gukoresha tabbable tabs bisaba gupfunyika div, gushiraho ibisobanuro, hamwe nibisobanuro byibikoresho.

<div class = "tabbable" > <! - Gusa bisabwa kubumoso / iburyo - -  
  <ul class = "nav nav-tabs" > 
    <li urwego = "rukora" > <a href = "#tab1" data-toggle = "tab"> Igice cya 1 </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> Igice cya 2 </a> </li>  
  </ul>
  <div class = "tab-ibirimo" > 
    <div class = "tab-pane ikora" id = "tab1" >  
      <p> Ndi mu gice cya 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, Ndi mu gice cya 2. </p>
    </div>
  </div>
</div>

Utubuto hepfo

Kuramo urutonde rwa HTML hanyuma wongere urwego rwo gushyira tabs hepfo.

<div class = "tabs ya tabs-munsi" > 
  <div class = "tab-ibirimo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Utubuto ibumoso

Hindura icyiciro kugirango ushyire tabs ibumoso.

<div class = "tabs ya tabs-ibumoso" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Utubuto iburyo

Hindura icyiciro kugirango ushyire tabs iburyo.

<div class = "tabs ya tabs-iburyo" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Navbar scafolding

Navbar isaba divi nkeya kugirango iyubake neza kugirango ihagarare cyangwa ihamye.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <div class = "kontineri" > 
      ...
    </div>
  </div>
</div>

Ikibaho gikwiye

Kosora navbar hejuru cyangwa hepfo ya viewport hamwe ninyongera yinyongera kumurongo wo hanze , .navbar.

<div class = "navbar navbar-ikosorwa-hejuru" > 
  ...
</div>

<div class = "navbar navbar-ikosorwa-hepfo" > 
  ...
</div>

Iyo ushyizeho navbar, ibuka kubara kubice byihishe munsi. Ongeramo 40px cyangwa byinshi bya padding kuri <body>. Wemeze kongeramo ibi nyuma yibanze ya Bootstrap CSS na mbere ya CSS itabishaka.

Izina ry'ikirango

Ihuza ryoroshye ryerekana ikirango cyawe cyangwa izina ryumushinga bisaba gusa ikirango.

<a class = "brand" href = "#"> _  
  Izina ry'umushinga
</a>

Imiterere muri navbar

Kugirango ubone neza kandi ushireho ifishi muri navbar, ongeramo ibyiciro bikwiye nkuko bigaragara hano hepfo. Ifishi isanzwe, shyiramo .navbar-formkandi haba .pull-leftcyangwa .pull-rightkugirango uyihuze neza.

<form class = "navbar-form gukurura-ibumoso" > 
  < ubwoko bwinjiza = "inyandiko" urwego = "span2" >  
</form>

Kuburyo bwihariye bwo gushakisha, ongeraho .navbar-searchkuri formno .search-querykwinjiza muburyo bwihariye muri navbar.

<form class = "navbar-shakisha gukurura-ibumoso" > 
  <iyinjiza ubwoko = "inyandiko" urwego = "gushakisha-kubaza" umwanya = "Shakisha" >   
</form>

Guhitamo guhitamo

Ukurikije ingano yibirimo muri topbar yawe, urashobora gushyira mubikorwa amahitamo asubiza. Kubikora, funga ibikubiyemo byawe muri div irimo div .nav-collapse.collapse, hanyuma wongereho navbar toggle buto , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <div class = "kontineri" > 
 
      <! - .btn-navbar ikoreshwa nka guhindagura ibintu bya navbar yaguye ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
      </a>
 
      <! - Witondere gusiga ikirango hanze niba ushaka ko cyerekanwa ->
      <a class = "brand" href = "#"> Izina ryumushinga </a>  
 
      <! - Ikintu cyose ushaka cyihishe kuri 940px cyangwa munsi, shyira imbere hano ->
      <div class = "nav-gusenyuka" > 
        <! - .nav, .navbar-gushakisha, .navbar-form, nibindi ->
      </div>
 
    </div>
  </div>
</div>

Imiyoboro

Ibintu byoroheje biroroshye kongeramo ukoresheje urutonde rutagabanijwe.

<ul class = "nav" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> Ihuza </a> </li> 
  <li> <a href = "#"> Ihuza </a> </li> 
</ul>

Urashobora kongeramo byoroshye abatandukanya kumurongo wawe hamwe nurutonde rwubusa hamwe nicyiciro cyoroshye. Gusa ongeraho ibi hagati yibihuza:

<ul class = "nav" > 
  ...
  <li urwego = "divider-vertical" > </li> 
  ...
</ul>

Guhuza ibice

Guhuza nav, gushakisha, cyangwa inyandiko, koresha .pull-leftibyiciro .pull-rightbyingirakamaro. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe.

Ongeraho Ibitonyanga

Ongeraho ibitonyanga nibitonyanga kuri nav biroroshye cyane, ariko bisaba gukoresha plugin yacu ya javascript .

<ul class = "nav" > 
  <li urwego = "kumanuka" > 
    <a href = "#" 
          icyiciro = "guta-guhindagura"
          data-toggle = "guta" >
          Konti
          <b urwego = "caret" > </b> 
    </a>
    <ul class = "ibitonyanga-menu" > 
      ...
    </ul>
  </li>
</ul>

Shaka javascript →

Inyandiko muri navbar

Gupfunyika imirongo yinyandiko muri a <.navbar-text>, mubisanzwe kumurongo <p>kugirango uyobore neza nibara.

Kuki kubikoresha

Kugenda kwa Breadcrumb ikoreshwa nkuburyo bwo kwereka abakoresha aho bari muri porogaramu cyangwa kurubuga, ariko ntabwo ari inzira yambere. Komeza gukoresha gake kandi byihuse kugirango bigire akamaro.

Ingero

Urugero rumwe rwerekanwe nkuko rushobora kwerekanwa kurupapuro rwinshi.

• Murugo

• Murugo /
• Isomero

• Murugo /
• Isomero /
• Amakuru

Markup

HTML nurutonde rwawe rusanzwe rudafite urutonde.

<ul class = "umutsima" > 
  <li>
    <a href = "#"> Urugo </a> <span class = " divider" > / </span>   
  </li>
  <li>
    <a href = "#"> Isomero </a> <span class = " divider" > / </span>   
  </li>
  <li urwego = "rukora" > Amakuru </li> 
</ul>

Igihe cyo gukoresha

Ultra yoroshye kandi yoroheje yerekana pagination yahumetswe na Rdio, nziza kuri porogaramu n'ibisubizo by'ishakisha. Inzitizi nini iragoye kubura, byoroshye kugereranywa, kandi itanga ahantu hanini ho gukanda.

Ipaji ya leta ihuza

Ihuza irashobora guhindurwa kandi ikora mubihe byinshi hamwe nicyiciro gikwiye. .disabledkumirongo idahinduka no .activekurupapuro rwubu.

Guhuza byoroshye

Ongeramo kimwe mubyiciro bibiri bidahwitse kugirango uhindure guhuza pagination ihuza: .pagination-centeredna .pagination-right.

Ingero

Mburabuzi pagination ibice biroroshye kandi ikora muburyo butandukanye.

Markup

Bipfunyitse muri a <div>, pagination ni a <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Ibanza </a> </li> 
    <li urwego = "rukora" > 
      <a href = "#"> 1 </a> _ 
    </li>
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> Ibikurikira </a> </li> 
  </ul>
</div>

Ibyerekeye pager

Igice cya pager ni ihuriro ryibihuza byoroheje byo gushyira mubikorwa hamwe nurumuri ndetse nuburyo bworoshye. Nibyiza kurubuga rworoshye nka blog cyangwa ibinyamakuru.

Leta ihitamo ubumuga

Ipaji ihuza kandi ikoresha .disabledicyiciro rusange uhereye kuri pagination.

Urugero rusanzwe

Mburabuzi, pager hagati ihuza.

• Mbere
• Ibikurikira

<ul class = "pager" > 
  <li>
    <a href = "#"> Mbere </a> _ 
  </li>
  <li>
    <a href = "#"> Ibikurikira </a> _ 
  </li>
</ul>

Guhuza

Ubundi, urashobora guhuza buri murongo kumpande:

• Er Umusaza
• Gishya →

<ul class = "pager" > 
  <li urwego = "ubanza" > 
    <a href = "#"> & larr ; Umusaza </a> 
  </li>
  <li urwego = "ubutaha" > 
    <a href = "#"> Gishya & rarr ; </a> 
  </li>
</ul>

Ibyerekeye

Badges ni ntoya, yoroshye ibice byo kwerekana icyerekezo cyangwa kubara ubwoko runaka. Bakunze kuboneka mubakiriya ba imeri nka Mail.app cyangwa kuri porogaramu zigendanwa kugirango bamenyeshe.

Amasomo aboneka

Bootstrap itanga ibintu byoroshye, byoroshye byitwa intwari kugirango yerekane ibiri kurubuga rwawe. Ikora neza kubucuruzi no kurubuga-ruremereye.

Markup

Kuzuza ibikubiyemo muri divubu buryo:

<div class = "intwari-ubumwe" > 
  <h1> Umutwe </h1>
  <p> Tagine </p>
  <p>
    <a class = "btn btn- primaire btn-large"> 
      Wige byinshi
    </a>
  </p>
</div>

Igikonoshwa cyoroheje h1kugirango kibe umwanya ukwiye hamwe nigice cyibigize kurupapuro. Irashobora gukoresha h1'Mburabuzi small, Ikintu Nka Ibindi Byinshi (hamwe nuburyo bwinyongera).

<div class = "page-umutwe" > 
  <h1> Urugero rwumutwe wurupapuro </h1>
</div>

Mburabuzi

Mburabuzi, Bootstrap's thumbnail yagenewe kwerekana amashusho ahujwe nibimenyetso bike bisabwa.

Birashoboka cyane

Hamwe na bike byongeweho, birashoboka kongeramo ubwoko ubwo aribwo bwose bwa HTML nkimitwe, paragarafu, cyangwa buto muri thumbnail.

• 

  Ikimenyetso cya Thumbnail

  Cras justo odio, dapibus ac facilisis muri, egestas eget quam. Donec id elit non mi porta gravida kuri eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Igikorwa Igikorwa

• 

  Ikimenyetso cya Thumbnail

  Cras justo odio, dapibus ac facilisis muri, egestas eget quam. Donec id elit non mi porta gravida kuri eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Igikorwa Igikorwa

Kuki ukoresha igikumwe

Thumbnail (mbere .media-gridkugeza kuri v1.4) nibyiza kuri gride yamafoto cyangwa videwo, ibisubizo byo gushakisha amashusho, ibicuruzwa bicuruzwa, portfolios, nibindi byinshi. Birashobora kuba amahuza cyangwa ibirimo bihamye.

Ikimenyetso cyoroshye, cyoroshye

Thumbnail marup iroroshye - a ulhamwe numubare uwo ariwo wose liwibintu byose bisabwa. Nibindi byoroshye guhinduka, kwemerera ubwoko bwibirimo byose hamwe nibimenyetso byinshi byo gupfunyika ibikubiyemo.

Koresha grid inkingi ingano

Ubwanyuma, igikumwe gikoresha sisitemu ya gride ya sisitemu isanzwe-nka .span2cyangwa .span3-kugenzura ibipimo bya thumbnail.

Ikimenyetso

Nkuko byavuzwe mbere, ibimenyetso bisabwa kuri thumbnail biroroshye kandi byoroshye. Hano reba uburyo busanzwe bwo gushiraho amashusho :

<ul class = "igikumwe" > 
  <li urwego = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Kubisanzwe HTML yibirimo muri thumbnail, marike ihinduka gato. Kwemerera guhagarika urwego urwego aho ariho hose, twahinduye i <a>kubintu <div>nkibi:

<ul class = "igikumwe" > 
  <li urwego = "span3" > 
    <div class = "igikumwe" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Ikirango cya Thumbnail </h5>
      <p> Ibisobanuro bito hano hano ... </p>
    </div>
  </li>
  ...
</ul>

Ingero nyinshi

Shakisha amahitamo yawe yose hamwe nibyiciro bitandukanye bya gride ushobora kubona. Urashobora kandi kuvanga no guhuza ubunini butandukanye.

Icyiciro cyibanze

Hamwe na Bootstrap 2, tworoheje icyiciro shingiro: .alertaho .alert-message. Twagabanije kandi ibimenyetso byibuze bisabwa - oya <p>ntibisabwa byanze bikunze, hanze gusa <div>.

Ubutumwa bumwe bwo kumenyesha

Kubintu byinshi biramba hamwe na code nkeya, twakuyeho itandukaniro ryo kureba kubihagarika, ubutumwa buzana na padi nyinshi kandi mubisanzwe inyandiko nyinshi. Icyiciro nacyo cyahindutse kuri .alert-block.

Kugenda neza hamwe na javascript

Bootstrap izanye plugin nini ya jQuery ishyigikira ubutumwa bwitondewe, bigatuma kubirukana byihuse kandi byoroshye.

Shaka plugin »

Urugero

Kuzuza ubutumwa bwawe hamwe nigishushanyo cyo gufunga muri div hamwe nicyiciro cyoroshye.

<div class = "menyesha" > 
  <buto icyiciro = "gufunga" data-gusezerera = "kumenyesha" > × </button>  
  <strong> Iburira! </strong> Kugenzura neza yo wenyine, ntabwo ureba neza.
</div>

Umutwe! Ibikoresho bya iOS bisaba an href="#"kwirukana imenyesha. Wemeze kubishyiramo hamwe namakuru yimiterere ya ankeri ifunga amashusho. Ubundi, urashobora gukoresha ikintu <button>hamwe namakuru yikiranga, twahisemo gukora kubitabo byacu. Mugihe ukoresha <button>, ugomba gushiramo type="button"cyangwa impapuro zawe ntizishobora gutanga.

Byoroshe kwagura ubutumwa busanzwe bwo kumenyesha hamwe nibyiciro bibiri bidahitamo: .alert-blockkuri padi nyinshi hamwe ninyandiko igenzura hamwe no .alert-headingguhuza umutwe.

<div class = "kumenyesha integuza-guhagarika" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 urwego = " kumenyesha-umutwe" > Kuburira! </h4> 
  Byiza kugenzura yo wenyine, ntabwo uri ...
</div>

Ikosa cyangwa akaga

<div class = "kumenyesha-kwibeshya" > 
  ...
</div>

Intsinzi

<div class = "kumenyesha-gutsinda" > 
  ...
</div>

Amakuru

<div class = "kumenyesha amakuru-amakuru" > 
  ...
</div>

Shingiro

Mburabuzi Iterambere umurongo hamwe na vertical gradient.

<div class = "iterambere" > 
  <div class = "akabari" 
       style = " ubugari : 60 %; " > </div> 
</div>

Yanditse

Koresha icyiciro kugirango ukore ingaruka (nta IE).

<div class = "amajyambere atera imbere" > 
  <div class = "akabari" 
       style = " ubugari : 20 %; " > </div> 
</div>

Animated

Fata urugero rwakuweho hanyuma ukarushushanya (nta IE).

<div class = "amajyambere atera imbere 
     ikora " >
  <div class = "akabari" 
       style = " ubugari : 40 %; " > </div> 
</div>

Amabara yinyongera

Utubari twiterambere dukoresha bimwe mubuto bumwe no kumenyesha ibyiciro kuburyo buhoraho.

Utubari

Bisa namabara akomeye, twagiye dutandukanya imirongo yiterambere.

Imyitwarire

Utubari twiterambere dukoresha inzibacyuho ya CSS3, niba rero uhinduye muburyo bugari ukoresheje ubugari ukoresheje javascript, bizahinduka neza.

Niba ukoresheje .activeicyiciro, .progress-stripedutubari twawe twiterambere tuzahindura imirongo ibumoso iburyo.

Inkunga ya mushakisha

Utubari twiterambere dukoresha CSS3 gradients, inzibacyuho, na animasiyo kugirango ugere ku ngaruka zabo zose. Ibiranga ntabwo bishyigikiwe muri IE7-9 cyangwa verisiyo ishaje ya Firefox.

Opera na IE ntabwo bashyigikiye animasiyo muriki gihe.

Iriba

Koresha neza nkibintu byoroshye kubintu kugirango utange inset.

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

Funga agashusho

Koresha igishushanyo rusange cyo gufunga kugirango wirukane ibirimo nka moderi no kumenyesha.

×

<buto icyiciro = "gufunga" > & ibihe; </button> 

Ibikoresho bya iOS bisaba href = "#" kugirango ukande ibyabaye niba uhisemo gukoresha inanga.

<a class = "close" href = "#"> & ibihe; </a>