Nhwɛsoɔ

Toggleable, contextual menu a wɔde kyerɛ link ahorow a wɔahyehyɛ. Wɔde JavaScript plugin a ɛwɔ ase hɔ no yɛɛ nkitahodi .

<ul class = "menu a ɛba fam" dwuma = "menu" aria-labelledby = "Menu a ɛba fam" >   
  <li><a tabindex = "-1" href = "#" > Adeyɛ </a></li>  
  <li><a tabindex = "-1" href = "#" > Adeyɛ foforo </a></li>  
  <li><a tabindex = "-1" href = "#" > Biribi foforo wɔ ha </a></li>  
  <li adesuakuw = "nkyekyɛmu" ></li> 
  <li><a tabindex = "-1" href = "#" > Nkitahodi a wɔatew mu </a></li>  
</ul>

Markup a wɔde hyɛ agyirae

Sɛ wohwɛ dropdown menu no nkutoo a, HTML a wɔhwehwɛ no ni. Ɛsɛ sɛ wobɔ dropdown no trigger ne dropdown menu no mu .dropdown, anaa element foforo a ɛpae mu ka position: relative;. Afei yɛ menu no ara kwa.

<div class = "a ɛwɔ ase hɔ" > 
  <!-- Link anaa button a wode bɛdannan dropdown -->
  <ul class = "dropdown-menu" dwumadie = "menu" aria-a wɔde ahyɛnsodeɛ = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Adeyɛ </a></li>  
    <li><a tabindex = "-1" href = "#" > Adeyɛ foforo </a></li>  
    <li><a tabindex = "-1" href = "#" > Biribi foforo wɔ ha </a></li>  
    <li adesuakuw = "nkyekyɛmu" ></li> 
    <li><a tabindex = "-1" href = "#" > Nkitahodi a wɔatew mu </a></li>  
  </ul>
</div> no

Nneɛma a wubetumi apaw

Hyehyɛ menu ahorow no wɔ nifa so na fa ka ho ka levels afoforo a ɛwɔ dropdowns ho.

Menu ahorow no a wɔbɛhyehyɛ no pɛpɛɛpɛ

Fa ka .pull-righta ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu.

<ul adesuakuw = "dropdown-menu twe-nifa" dwuma = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Menu ahorow a wɔpaw no ayɛ adwuma

Fa ka .disableda ho <li>wɔ dropdown no mu na ama link no ayɛ adwuma.

<ul class = "menu a ɛba fam" dwuma = "menu" aria-labelledby = "Menu a ɛba fam" >   
  <li><a tabindex = "-1" href = "#" > Nkitahodi a ɛkɔ so daa </a></li>  
  <li class = "wɔayɛ adwuma" ><a tabindex = "-1" href = "#" > Wɔagyae link </a></li>   
  <li><a tabindex = "-1" href = "#" > Nkitahodi foforo </a></li>  
</ul>

Sub menus a ɛwɔ dropdowns so

Fa dropdown menus a ɛwɔ soro no ka ho, a ɛbɛda adi wɔ hover so te sɛ OS X de no, a markup a ɛnyɛ den bi ka ho. Fa ka .dropdown-submenubiara liho wɔ dropdown menu a ɛwɔ hɔ dedaw mu ma automatic styling.

<ul class = "dropdown-menu" dwumadie = "menu" aria-a wɔde ahyɛnsodeɛ = "dLabel" >   
  ...
  <li class = "menu a ɛwɔ ase hɔ" > 
    <a tabindex = "-1" href = "#" > Nneɛma pii a wobɛpaw </a>  
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </li>
</ul>

Nhwɛso ahorow

Nneɛma atitiriw abien a wubetumi apaw, ne nsakrae pɔtee abien foforo.

Button biako kuw

Fa mu kyekyere bɔtn ahorow a ɛtoatoa so no .btnho .btn-group.

<div adesuakuw = "btn-kuw" > 
  <button class = "btn" > Benkum so </bɔtn> 
  <button class = "btn" > Mfinimfini </button> 
  <button class = "btn" > Nifa so </bɔtn> 
</div> no

Button akuw ahorow pii

Ka sets of <div class="btn-group">into a <div class="btn-toolbar">ma nneɛma a ɛyɛ den kɛse.

<div adesuakuw = "btn-adwinnade" > 
  <div adesuakuw = "btn-kuw" > 
    ...
  </div> no
</div> no

Akuw a ɛwɔ bɔtn a ɛda hɔ gyina hɔ

Ma bɔton ahorow bi nyɛ te sɛ nea wɔaboaboa ano tẽẽ sen sɛ ɛbɛda adi sɛ ɛbɛkɔ soro.

<div class = "btn-kuw btn-kuw-gyina hɔ" > 
  ...
</div> no

Checkbox ne radio so nneɛma a ɛyɛ dɛ

Button akuw nso betumi ayɛ adwuma sɛ radio, baabi a button biako pɛ na ebetumi ayɛ adwuma, anaasɛ checkboxes, baabi a button dodow biara betumi ayɛ adwuma. Hwɛ JavaScript docs no ma ɛno.

Dropdowns wɔ button akuw ahorow mu

Ti a ɛwɔ soro!Ɛsɛ sɛ wɔkyekyere bɔton a ɛwɔ dropdowns no mmiako mmiako wɔ wɔn ankasa .btn-groupmu wɔ a mu na .btn-toolbarama wɔatumi akyerɛ ase yiye.

Nsɛm a wɔaka abom ne nhwɛso ahorow

Fa bɔtn biara di dwuma fa hyɛ menu a ɛwɔ ase no ase denam de a wode bɛto a mu .btn-groupna wode menu agyiraehyɛde a ɛfata ama no so.

<div adesuakuw = "btn-kuw" > 
  <a class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" href = "#" >   
    Anamɔntuo
    <span adesuakuw = "caret" ></span> 
  </a>
  <ul class = "nsɛm a ɛwɔ ase hɔ" > 
    <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  </ul>
</div> no

Ɛyɛ adwuma wɔ button akɛse nyinaa ho

Button dropdowns yɛ adwuma wɔ kɛse biara mu: .btn-large, .btn-small, anaa .btn-mini.

Ɛhwehwɛ sɛ wɔde JavaScript di dwuma

Button dropdowns hwehwɛ sɛ Bootstrap dropdown plugin no atumi ayɛ adwuma.

Wɔ tebea horow bi mu—te sɛ mobile—dropdown menu ahorow no bɛtrɛw akɔ viewport no akyi. Ɛsɛ sɛ wode nsa anaasɛ wode JavaScript a wɔahyɛ da ayɛ no siesie alignment no.

Split button a ɛwɔ ase no

Sɛ yɛde button group styles ne markup no to hɔ a, ɛnyɛ den sɛ yebetumi ayɛ split button. Split buttons no kyerɛ adeyɛ a ɛyɛ gyinapɛn wɔ benkum so ne dropdown toggle wɔ nifa so a ɛwɔ contextual links.

<div adesuakuw = "btn-kuw" > 
  <button class = "btn" > Adeyɛ </button> 
  <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
    <span adesuakuw = "caret" ></span> 
  </button> no ho
  <ul class = "nsɛm a ɛwɔ ase hɔ" > 
    <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  </ul>
</div> no

Nneɛma akɛse

Fa button class ahorow a ɛka ho no di dwuma .btn-mini, .btn-small, anaasɛ .btn-largefa sizing.

<div adesuakuw = "btn-kuw" > 
  <bɔtn adesuakuw = "btn btn-mini" > Adeyɛ </button> 
  <button class = "btn btn-mini a ɛtwetwe-toggle" data-toggle = "a ɛba fam" >  
    <span adesuakuw = "caret" ></span> 
  </button> no ho
  <ul class = "nsɛm a ɛwɔ ase hɔ" > 
    <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  </ul>
</div> no

Menu ahorow a wɔde gu fam

Wobetumi nso adan dropdown menu ahorow no afi ase akɔ soro denam adesuakuw biako a wode bɛka ɔwofo a ɔwɔ hɔ ntɛm ara no ho no so .dropdown-menu. Ɛbɛdannan akwankyerɛ a ɛwɔ no .caretna asan de menu no ankasa asi hɔ ma afi ase akɔ soro sen sɛ ɛbɛkɔ soro akɔ fam.

<div class = "btn-kuo a ɛtɔ gu fam" > 
  <button class = "btn" > Nsuo a ɛtɔ gu fam </button> 
  <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
    <span adesuakuw = "caret" ></span> 
  </button> no ho
  <ul class = "nsɛm a ɛwɔ ase hɔ" > 
    <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  </ul>
</div> no

Lightweight defaults Markup koro no ara, adesua ahorow ahorow

Nav afã horow a ɛwɔ ha nyinaa —tabs, pills, ne lists —kyɛ base markup ne styles koro no ara denam .navadesuakuw no so.

Tab atitiriw

Fa daa <ul>link ahorow na fa ka ho .nav-tabs:

<ul adesuakuw = "nav nav-tabs" > 
  <li adesuakuw = "adwumayɛ" > 
    <a href = "#" > Fie </a> na ɛwɔ hɔ 
  </li>
  < li><a href = "#" > ... Ɔde ne nsa kyerɛɛ ne so 
  < li><a href = "#" > ... Ɔde ne nsa kyerɛɛ ne so 
</ul>

Nnuru a wɔde di dwuma titiriw

Fa saa HTML koro no ara, nanso fa di dwuma .nav-pillsmmom:

<ul adesuakuw = "nav nav-pills" > 
  <li adesuakuw = "adwumayɛ" > 
    <a href = "#" > Fie </a> na ɛwɔ hɔ 
  </li>
  < li><a href = "#" > ... Ɔde ne nsa kyerɛɛ ne so 
  < li><a href = "#" > ... Ɔde ne nsa kyerɛɛ ne so 
</ul>

Tebea a wɔadi dɛm

Sɛ wopɛ nav component biara (tabs, pills, anaa list), fa ka ho .disabledma gray links na hover effects biara nni hɔ . Nanso, link ahorow no bɛkɔ so ayɛ nea wotumi klik so, gye sɛ wuyi hrefsu no fi hɔ. Sɛnea ɛbɛyɛ a wubetumi ayɛ saa no, wubetumi de JavaScript a wɔahyɛ da ayɛ no adi dwuma de asiw saa kliki ahorow no ano.

<ul adesuakuw = "nav nav-pills" > 
  ...
  <li adesuakuw = "wɔadi dɛm" ><a href = "#" > Fie </a></li>  
  ...
</ul>

Nneɛma a ɛwom no hyia

Sɛ wopɛ sɛ wo ne nav link ahorow no hyia a, fa .pull-leftanaa .pull-rightutility classes no di dwuma. Klas abien no nyinaa de CSS float bɛka ho wɔ ɔkwan a wɔakyerɛ no so.

Nneɛma a wotumi de boaboa ano

Sɛnea tabs ne pills yɛ horizontal by default no, fa class a ɛto so abien ka ho kɛkɛ, .nav-stacked, na ama ayɛ te sɛ nea wɔaboaboa ano vertically stacked.

Tab ahorow a wɔaboaboa ano

<ul class = "nav nav-tabs a wɔaboaboa ano" > 
  ...
</ul>

Nnuru a wɔaboaboa ano

<ul class = "nav nav-pills nav-a wɔaboaboa ano" > 
  ...
</ul>

Nneɛma a wɔde gu fam

Fa menu ahorow a ɛwɔ fam no ka ho a HTML kakra aka ho ne JavaScript plugin a ɛwɔ fam no .

Tabs a ɛwɔ dropdown ahorow

<ul adesuakuw = "nav nav-tabs" > 
  <li adesuakuw = "a ɛwɔ ase" > 
    <a adesuakuw = "dropdown-toggle" . 
       data-toggle = "a ɛwɔ ase hɔ".
       href = "#" > na ɛwɔ hɔ
        Dropdown a ɛwɔ hɔ
        <b adesuakuw = "caret" ></b> 
      </a>
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      <!-- nkitahodi ahorow -->
    </ul>
  </li>
</ul>

Nnuru a wɔde gu mu a wɔde gu fam

<ul adesuakuw = "nav nav-pills" > 
  <li adesuakuw = "a ɛwɔ ase" > 
    <a adesuakuw = "dropdown-toggle" . 
       data-toggle = "a ɛwɔ ase hɔ".
       href = "#" > na ɛwɔ hɔ
        Dropdown a ɛwɔ hɔ
        <b adesuakuw = "caret" ></b> 
      </a>
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      <!-- nkitahodi ahorow -->
    </ul>
  </li>
</ul>

Nav nsɛm a wɔahyehyɛ

Ɔkwan a ɛyɛ mmerɛw na ɛnyɛ den a wobɛfa so akyekye akuw a ɛwɔ nav links a ɛwɔ headers a wopɛ. Wɔde di dwuma yiye wɔ sidebars te sɛ Finder a ɛwɔ OS X mu no.

Nhwɛso nav list

Fa link ahorow a wɔahyehyɛ na fa ka ho class="nav nav-list":

<ul adesuakuw = "nav nav-nkyerɛwee" > 
  <li class = "nav-header" > Kyerɛw asɛmti </li> 
  <li adesuakuw = "adwumayɛ" ><a href = "#" > Ofie </a></li>  
  <li><a href = "#" > Nhomakorabea </a></li> 
  ...
</ul>

Hyɛ nsoSɛ wopɛ sɛ wo nesting wɔ nav list mu a, fa ka class="nav nav-list"nested biara <ul>ho .

Nneɛma a wɔde kyekyɛ nneɛma mu a ɛkɔ soro

Fa horizontal divider ka ho denam empty list item a wobɛyɛ ne class no so .divider, te sɛ saa:

<ul adesuakuw = "nav nav-nkyerɛwee" > 
  ...
  <li adesuakuw = "nkyekyɛmu" ></li> 
  ...
</ul>

Tabba a wɔde di dwuma nav

Fa wo tabs no ba nkwa mu denam plugin a ɛnyɛ den a wode bɛdannan nneɛma ntam denam tabs so. Bootstrap ka tabbable tabs bom wɔ akwan anan mu: soro (default), nifa, ase, ne benkum.

Tabbable nhwɛso

Sɛ wopɛ sɛ wo ma tabs yɛ tabbable a, yɛ a .tab-panewith unique ID ma tab biara na fa kyekyere ho wɔ .tab-content.

<div class = "tabbable" > <!-- Wɔhwehwɛ ma benkum/nifa tab nkutoo -->  
  <ul adesuakuw = "nav nav-tabs" > 
    <li class = "adwumayɛ" ><a href = "#tab1" data-toggle = "tab" > Ɔfa 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Ɔfa 2 </a></li>  
  </ul>
  <div adesuakuw = "tab-nsɛm" > 
    <div adesuakuw = "tab-pane a ɛyɛ adwuma" id = "tab1" >  
      <p> Mewɔ Ɔfa 1. </p>
    </div> no
    <div adesuakuw = "tab-pane" id = "tab2" >  
      <p> Howdy, mewɔ Ɔfa 2. </p>
    </div> no
  </div> no
</div> no

Fade wɔ tabs mu

Sɛ wopɛ sɛ tab ahorow no bɛyera a, fa ka .fadeemu biara ho .tab-pane.

Ɛhwehwɛ sɛ wɔde jQuery plugin di dwuma

Tabbable tabs nyinaa yɛ yɛn jQuery plugin a ɛyɛ hare no na ɛma ahoɔden. Kenkan pii fa sɛnea wobɛma tabbable tabs aba nkwa mu wɔ JavaScript docs krataafa no so .

Tabbable wɔ ɔkwan biara so

Tabs a ɛwɔ ase hɔ no

Flip HTML no nhyehyɛe na fa class bi ka ho de tabs gu ase.

<div class = "tabbable tabs-a ɛwɔ aseɛ ha" > 
  <div adesuakuw = "tab-nsɛm" > 
    ...
  </div> no
  <ul adesuakuw = "nav nav-tabs" > 
    ...
  </ul>
</div> no

Tabs a ɛwɔ benkum so

Sesa adesuakuw no na fa tabs gu benkum so.

<div class = "tabbable tabs-benkum so" > 
  <ul adesuakuw = "nav nav-tabs" > 
    ...
  </ul>
  <div adesuakuw = "tab-nsɛm" > 
    ...
  </div> no
</div> no

Tabs a ɛwɔ nifa so

Sesa adesuakuw no na fa tab ahorow gu nifa so.

<div class = "tabbable tabs-nifa" > 
  <ul adesuakuw = "nav nav-tabs" > 
    ...
  </ul>
  <div adesuakuw = "tab-nsɛm" > 
    ...
  </div> no
</div> no

Mfitiaseɛ navbar

Sɛ wobɛhyɛ aseɛ a, navbars no yɛ static (ɛnyɛ fixed wɔ soro) na ɛka ho ma mmoa ma project din ne basic navigation. Fa biako to baabiara wɔ a .container, a ɛkyerɛ wo wɛbsaet no ne emu nsɛm no trɛw.

<div adesuakuw = "navbar" > 
  <div adesuakuw = "navbar-mfinimfini" > 
    <a adesuakuw = "brand" href = "#" > Asɛmti </a>  
    <ul adesuakuw = "nav" > 
      <li adesuakuw = "adwumayɛ" ><a href = "#" > Ofie </a></li>  
      <li><a href = "#" > Nkitahodi </a></li> 
      <li><a href = "#" > Nkitahodi </a></li> 
    </ul>
  </div> no
</div> no

Navbar no afã horow

Adeban

Link a ɛnyɛ den a wode bɛkyerɛ wo brand anaa project din no hwehwɛ anchor tag nkutoo.

<a class = "brand" href = "#" > Dwumadie din </a>  

Nav nkitahodi ahorow

Nav nneɛma yɛ mmerɛw sɛ wode bɛka ho denam list ahorow a wɔanhyehyɛ so.

<ul adesuakuw = "nav" > 
  <li adesuakuw = "adwumayɛ" > 
    <a href = "#" > Fie </a> na ɛwɔ hɔ 
  </li>
  <li><a href = "#" > Nkitahodi </a></li> 
  <li><a href = "#" > Nkitahodi </a></li> 
</ul>

Wubetumi de dividers aka wo nav links no ho ntɛm denam list ade a hwee nni so ne adesuakuw a ɛnyɛ den so. Fa eyi ka link ahorow ntam kɛkɛ:

<ul adesuakuw = "nav" > 
  ...
  <li class = "nkyekyɛmu-gyina hɔ" ></li> 
  ...
</ul>

Nkyerɛwee ahorow

Sɛ wopɛ sɛ wo style na wode fom bi si navbar no mu yiye a, fa class ahorow a ɛfata no ka ho sɛnea wɔakyerɛ wɔ ase ha no. Sɛ wopɛ default form a, fa ka ho .navbar-formna .pull-leftanaasɛ .pull-rightfa hyɛ mu yiye.

<form class = "navbar-fom twe-benkum" > 
  <input type = "nkyerɛwee" adesuakuw = "span2" >  
  <button type = "fa kɔ" class = "btn" > Fa kɔ </button>  
</form>

Hwehwɛ kratasin no

Sɛ wopɛ nhwehwɛmu kratasin a wɔayɛ no sɛnea wopɛ kɛse a, fa ka .navbar-searchne formho .search-queryka nsɛm a wɔde ahyɛ mu no ho ma styles soronko wɔ navbar no mu.

<form class = "navbar-hwehwɛ twe-benkum" > 
  <input type = "text" class = "hwehwɛ-asɛmmisa" beae = "Hwehwɛ" >   
</form>

Nneɛma a ɛwom no hyia

Hyehyɛ nav links, hwehwɛ kratasin, anaa nsɛm, fa .pull-leftanaa .pull-rightutility classes no di dwuma. Klas abien no nyinaa de CSS float bɛka ho wɔ ɔkwan a wɔakyerɛ no so.

Sɛ wode nsɛm a wɔde gu fam di dwuma

Fa dropdowns ne dropups ka nav no ho denam markup kakra ne dropdowns JavaScript plugin no so .

<ul adesuakuw = "nav" > 
  <li adesuakuw = "a ɛwɔ ase" > 
    <a href = "#" class = "asɛm a ɛwɔ ase-toggle" data-toggle = "afiri ase" >   
      Akawnso
      <b adesuakuw = "caret" ></b> 
    </a>
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </li>
</ul>

Kɔ JavaScript dropdowns nkrataa no so na woanya markup pii ne nsɛm a ɛfa frɛ dropdowns ho.

Atwerɛ

Fa nkyerɛwee nhama kyekyere element bi mu a .navbar-text, mpɛn pii no wɔ <p>tag so ma anim ne kɔla a ɛfata.

Nsakrae ahorow a wɔde kyerɛ a wobetumi apaw

Siesie navbar no kɔ viewport no atifi anaa ase denam class foforo so wɔ div a ɛwɔ akyi paa no so, .navbar.

Wɔasiesie no akɔ soro

Fa ka ho .navbar-fixed-topna kae sɛ wobɛbu beae a ahintaw a ɛwɔ n’ase no ho akontaa denam anyɛ yiye koraa no 40px a wode bɛka ho paddingwɔ <body>. Hwɛ sɛ wode eyi bɛka ho wɔ core Bootstrap CSS no akyi ne ansa na CSS a ɛyɛ mmuae a wopɛ no aba.

<div class = "navbar navbar-a wɔasiesie-atifi" > 
  ...
</div> no

Wɔasiesie no wɔ ase hɔ

Fa ka ho .navbar-fixed-bottommmom.

<div class = "navbar navbar-a wɔahyɛ-ase" > 
  ...
</div> no

Static soro navbar

Yɛ navbar a ɛtrɛw nyinaa a ɛne kratafa no kɔ denam .navbar-static-top. Nea ɛnte sɛ .navbar-fixed-topadesuakuw no, enhia sɛ wosakra padding biara wɔ body.

<div class = "navbar navbar-gyinabea-atifi" > 
  ...
</div> no

Navbar a ɛyɛ mmuae

Sɛ wode navbar a ɛyɛ mmuae a ɛrebubu no bedi dwuma a, kyekyere wo navbar no mu nsɛm no wɔ div a ɛwɔ mu, .nav-collapse.collapse, na fa navbar toggle button no ka ho, .btn-navbar.

<div adesuakuw = "navbar" > 
  <div adesuakuw = "navbar-mfinimfini" > 
    <div adesuakuw = "adekorabea" > 
 
      <!-- .btn-navbar na wɔde di dwuma sɛ toggle ma navbar nsɛm a abubu -->
      <a adesuakuw = "btn btn-navbar" data-toggle = "abɔso" data-botae = ".nav-abɔso" >   
        <span adesuakuw = "ahyɛnsode-bar" ></span> 
        <span adesuakuw = "ahyɛnsode-bar" ></span> 
        <span adesuakuw = "ahyɛnsode-bar" ></span> 
      </a>
 
      <!-- Hwɛ sɛ wobɛgyae brand no wɔ hɔ sɛ wopɛ sɛ wɔkyerɛ -->
      <a class = "brand" href = "#" > Dwumadie din </a>  
 
      <!-- Biribiara a wopɛ sɛ wode sie wɔ 940px anaa nea ennu saa, fa gu ha mu -->
      <div class = "nav-asɛm a ɛyɛ hu" > 
        <!-- .nav, .navbar-hwehwɛ, .navbar-kwan, ne nea ɛkeka ho -->
      </div> no
 
    </div> no
  </div> no
</div> no

Nsakrae a wɔdannan no

Sesa sɛnea navbar no te denam .navbar-inverse.

<div adesuakuw = "navbar navbar-inverse" > 
  ...
</div> no

Nhwɛso ahorow

Nhwɛso biako a wɔakyerɛ sɛnea ebia wɔbɛda no adi wɔ nkratafa pii so.

<ul class = "abodoo a wɔayam" > 
  <li><a href = "#" > Fie </a> <span adesuakuw = "nkyekyɛmu" > / </span></li>   
  <li><a href = "#" > Nhomakorabea </a> <span adesuakuw = "nkyekyɛmu" > / </span></li>   
  <li adesuakuw = "adwumayɛ" > Data </li> 
</ul>

Nkratafa a wɔde di dwuma wɔ ɔkwan a ɛfata so

Simple pagination inspired by Rdio, eye ma apps ne nhwehwɛmu aba. Block kɛse no yɛ den sɛ wobɛpa ho kyɛw, ɛnyɛ den sɛ wobɛsesa, na ɛma mmeae akɛse a wobɛbɔ.

<div adesuakuw = "kratafa" > 
  <ul> no
    <li><a href = "#" > Nea edi kan </a></li> 
    <li><a href = "#" > 1 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 2 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 3 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 4 ​​</a></li> na ɛwɔ hɔ 
    <li><a href = "#" > 5 </a></li> na ɛwɔ hɔ 
    <li><a href = "#" > Nea edi hɔ </a></li> 
  </ul>
</div> no

Nneɛma a wubetumi apaw

Asɛm a wɔadi dɛm ne nea ɛreyɛ adwuma

Links yɛ customizable ma tebea horow. Fa di dwuma .disabledma link ahorow a wuntumi klik so na .activekyerɛ kratafa a ɛwɔ hɔ mprempren no.

<div adesuakuw = "kratafa" > 
  <ul> no
    <li adesuakuw = "wɔadi dɛm" ><a href = "#" > « </a></li> na ɛwɔ hɔ  
    <li adesuakuw = "adwumayɛ" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div> no

Wubetumi apaw swap out active anaa disabled anchors ama spans de ayi click functionality bere a wokura styles a woabɔ wo tirim no.

<div adesuakuw = "kratafa" > 
  <ul> no
    <li adesuakuw = "wɔadi dɛm" ><span> « </span></li> na ɛwɔ hɔ 
    <li adesuakuw = "adwumayɛ" ><span> 1 </span></li> 
    ...
  </ul>
</div> no

Nneɛma akɛse

Fancy kɛse anaa nketewa nkratafa? Fa .pagination-large, .pagination-small, anaa .pagination-minika ho sɛ wopɛ sɛ wunya akɛse afoforo a.

<div class = "kratafa krataafa-kɛse" > 
  <ul> no
    ...
  </ul>
</div> no
<div adesuakuw = "kratafa" > 
  <ul> no
    ...
  </ul>
</div> no
<div class = "kratafa krataafa-ketewa" > 
  <ul> no
    ...
  </ul>
</div> no
<div class = "kratafa krataafa-mini" > 
  <ul> no
    ...
  </ul>
</div> no

Nneɛma a Wɔde Di Dwuma

Fa adesua ahorow abien a wopɛ no mu biako ka ho na sesa nkratafa link ahorow no nhyehyɛe: .pagination-centeredne .pagination-right.

<div class = "kratafa nkratafa-mfinimfini" > 
  ...
</div> no

<div class = "kratafa krataafa-nifa" > 
  ...
</div> no

Pager a wɔde kyerɛw nsɛm

Ntɛmntɛm a edi kan ne nea edi hɔ links ma simple pagination implementations a hann markup ne styles. Ɛyɛ papa ma nsɛmma nhoma a ɛnyɛ den te sɛ blog anaa nsɛmma nhoma.

Default nhwɛso

Sɛnea wɔahyɛ no, pager no de link ahorow no si mfinimfini.

<ul adesuakuw = "pager" > 
  <li><a href = "#" > Nea atwam </a></li> 
  <li><a href = "#" > Nea edi hɔ </a></li> 
</ul>

Link ahorow a wɔahyehyɛ no pɛpɛɛpɛ

Sɛnea ɛbɛyɛ a, wubetumi de link biara ahyia afã horow no:

<ul adesuakuw = "pager" > 
  <li adesuakuw = "a atwam" > 
    <a href = "#" > Nsɛm a wɔka kyerɛ; Mpanyimfo </a> 
  </li>
  <li adesuakuw = "nea edi hɔ" > 
    <a href = "#" > Nsɛm foforo → </a> 
  </li>
</ul>

Optional disabled tebea

Pager links nso de general .disabledutility class a ɛfiri pagination no mu di dwuma.

<ul adesuakuw = "pager" > 
  <li class = "a wɔadi kan ayɛ adwuma" > 
    <a href = "#" > Nsɛm a wɔka kyerɛ; Mpanyimfo </a> 
  </li>
  ...
</ul>

Nneɛma a wɔde kyerɛw nsɛm

Badge ahorow

Ɛnyɛ den sɛ ebetumi abubu

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode bedi dwuma no, nkyerɛwde ne badge ahorow no bɛhwe ase kɛkɛ (ɛnam CSS no :emptypaw so) bere a nsɛm biara nni mu no.

Ɔkokodurufo unit

Ade a emu yɛ hare a ɛyɛ mmerɛw a wode bɛda nneɛma atitiriw adi wɔ wo wɛbsaet no so. Ɛyɛ adwuma yiye wɔ aguadi ne nsɛmma nhoma ahorow a emu nsɛm pii wom so.

<div adesuakuw = "ɔkokodurufo-kuw" > 
  <h1> Asɛmti </h1>
  <p> Nsɛmfua a wɔde kyerɛw nsɛm </p>
  <p> na ɛwɔ hɔ
    <a class = "btn btn-mfitiaseɛ btn-kɛseɛ" > 
      Sua pii
    </a>
  </p> no
</div> no

Kratafa no asɛmti

Shell a ɛnyɛ den ma an h1to a ɛfata space out na segment afã horow a ɛwɔ kratafa bi so. Ɛbɛtumi de h1's default small, element no adi dwuma ne afã afoforo dodow no ara (a styles afoforo ka ho).

<div class = "kratafa-atiri" > 
  <h1> Nhwɛsoɔ krataafa asɛmti <small> Nsɛm ketewa ma atiri </small></h1>
</div> no

Mfonini nketewa a wɔde ahyɛ hɔ

Sɛnea wɔahyɛ no, wɔayɛ Bootstrap mfonini nketewa no sɛnea ɛbɛyɛ a ɛbɛkyerɛ mfonini ahorow a ɛwɔ abusuabɔ a ɛwɔ agyiraehyɛde kakraa bi a ɛho hia.

Ɛyɛ nea wotumi sesa no kɛse

Sɛ wode markup kakra ka ho a, ɛyɛ yie sɛ wode HTML nsɛm biara te sɛ nsɛmti, nkyekyɛm, anaa bɔtɔn bɛka mfonini nketewa ho.

Dɛn nti na wode mfonini nketewa di dwuma

Mfonini nketewa (kan no na .media-gridɛkɔ soro kosi v1.4) yɛ papa ma mfonini anaa video ahorow a ɛwɔ grids, mfonini hwehwɛ aba, nneɛma a wɔtɔn wɔ sotɔɔ mu, portfolio ahorow, ne nea ɛkeka ho pii. Ebetumi ayɛ link ahorow anaasɛ static content.

Markup a ɛnyɛ den na ɛyɛ mmerɛw

Mfonini ketewaa a wɔde hyɛ agyirae no yɛ mmerɛw—a ula nneɛma dodow biara liwom no nkutoo ne nea ɛho hia. Ɛsan nso yɛ super flexible, ɛma kwan ma biribiara a ɛwɔ mu a ɛwɔ markup kakra bi kɛkɛ a ɛbɛkyekyere wo nsɛm no.

Ɔde grid column akɛse di dwuma

Nea etwa to no, mfonini nketewa no fã no de grid nhyehyɛe adesua ahorow a ɛwɔ hɔ dedaw no di dwuma—te sɛ .span2anaa .span3—ma mfonini nketewa no nsusuwii ahorow sohwɛ.

Markup a wɔde hyɛ agyirae

Sɛnea yɛadi kan aka no, agyiraehyɛde a wɔhwehwɛ ma mfonini nketewa no yɛ hare na ɛyɛ tẽẽ. Ɛha na wobɛhwɛ default nhyehyɛe a ɛwɔ mfonini ahorow a wɔde abɔ mu no :

<ul class = "mfonini nketewa" > 
  <li adesuakuw = "span4" > 
    <a href = "#" adesuakuw = "mfonini ketewa" >  
      <img data-src = "ɔkurafo.js/300x200" alt = "" > . Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio  
    </a>
  </li>
  ...
</ul>

Sɛ wopɛ HTML nsɛm a wɔahyɛ da ayɛ wɔ mfonini nketewa mu a, agyiraehyɛde no sesa kakra. Sɛ yɛbɛma block level content kwan wɔ baabiara a, yɛsesa no <a>ma <div>like so:

<ul class = "mfonini nketewa" > 
  <li adesuakuw = "span4" > 
    <div class = "mfonini ketewa" > 
      <img data-src = "ɔkurafo.js/300x200" alt = "" > . Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio  
      <h3> Mfonini ketewa no nkyerɛwde </h3>
      <p> Mfonini ketewa no ase... </p>
    </div> no
  </li>
  ...
</ul>

Nhwɛso pii

Hwehwɛ wo akwan nyinaa mu denam grid adesua ahorow a ɛwɔ hɔ ma wo no so. Wubetumi nso de akɛse ahorow afrafra na woayɛ no pɛpɛɛpɛ.

Default kɔkɔbɔ a wɔde ahyɛ mu

Fa nsɛm biara ne dismiss button a wopɛ no kyekyere mu na woanya .alertkɔkɔbɔ kɔkɔbɔ nkrasɛm titiriw bi.

<div adesuakuw = "kɔkɔbɔ" > 
  <button type = "button" class = "to" data-a wɔpow = "kɔbɔ" > × </button> no ho   
  <strong> Kɔkɔbɔ! </strong> Best check yo self, wo nnyɛ fɛ dodo.
</div> no

Dismiss button ahorow no

Mobile Safari ne Mobile Opera browser ahorow, a ɛka data-dismiss="alert"su no ho no, hwehwɛ sɛ href="#"wɔde kɔkɔbɔ ahorow a wɔpow bere a wɔde <a>tag redi dwuma no.

<a href = "#" adesuakuw = "to" data-dismiss = "kɔbɔ" > × </a>   

Sɛnea ɛbɛyɛ a, wubetumi de <button>element bi a ɛwɔ data attribute no adi dwuma, a yɛapaw sɛ yɛbɛyɛ ama yɛn docs no. Sɛ wode redi dwuma <button>a, ɛsɛ sɛ wode ka ho type="button"anaasɛ wo nkrataa no remfa mma.

<button type = "button" class = "to" data-a wɔpow = "kɔbɔ" > × </button> no ho   

Pow kɔkɔbɔ ahorow no denam JavaScript so

Fa kɔkɔbɔ jQuery plugin no di dwuma ma kɔkɔbɔ ahorow a wobɛpow ntɛmntɛm na ɛnyɛ den.

Nneɛma a wubetumi apaw

Sɛ wopɛ nkrasɛm tenten a, ma padding a ɛwɔ kɔkɔbɔ wrapper no atifi ne ase no nyɛ kɛse denam .alert-block.

<div class = "kɔkɔbɔ kɔkɔbɔ-asiw" > 
  <button type = "button" class = "to" data-a wɔpow = "kɔbɔ" > × </button> no ho   
  <h4> Kɔkɔbɔ! </h4> no
  Best check yo self, wo nnyɛ...
</div> no

Nsɛm a ɛfa ho a wɔde besi ananmu

Fa adesua ahorow a wopɛ ka ho na sesa kɔkɔbɔ bi nkyerɛase.

Mfomso anaa asiane

<div class = "kɔkɔbɔ kɔkɔbɔ-mfomso" > 
  ...
</div> no

Nkunimdie

<div class = "kɔkɔbɔ kɔkɔbɔ-nkonimdi" > 
  ...
</div> no

Asɛm

<div class = "kɔkɔbɔ kɔkɔbɔ-nsɛm" > 
  ...
</div> no

Nhwɛso ne agyiraehyɛde

Mfiasesɛm

Default nkɔso bar a ɛwɔ vertical gradient.

<div adesuakuw = "nkɔso" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 60 %; " ></div>   
</div> no

Ntrɛwmu

Ɔde gradient di dwuma de yɛ striped effect. Ɛnyɛ nea ɛwɔ IE7-8 mu.

<div class = "nkɔso nkɔso-striped" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 20 %; " ></div>   
</div> no

Animated a wɔde yɛ nneɛma

Fa ka .activeho na .progress-stripedama nsensanee no ayɛ adwuma wɔ nifa so akɔ benkum so. Ɛnyɛ nea ɛwɔ IE no nkyerɛase ahorow nyinaa mu.

<div class = "nkɔso nkɔso-striped active" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 40 %; " ></div>   
</div> no

Wɔaboaboa ano

Fa nnua pii gu biako mu na .progressfa boaboa ano.

<div adesuakuw = "nkɔso" > 
  <div adesuakuw = "bar bar-nkonimdi" ɔkwan = " ntrɛwmu : 35 %; " ></div>   
  <div class = "bar bar-kɔkɔbɔ" style = " trɛw : 20 %; " ></div>   
  <div class = "bar bar-asiane" style = " ntrɛwmu : 10 %; " ></div>   
</div> no

Nneɛma a wubetumi apaw

Kɔla afoforo a wɔde ahyɛ mu

Nkɔso bars de button ne kɔkɔbɔ adesua koro no ara bi di dwuma ma style ahorow a ɛkɔ so daa.

<div class = "nkɔso nkɔso-nsɛm" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 20 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-nkonimdi" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 40 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-kɔkɔbɔ" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 60 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-asiane" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 80 % " ></div>   
</div> no

Nnua a ɛwɔ nsensanee

Te sɛ kɔla ahorow a ɛyɛ den no, yɛwɔ nkɔso nnua ahorow a ɛyɛ nsensanee.

<div class = "nkɔso nkɔso-nsɛm nkɔso-striped" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 20 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-nkonimdi nkɔso-striped" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 40 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-kɔkɔbɔ nkɔso-striped" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 60 % " ></div>   
</div> no
<div class = "nkɔso nkɔso-asiane nkɔso-striped" > 
  <div adesuakuw = "bar" kwan = " ntrɛwmu : 80 % " ></div>   
</div> no

Browser mmoa a wɔde ma

Nkɔsoɔ bars de CSS3 gradients, nsakraeɛ, ne animations di dwuma de nya wɔn nsunsuansoɔ nyinaa. Saa nneɛma yi ntumi mmoa wɔ IE7-9 anaa Firefox dedaw no mu.

Nkyerɛase ahorow a edii kan sen Internet Explorer 10 ne Opera 12 no ntumi mmoa animations.

Abstract object styles a wɔde si nneɛma ahorow ahorow (te sɛ blog nsɛm, Tweets, ne nea ɛkeka ho) a ɛkyerɛ mfonini a ɛwɔ benkum anaa nifa a ɛka nsɛm a wɔakyerɛw ho.

Default nhwɛso

Media a wɔde ahyɛ hɔ no ma kwan ma wɔde media ade (mfonini, video, ɔdio) kɔ benkum anaa nifa so wɔ nsɛm a wɔabɔ no mu.

Nsɛm ho amanneɛbɔfo asɛmti

Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.

Nsɛm ho amanneɛbɔfo asɛmti

Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.

Nsɛm ho amanneɛbɔfo asɛmti

Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.

<div adesuakuw = "nsɛm ho amanneɛbɔ" > 
  <a adesuakuw = "twe-benkum" href = "#" >  
    <img adesuakuw = "media-ade" data-src = "kurafo.js/64x64" >  
  </a>
  <div class = "nsɛm ho amanneɛbɔ-nipadua" > 
    <h4 class = "media-asɛmti" > Nsɛm ho amanneɛbɔ asɛmti </h4> 
    ...
 
    <!-- Nested media ade -->
    <div adesuakuw = "nsɛm ho amanneɛbɔ" > 
      ...
    </div> no
  </div> no
</div> no

Nsɛm ho amanneɛbɔfo din

Sɛ wode markup kakra ka ho a, wubetumi de media adi dwuma wɔ list mu (ɛho wɔ mfaso ma comment threads anaa articles lists).

<ul class = "nsɛm ho amanneɛbɔ-nkyerɛwee" > 
  <li adesuakuw = "nsɛm ho amanneɛbɔ" > 
    <a adesuakuw = "twe-benkum" href = "#" >  
      <img adesuakuw = "media-ade" data-src = "kurafo.js/64x64" >  
    </a>
    <div class = "nsɛm ho amanneɛbɔ-nipadua" > 
      <h4 class = "media-asɛmti" > Nsɛm ho amanneɛbɔ asɛmti </h4> 
      ...
 
      <!-- Nested media ade -->
      <div adesuakuw = "nsɛm ho amanneɛbɔ" > 
        ...
     </div> no
    </div> no
  </li>
</ul>

Wells

Fa abura no di dwuma sɛ nkɛntɛnso a ɛnyɛ den wɔ element bi so na ama no nsunsuanso a ɛwɔ mu.

<div adesuakuw = "yiye" > 
  ...
</div> no

Adesua ahorow a wobetumi apaw

Control padding ne kurukuruwa ntwea so ne abien optional modifier adesuakuw.

<div class = "wia yiye-kɛse" > 
  ...
</div> no

<div class = "wiɛ yie-ketewa" > 
  ...
</div> no

To ahyɛnsode no mu

Fa generic close icon no di dwuma ma pow nsɛm te sɛ modals ne kɔkɔbɔ ahorow.

<button class = "to mu" > &mmere; </button> no ho 

iOS mfiri ahorow hwehwɛ sɛ wode href="#"for click events di dwuma sɛ wopɛ sɛ wode anchor di dwuma a.

<a adesuakuw = "to" href = "#" > &mmere; </a>  

Aboafo adesua ahorow

Simple, focused classes ma nketewa ɔyɛkyerɛ anaa suban tweaks.

.twe-benkum so

Float element bi benkum so

class = "twe-benkum so".

. twe - benkum { .
  float : benkum so ;
} .

.twe-nifa

Float element bi nifa so

class = "twe-nifa".

. twe - nifa { .
  float : nifa so ;
} .

.wɔayɛ mum

Sesa element bi kɔla kɔ#999

class = "wɔayɛ mum".

. muted { .
  kɔla : #999; 
} .

.siesie no yiye

Clear the floatwɔ element biara so

class = "nsɛm a wɔasiesie".

. clearfix { .
  * zoom : 1 na ɛyɛ ; 
  &: ansa na , .
  &: akyi { .
    ɔyɛkyerɛ : pon ;
    emu nsɛm : "" ; 
  } .
  &: akyi { .
    pefee : abien no nyinaa ;
  } .
} .