Apeere

Toggle, Akojọ ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ. Ṣe ibanisọrọ pẹlu ohun itanna JavaScript silẹ .

<ul class = "dropdown-menu" ipa = "akojọ-akojọ" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Igbese </a></li>  
  <li><a tabindex = "-1" href = "#" > Iṣẹ́ míràn </a></li>  
  <li><a tabindex = "-1" href = "#" > Nkankan miran nibi </a></li>  
  <li kilasi = "olupin" </li> 
  <li><a tabindex = "-1" href = "#" > Ọna asopọ ti o ya sọtọ </a></li>  
</ul>

Siṣamisi

Wiwo akojọ aṣayan silẹ nikan, eyi ni HTML ti a beere. O nilo lati fi ipari si okunfa dropdown ati akojọ aṣayan silẹ laarin .dropdown, tabi nkan miiran ti o sọ position: relative;. Lẹhinna ṣẹda akojọ aṣayan nikan.

<div kilasi = "silẹ silẹ" > 
  <!-- Ọna asopọ tabi bọtini lati yi lọ silẹ silẹ -->
  <ul class = "menu dropdown" ipa = "akojọ-akojọ" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Igbese </a></li>  
    <li><a tabindex = "-1" href = "#" > Iṣẹ́ míràn </a></li>  
    <li><a tabindex = "-1" href = "#" > Nkankan miran nibi </a></li>  
    <li kilasi = "olupin" </li> 
    <li><a tabindex = "-1" href = "#" > Ọna asopọ ti o ya sọtọ </a></li>  
  </ul>
</div>

Awọn aṣayan

So awọn akojọ aṣayan si ọtun ati fikun pẹlu awọn ipele afikun ti awọn silẹ.

aligning awọn akojọ aṣayan

Fikun -un .pull-rightsi .dropdown-menuapa ọtun mö akojọ aṣayan silẹ.

<ul class = " dropdown-menu pull-right" ipa = "àtòjọ" aria-labelledby = "dLabel" >   
  ...
</ul>

Awọn aṣayan akojọ aṣayan alaabo

Ṣafikun .disabled- un <li>sinu silẹ silẹ lati mu ọna asopọ ṣiṣẹ.

<ul class = "dropdown-menu" ipa = "akojọ-akojọ" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ọna asopọ deede </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Ọna asopọ alaabo </a></li>   
  <li><a tabindex = "-1" href = "#" > Ọna asopọ miiran </a></li>  
</ul>

Awọn akojọ aṣayan-isalẹ lori awọn silẹ

Ṣafikun ipele afikun ti awọn akojọ aṣayan silẹ, ti o han lori rababa bii ti OS X, pẹlu diẹ ninu awọn afikun isamisi ti o rọrun. Ṣafikun .dropdown-submenusi eyikeyi lininu akojọ aṣayan silẹ ti o wa tẹlẹ fun iselona adaṣe.

<ul class = "menu dropdown" ipa = "akojọ-akojọ" aria-labelledby = "dLabel" >   
  ...
  <li kilasi = "silẹ-akojọ-silẹ" > 
    <a tabindex = "-1" href = "#" > Awọn aṣayan diẹ sii </a>  
    <ul kilasi = "akojọ-silẹ silẹ" > 
      ...
    </ul>
  </li>
</ul>

Awọn apẹẹrẹ

Awọn aṣayan ipilẹ meji, pẹlu awọn iyatọ pato meji diẹ sii.

Ẹgbẹ bọtini ẹyọkan

Pa awọn bọtini kan lẹsẹsẹ pẹlu .btnsinu .btn-group.

<div class = "btn-ẹgbẹ" > 
  <bọtini kilasi = "btn" > Osi </bọtini> 
  <bọtini kilasi = "btn" > Aarin </bọtini> 
  <bọtini kilasi = "btn" > Ọtun </bọtini> 
</div>

Awọn ẹgbẹ bọtini pupọ

Darapọ tosaaju ti <div class="btn-group">sinu kan <div class="btn-toolbar">fun eka sii irinše.

<div class = "btn-toolbar" > 
  <div class = "btn-ẹgbẹ" > 
    ...
  </div>
</div>

Awọn ẹgbẹ bọtini inaro

Ṣe eto awọn bọtini han ni inaro tolera kuku ju petele.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Apoti ati awọn adun redio

Awọn ẹgbẹ bọtini tun le ṣiṣẹ bi awọn redio, nibiti bọtini kan le ti ṣiṣẹ, tabi awọn apoti ayẹwo, nibiti nọmba eyikeyi ti awọn bọtini le ṣiṣẹ. Wo awọn iwe aṣẹ JavaScript fun iyẹn.

Sisọ silẹ ni awọn ẹgbẹ bọtini

Efeti sile!Awọn bọtini pẹlu awọn isọ silẹ gbọdọ wa ni ọkọọkan ti a we sinu tiwọn .btn-grouplaarin kan .btn-toolbarfun ṣiṣe to dara.

Akopọ ati awọn apẹẹrẹ

Lo eyikeyi bọtini lati ma nfa akojọ aṣayan silẹ nipa gbigbe si laarin kan .btn-groupati pese isamisi akojọ aṣayan to dara.

<div class = "btn-ẹgbẹ" > 
  <a class = "btn dropdown-toggle" data-toggle = " dropdown" href = "#" >   
    Iṣe
    <span class = "abojuto" </span> 
  </a>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Ṣiṣẹ pẹlu gbogbo awọn iwọn bọtini

Bọtini ju silẹ ṣiṣẹ ni iwọn eyikeyi: .btn-large, .btn-small, tabi .btn-mini.

Nilo JavaScript

Awọn ifilọlẹ bọtini nilo ohun itanna silẹ Bootstrap lati ṣiṣẹ.

Ni awọn igba miiran — bii alagbeka — awọn akojọ aṣayan silẹ yoo fa si ita wiwo wiwo. O nilo lati yanju titete pẹlu ọwọ tabi pẹlu JavaScript aṣa.

Pipin bọtini dropdowns

Ilé lori awọn aza ẹgbẹ bọtini ati isamisi, a le ni rọọrun ṣẹda kan pipin bọtini. Awọn bọtini pipin ṣe ẹya iṣe boṣewa ni apa osi ati yiyi silẹ silẹ ni apa ọtun pẹlu awọn ọna asopọ ọrọ-ọrọ.

<div class = "btn-ẹgbẹ" > 
  <bọtini kilasi = "btn" > Iṣe </bọtini> 
  <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
    <span class = "abojuto" </span> 
  </bọtini>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Awọn iwọn

Lo awọn kilasi bọtini afikun .btn-mini, .btn-small, tabi .btn-largefun titobi.

<div class = "btn-ẹgbẹ" > 
  <bọtini kilasi = "btn btn-mini" > Iṣẹ </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "ju silẹ" >  
    <span class = "abojuto" </span> 
  </bọtini>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Awọn akojọ aṣayan silẹ

Awọn akojọ a��ayan silẹ tun le yipada lati isalẹ soke nipa fifi kilasi kan kun si obi lẹsẹkẹsẹ ti .dropdown-menu. Yoo yipada itọsọna ti .caretati tunpo akojọ aṣayan funrararẹ lati gbe lati isalẹ soke dipo oke si isalẹ.

<div class = "btn-group dropup" > 
  < kilaasi bọtini = "btn" > Ifasilẹ </bọtini> 
  <bọtini kilasi = "btn dropdown-toggle" data-toggle = "silẹ silẹ" >  
    <span class = "abojuto" </span> 
  </bọtini>
  <ul kilasi = "akojọ-silẹ silẹ" > 
    <!-- awọn ọna asopọ akojọ aṣayan silẹ -->
  </ul>
</div>

Awọn aseku iwuwo fẹẹrẹ kanna, awọn kilasi oriṣiriṣi

Gbogbo awọn paati nav nibi — awọn taabu, awọn oogun, ati awọn atokọ — pin isamisi ipilẹ kanna ati awọn aza nipasẹ .navkilasi naa.

Awọn taabu ipilẹ

Mu awọn <ul>ọna asopọ deede ati ṣafikun .nav-tabs:

<ul kilasi = "nav nav-tabs" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Awọn oogun ipilẹ

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

<ul kilasi = "nav nav-pills" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Ipo alaabo

Fun eyikeyi paati nav (awọn taabu, awọn oogun, tabi atokọ), ṣafikun .disabledfun awọn ọna asopọ grẹy ko si si awọn ipa agbeka . Awọn ọna asopọ yoo wa ni titẹ, sibẹsibẹ, ayafi ti o ba yọ abuda naa kuro href. Ni omiiran, o le ṣe JavaScript aṣa lati ṣe idiwọ awọn jinna wọnyẹn.

<ul kilasi = "nav nav-pills" > 
  ...
  <li class = "alaabo" ><a href = "#" > Ile </a></li>  
  ...
</ul>

Titete paati

Lati mö awọn ọna asopọ nav, lo .pull-lefttabi .pull-rightIwUlO kilasi. Awọn kilasi mejeeji yoo ṣafikun omi leefofo CSS kan ni itọsọna pàtó kan.

Stackable

Bi awọn taabu ati awọn oogun jẹ petele nipasẹ aiyipada, kan ṣafikun kilasi keji, .nav-stacked, Lati jẹ ki wọn han ni inaro tolera.

Awọn taabu tolera

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

Awọn oogun tolera

<ul kilasi = "nav nav-pills nav-stacked" > 
  ...
</ul>

Awọn idasile

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript awọn silẹ .

Awọn taabu pẹlu dropdowns

<ul kilasi = "nav nav-tabs" > 
  <li kilasi = "silẹ silẹ" > 
    <a kilasi = "julọ silẹ-toggle" 
       data-toggle = "silẹ silẹ"
       href = "#" >
        Faa silẹ
        <b kilasi = "abojuto" </b> 
      </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <!-- awọn ọna asopọ -->
    </ul>
  </li>
</ul>

Ìşọmọbí pẹlu dropdowns

<ul kilasi = "nav nav-pills" > 
  <li kilasi = "silẹ silẹ" > 
    <a kilasi = "julọ silẹ-toggle" 
       data-toggle = "silẹ silẹ"
       href = "#" >
        Faa silẹ
        <b kilasi = "abojuto" </b> 
      </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <!-- awọn ọna asopọ -->
    </ul>
  </li>
</ul>

Nav awọn akojọ

Ọna ti o rọrun ati irọrun lati kọ awọn ẹgbẹ ti awọn ọna asopọ nav pẹlu awọn akọle iyan. Wọn dara julọ ni lilo awọn ẹgbẹ ẹgbẹ bi Oluwari ni OS X.

Apeere nav akojọ

Mu atokọ ti awọn ọna asopọ ki o ṣafikun class="nav nav-list":

<ul kilasi = "nav nav-akojọ" > 
  <li class = "nav-header" > Akọsori atokọ </li> 
  <li class = "lọwọ" ><a href = "#" > Ile </a></li>  
  <li><a href = "#" > Ile-ikawe </a></li> 
  ...
</ul>

AkiyesiFun itẹ-ẹiyẹ laarin atokọ nav kan, pẹlu class="nav nav-list"lori eyikeyi itẹ-ẹiyẹ <ul>.

Petele pin

Ṣafikun ipin petele kan nipa ṣiṣẹda nkan atokọ ṣofo pẹlu kilasi .divider, bii bẹ:

<ul kilasi = "nav nav-akojọ" > 
  ...
  <li kilasi = "olupin" </li> 
  ...
</ul>

Nav Tabbable

Mu awọn taabu rẹ wa si igbesi aye pẹlu ohun itanna kan lati yi laarin akoonu nipasẹ awọn taabu. Bootstrap ṣepọ awọn taabu taabu ni awọn aza mẹrin: oke (aiyipada), sọtun, isalẹ, ati osi.

Apeere Tabbable

Lati ṣe awọn taabu taabu, ṣẹda .tab-paneID alailẹgbẹ fun gbogbo taabu ki o fi ipari si wọn sinu .tab-content.

<div class = "tabbable" > <!-- Nikan beere fun awọn taabu osi/ọtun -->  
  <ul kilasi = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "taabu" > Abala 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "taabu" > Abala 2 </a></li>  
  </ul>
  <div class = "akoonu-taabu" > 
    <div class = "tab-pane ti nṣiṣe lọwọ" id = "tab1" >  
      <p> Mo wa ni Abala 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, Mo wa ni Abala 2. </p>
    </div>
  </div>
</div>

Pare ninu awọn taabu

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane.

Nilo itanna jQuery

Gbogbo awọn taabu tabbable ni agbara nipasẹ ohun itanna jQuery iwuwo fẹẹrẹ wa. Ka diẹ sii nipa bi o ṣe le mu awọn taabu taabu wa si igbesi aye lori oju-iwe awọn iwe aṣẹ JavaScript .

Tabbable ni eyikeyi itọsọna

Awọn taabu lori isalẹ

Yi aṣẹ HTML pada ki o ṣafikun kilasi lati fi awọn taabu si isalẹ.

<div class = "tabbable tabs-labẹlẹ" > 
  <div class = "akoonu-taabu" > 
    ...
  </div>
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
</div>

Awọn taabu lori osi

Yi kilasi pada lati fi awọn taabu si apa osi.

<div class = "tabbable tabs-osi" > 
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "akoonu-taabu" > 
    ...
  </div>
</div>

Awọn taabu lori ọtun

Yi kilasi pada lati fi awọn taabu si apa ọtun.

<div class = "tabbable tabs-right" > 
  <ul kilasi = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "akoonu-taabu" > 
    ...
  </div>
</div>

Navbar ipilẹ

Lati bẹrẹ, awọn navbars wa ni aimi (ko wa titi si oke) ati pẹlu atilẹyin fun orukọ iṣẹ akanṣe ati lilọ kiri ipilẹ. Gbe ọkan nibikibi laarin a .container, eyi ti o ṣeto awọn iwọn ti aaye rẹ ati akoonu.

<div kilasi = "navbar" > 
  <div kilasi = "navbar-inner" > 
    <a class = "brand" href = "#" > Akọle </a>  
    <ul kilasi = "nav" > 
      <li class = "lọwọ" ><a href = "#" > Ile </a></li>  
      <li><a href = "#" > Ọna asopọ </a></li> 
      <li><a href = "#" > Ọna asopọ </a></li> 
    </ul>
  </div>
</div>

Navbar irinše

Brand

Ọna asopọ ti o rọrun lati ṣafihan ami iyasọtọ rẹ tabi orukọ iṣẹ akanṣe nilo tag oran kan.

<a class = "brand" href = "#" > Orukọ ise agbese </a>  

Nav ìjápọ

Awọn ohun Nav rọrun lati ṣafikun nipasẹ awọn atokọ ti a ko paṣẹ.

<ul kilasi = "nav" > 
  <li kilasi = "lọwọ" > 
    <a href = "#" > Ile </a> 
  </li>
  <li><a href = "#" > Ọna asopọ </a></li> 
  <li><a href = "#" > Ọna asopọ </a></li> 
</ul>

O le ni rọọrun ṣafikun awọn ipin si awọn ọna asopọ nav rẹ pẹlu ohun atokọ ti o ṣofo ati kilasi ti o rọrun. Kan fi eyi kun laarin awọn ọna asopọ:

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

Awọn fọọmu

Lati ṣe ara daradara ati ipo fọọmu kan laarin navbar, ṣafikun awọn kilasi ti o yẹ bi a ṣe han ni isalẹ. Fun fọọmu aiyipada, pẹlu .navbar-formati boya .pull-lefttabi .pull-rightlati ṣe deedee rẹ daradara.

< kilaasi fọọmu = "navbar-form pull-osi" > 
  < iru titẹ sii = "ọrọ" kilasi = "span2" >  
  <bọtini iru = "fi silẹ" kilasi = "btn" > Fi </button> silẹ  
</fọọmu>

Fọọmu wa

Fun fọọmu wiwa ti a ṣe adani diẹ sii, ṣafikun .navbar-searchsi formati .search-querysi igbewọle fun awọn aza amọja ni navbar.

< kilaasi fọọmu = "navbar-search pull-osi" > 
  <input type = "text" class = "search-query" ibi ipamọ = "Ṣawari" >   
</fọọmu>

Titete paati

Sopọ awọn ọna asopọ nav, fọọmu wiwa, tabi ọrọ, lo .pull-lefttabi .pull-rightawọn kilasi ohun elo. Awọn kilasi mejeeji yoo ṣafikun omi leefofo CSS kan ni itọsọna pàtó kan.

Lilo awọn dropdowns

Fi dropdowns ati dropups si nav pẹlu kan bit ti siṣamisi ati awọn ohun itanna JavaScript silẹ .

<ul kilasi = "nav" >
  <li kilasi = "silẹ silẹ" >
    <a href = "#" kilasi = "dropdown-toggle" data-toggle =    "ju silẹ" >
      Iroyin
      <b kilasi = "abojuto" </b>
    </a>
    <ul kilasi = "akojọ-silẹ silẹ" >
      ...
    </ul>
  </li>
</ul>

Ṣabẹwo awọn iwe silẹ silẹ JavaScript fun isamisi diẹ sii ati alaye lori pipe awọn silẹ silẹ.

Ọrọ

Pa awọn gbolohun ọrọ sinu nkan kan pẹlu .navbar-text, nigbagbogbo lori <p>tag fun itọsọna to dara ati awọ.

Iyan àpapọ iyatọ

Fix navbar si oke tabi isalẹ ti awọn viewport pẹlu afikun kilasi lori awọn outermost div .navbar,.

Ti o wa titi si oke

Ṣafikun .navbar-fixed-topati ranti lati ṣe akọọlẹ fun agbegbe ti o farapamọ labẹ rẹ nipa fifi kun o kere ju 40px paddingsi faili <body>. Rii daju lati ṣafikun eyi lẹhin Bootstrap CSS mojuto ati ṣaaju CSS idahun iyan.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Ti o wa titi si isalẹ

Fi kun .navbar-fixed-bottomdipo.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Aimi oke navbar

Ṣẹda ọpa lilọ kiri ni kikun ti o yi lọ kuro pẹlu oju-iwe naa nipa fifi kun .navbar-static-top. Ko dabi .navbar-fixed-topkilasi naa, iwọ ko nilo lati yi padding eyikeyi pada lori body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Navbar idahun

Lati ṣe imuse navbar idahun ti n ṣubu, fi ipari si akoonu navbar rẹ sinu div ti o ni, .nav-collapse.collapse, ki o ṣafikun bọtini lilọ kiri navbar, .btn-navbar.

<div kilasi = "navbar" > 
  <div kilasi = "navbar-inner" > 
    <div kilasi = "apoti" > 
 
      <!-- .btn-navbar ni a lo bi iyipada fun akoonu navbar ti o ṣubu -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <!-- Rii daju lati lọ kuro ni ami iyasọtọ naa ti o ba fẹ ki o han -->
      <a class = "brand" href = "#" > Orukọ ise agbese </a>  
 
      <!-- Ohun gbogbo ti o fẹ farapamọ ni 940px tabi kere si, gbe laarin ibi -->
      <div class = "nav-collapse Collapse" > 
        <!-- .nav, .navbar-search, .navbar-fọọmu, ati bẹbẹ lọ -->
      </div>
 
    </div>
  </div>
</div>

Iyatọ ti o yipada

Ṣe atunṣe iwo navbar nipa fifi kun .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Awọn apẹẹrẹ

Apeere kan ti o han bi o ṣe le ṣe afihan kọja awọn oju-iwe pupọ.

<ul kilasi = "akara akara" > 
  <li><a href = "#" > Ile </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ile-ikawe </a> <span class = "divider" > / </span></li>   
  <li kilasi = "lọwọ" > Data </li> 
</ul>

Standard pagination

Pagination ti o rọrun ni atilẹyin nipasẹ Rdio, nla fun awọn lw ati awọn abajade wiwa. Bulọọki nla naa nira lati padanu, ni irọrun iwọn, ati pese awọn agbegbe tẹ nla.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Iṣaaju </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Itele </a></li> 
  </ul>
</div>

Awọn aṣayan

Alaabo ati lọwọ ipinle

Awọn ọna asopọ jẹ asefara fun awọn ipo oriṣiriṣi. Lo .disabledfun awọn ọna asopọ ti ko le tẹ ati .activelati tọka oju-iwe lọwọlọwọ.

<div class = "pagination" > 
  <ul>
    <li class = "alaabo" ><a href = "#" > & laquo; </a></li>  
    <li class = "lọwọ" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

O le ni yiyan paarọ awọn ìdákọró ti nṣiṣe lọwọ tabi alaabo fun awọn akoko lati yọ iṣẹ-ṣiṣe tẹ kuro lakoko idaduro awọn aṣa ti a pinnu.

<div class = "pagination" > 
  <ul>
    <li kilasi = "alaabo" ><span> & laquo; </span></li> 
    <li class = "lọwọ" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Awọn iwọn

Fancy tobi tabi kere pagination? Ṣafikun .pagination-large, .pagination-small, tabi .pagination-minifun awọn iwọn afikun.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Titete

Ṣafikun ọkan ninu awọn kilasi iyan meji lati yi titete awọn ọna asopọ pagination pada: .pagination-centeredati .pagination-right.

<div class = "pagination-centered pagination" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Awọn ọna iyara iṣaaju ati awọn ọna asopọ atẹle fun awọn imuse pagination ti o rọrun pẹlu isamisi ina ati awọn aza. O jẹ nla fun awọn aaye ti o rọrun bi awọn bulọọgi tabi awọn akọọlẹ.

Apeere aiyipada

Nipa aiyipada, awọn ọna asopọ awọn ile-iṣẹ pager.

<ul kilasi = "pager" > 
  <li><a href = "#" > Ti tẹlẹ </a></li> 
  <li><a href = "#" > Itele </a></li> 
</ul>

Awọn ọna asopọ deede

Ni omiiran, o le ṣe ọna asopọ kọọkan si awọn ẹgbẹ:

<ul kilasi = "pager" > 
  <li kilasi = "tẹlẹ" > 
    <a href = "#" > ← Agbalagba </a> 
  </li>
  <li kilasi = "tókàn" > 
    <a href = "#" > Opo & rarr; </a> 
  </li>
</ul>

Iyan alaabo ipinle

Awọn ọna asopọ Pager tun lo .disabledkilasi IwUlO gbogbogbo lati pagination.

<ul kilasi = "pager" > 
  <li kilasi = "alaabo iṣaaju" > 
    <a href = "#" > ← Agbalagba </a> 
  </li>
  ...
</ul>

Awọn akole

Baajii

Ni irọrun kolugba

Fun imuse irọrun, awọn aami ati awọn baaji yoo rọ lulẹ (nipasẹ :emptyoluyan CSS) nigbati ko si akoonu laarin.

Akọni kuro

Iwọn iwuwo fẹẹrẹ, paati rọ lati ṣe afihan akoonu bọtini lori aaye rẹ. O ṣiṣẹ daradara lori titaja ati awọn aaye ti o wuwo akoonu.

<div kilasi = "akọni-kuro" > 
  <h1> Akọle </h1>
  <p> Tagline </p>
  <p>
    <a kilasi = "btn btn-primary btn-large" > 
      Kọ ẹkọ diẹ si
    </a>
  </p>
</div>

Akọsori oju-iwe

Ikarahun ti o rọrun fun aye ni h1deede ati awọn apakan apakan ti akoonu lori oju-iwe kan. O le lo h1aiyipada 's small, ano bi daradara julọ awọn paati miiran (pẹlu awọn aza afikun).

<div class = "akọsori oju-iwe" > 
  <h1> Akọsori oju-iwe apẹẹrẹ <kekere> Akọsori fun akọsori </small></h1>
</div>

Awọn eekanna atanpako aiyipada

Nipa aiyipada, awọn eekanna atanpako Bootstrap jẹ apẹrẹ lati ṣe afihan awọn aworan ti o sopọ pẹlu isamisi ti o nilo diẹ.

Gíga asefara

Pẹlu ifamisi afikun diẹ, o ṣee ṣe lati ṣafikun eyikeyi iru akoonu HTML bii awọn akọle, awọn ìpínrọ, tabi awọn bọtini sinu eekanna atanpako.

Kini idi ti o lo awọn eekanna atanpako

Awọn eekanna atanpako (tẹlẹ .media-gridtiti di v1.4) jẹ nla fun awọn akoj ti awọn fọto tabi awọn fidio, awọn abajade wiwa aworan, awọn ọja soobu, awọn portfolios, ati pupọ diẹ sii. Wọn le jẹ awọn ọna asopọ tabi akoonu aimi.

Rọrun, isamisi rọ

Siṣamisi eekanna atanpako rọrun-kan ulpẹlu nọmba awọn lieroja ni gbogbo ohun ti o nilo. O tun ni irọrun pupọ, gbigba fun eyikeyi iru akoonu pẹlu isamisi diẹ diẹ sii lati fi ipari si awọn akoonu rẹ.

Nlo awọn iwọn ọwọn akoj

Nikẹhin, paati eekanna atanpako nlo awọn kilasi eto akoj ti o wa tẹlẹ-bii .span2tabi.span3 —fun iṣakoso awọn iwọn eekanna atanpako.

Siṣamisi

Gẹgẹbi a ti sọ tẹlẹ, isamisi ti a beere fun awọn eekanna atanpako jẹ ina ati taara. Eyi ni wiwo iṣeto aiyipada fun awọn aworan ti o sopọ :

<ul kilasi = "awọn eekanna atanpako" > 
  <li kilasi = "span4" > 
    <a href = "#" kilasi = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = " >  
    </a>
  </li>
  ...
</ul>

Fun akoonu HTML aṣa ni awọn eekanna atanpako, isamisi naa yipada diẹ. Lati gba akoonu ipele dina nibikibi, a paarọ rẹ <a>fun <div>iru bẹ:

<ul kilasi = "awọn eekanna atanpako" > 
  <li kilasi = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = " >  
      <h3> Aami eekanna atanpako </h3>
      <p> Akọle eekanna atanpako... </p>
    </div>
  </li>
  ...
</ul>

Awọn apẹẹrẹ diẹ sii

Ṣawari gbogbo awọn aṣayan rẹ pẹlu ọpọlọpọ awọn kilasi akoj ti o wa si ọ. O tun le dapọ ati baramu awọn titobi oriṣiriṣi.

Itaniji aiyipada

Pari ọrọ eyikeyi ati bọtini ifasilẹ iyan sinu .alertfun ifiranṣẹ itaniji ikilọ ipilẹ kan.

<div class = "titaniji" > 
  <bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "titaniji" > × </bọtini>   
  <strong> Ikilọ! </strong> Ṣayẹwo ti o dara julọ fun ararẹ, iwọ ko dara ju.
</div>

Yọ awọn bọtini kuro

Alagbeka Safari ati awọn aṣawakiri Opera Alagbeka, ni afikun si abuda naa data-dismiss="alert", nilo ohun kan href="#"fun ifasilẹ awọn titaniji nigba lilo <a>tag kan.

<a href = "#" kilasi = "sunmọ" data-dismiss = "titaniji" > & igba; </a>   

Ni omiiran, o le lo ipin <button>kan pẹlu abuda data, eyiti a ti yọ kuro lati ṣe fun awọn iwe aṣẹ wa. Nigbati o ba nlo <button>, o gbọdọ pẹlu type="button"tabi awọn fọọmu rẹ le ma fi silẹ.

<bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "titaniji" > × </bọtini>   

Pa awọn titaniji kuro nipasẹ JavaScript

Lo ohun itanna jQuery titaniji fun iyara ati irọrun yiyọ awọn titaniji.

Awọn aṣayan

Fun awọn ifiranšẹ to gun, mu fifẹ pọ si oke ati isalẹ ti ipari gbigbọn nipa fifi kun .alert-block.

<div class = "Titaniji-block" > 
  <bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "titaniji" > × </bọtini>   
  <h4> Ikilọ! </h4>
  Ṣayẹwo ararẹ ti o dara julọ, iwọ kii ṣe ...
</div>

Itumọ awọn yiyan

Ṣafikun awọn kilasi iyan lati yi itumọ titaniji pada.

Aṣiṣe tabi ewu

<div class = "aṣiṣe titaniji-aṣiṣe" > 
  ...
</div>

Aseyori

<div class = "aṣeyọri itaniji itaniji" > 
  ...
</div>

Alaye

<div class = "alaye titaniji" > 
  ...
</div>

Awọn apẹẹrẹ ati isamisi

Ipilẹṣẹ

Pẹpẹ ilọsiwaju aiyipada pẹlu isọdi inaro.

<div kilasi = "ilọsiwaju" > 
  <div class = "ọgọ" ara = " fifẹ : 60 %; " ></ div>   
</div>

Ṣiṣiri

Nlo gradient lati ṣẹda ipa didan kan. Ko si ni IE7-8.

<div class = "ilọsiwaju-ṣipopada ilosiwaju" > 
  <div class = "ọgọ" ara = " fifẹ : 20 %; " ></ div>   
</div>

Ti ere idaraya

Fikun -un .activelati .progress-stripedgbe awọn ila si ọtun si apa osi. Ko si ni gbogbo awọn ẹya ti IE.

<div class = "ilọsiwaju-ilọsiwaju ti nṣiṣe lọwọ" > 
  <div class = "ọgọ" ara = " fifẹ : 40 %; " ></ div>   
</div>

Tolera

Gbe ọpọ ifi sinu kanna .progresslati tolera wọn.

<div kilasi = "ilọsiwaju" > 
  <div class = "bar bar-success" ara = " fifẹ : 35 %; " ></div>   
  <div class = "bar bar-ikilo" ara = " fifẹ : 20 %; " ></div>   
  <div class = "bar bar-danger" ara = " fifẹ : 10 %; " ></div>   
</div>

Awọn aṣayan

Awọn awọ afikun

Awọn ifi ilọsiwaju lo diẹ ninu bọtini kanna ati awọn kilasi itaniji fun awọn aza ti o ni ibamu.

<div class = "ilọsiwaju-info" > 
  <div class = "ọgọ" ara = " fifẹ : 20 % " ></ div>   
</div>
<div class = "ilọsiwaju ilọsiwaju-aṣeyọri" > 
  <div class = "ọgọ" ara = " fifẹ : 40 % " ></ div>   
</div>
<div class = "Ikilọ ilọsiwaju ilọsiwaju" > 
  <div class = "ọgọ" ara = " fifẹ : 60 % " ></ div>   
</div>
<div class = "ilọsiwaju-ewu ilọsiwaju" > 
  <div class = "ọgọ" ara = " fifẹ : 80 % " ></ div>   
</div>

Ṣiṣiri ifi

Iru si awọn awọ ri to, a ni orisirisi ṣi kuro itesiwaju ifi.

<div class = "progress progress-info progress-striped" > 
  <div class = "ọgọ" ara = " fifẹ : 20 % " ></ div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "ọgọ" ara = " fifẹ : 40 % " ></ div>   
</div>
<div class = "ilọsiwaju-ilọsiwaju-ilọsiwaju-ilọsiwaju-ṣiṣipa" > 
  <div class = "ọgọ" ara = " fifẹ : 60 % " ></ div>   
</div>
<div class = "progress progress-lewu progress-striped" > 
  <div class = "ọgọ" ara = " fifẹ : 80 % " ></ div>   
</div>

Atilẹyin aṣawakiri

Awọn ifi ilọsiwaju lo awọn gradients CSS3, awọn iyipada, ati awọn ohun idanilaraya lati ṣaṣeyọri gbogbo awọn ipa wọn. Awọn ẹya wọnyi ko ni atilẹyin ni IE7-9 tabi awọn ẹya agbalagba ti Firefox.

Awọn ẹya ti tẹlẹ ju Internet Explorer 10 ati Opera 12 ko ṣe atilẹyin awọn ohun idanilaraya.

Awọn ara ohun ti o ni arosọ fun kikọ ọpọlọpọ awọn iru awọn paati (bii awọn asọye bulọọgi, Tweets, ati bẹbẹ lọ) ti o ṣe ẹya aworan apa osi tabi ti o ni ibamu si ọtun lẹgbẹẹ akoonu ọrọ.

Apeere aiyipada

Media aiyipada gba laaye lati leefofo nkan media (awọn aworan, fidio, ohun) si apa osi tabi ọtun ti idina akoonu.

Media akori

Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.

Media akori

Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.

Media akori

Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.

<div kilasi = "media" > 
  <a kilasi = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 kilasi = "media-akọle" > Akọle media </h4> 
    ...
 
    <!-- Ohun media itẹle -->
    <div kilasi = "media" > 
      ...
    </div>
  </div>
</div>

Media akojọ

Pẹlu ifamisi afikun diẹ, o le lo media inu atokọ (wulo fun awọn ọrọ asọye tabi awọn atokọ nkan).

<ul kilasi = "akojọ-media" > 
  <li kilasi = "media" > 
    <a kilasi = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 kilasi = "media-akọle" > Akọle media </h4> 
      ...
 
      <!-- Ohun media itẹle -->
      <div kilasi = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Kanga

Lo daradara bi ipa ti o rọrun lori nkan kan lati fun ni ipa inset.

<div kilasi = "daradara" > 
  ...
</div>

Iyan kilasi

Fifẹ iṣakoso ati awọn igun yika pẹlu awọn kilasi modifier yiyan meji.

<div class = "daradara-tobi" > 
  ...
</div>

<div class = "daradara-kekere" > 
  ...
</div>

Pa aami

Lo aami isunmọ jeneriki fun yiyọ akoonu bi awọn awoṣe ati awọn titaniji.

< kilaasi bọtini = "sunmọ" > & igba; </bọtini> 

Awọn ẹrọ iOS nilo ohun href="#"fun awọn iṣẹlẹ tẹ ti o ba fẹ kuku lo oran kan.

<a kilasi = "sunmọ" href = "#" > & igba; </a>  

Awọn kilasi oluranlọwọ

Awọn kilasi ti o rọrun, idojukọ fun ifihan kekere tabi awọn tweaks ihuwasi.

.fa-osi

Leefofo ohun ano osi

kilasi = "fa-osi"

. fa - osi {
  leefofo : osi ;
}

.fa-ọtun

Leefofo ohun ano ọtun

kilasi = "fa-ọtun"

. fa - ọtun {
  leefofo : ọtun ;
}

.dakẹjẹẹ

Yi awọ eroja pada si#999

kilasi = "dakẹjẹẹ"

. dakẹ _
  awọ : # 999; 
}

.clearfix

Ko awọn floatlori eyikeyi eroja

kilasi = "clearfix"

. atunse {
  * sun : 1 ; 
  &: ṣaaju ,
  &: lehin {
    ifihan : tabili ;
    akoonu : "" ; 
  }
  &: lehin {
    kedere : mejeeji ;
  }
}