Button akuw ahorow

Fa bɔtn akuw ahorow di dwuma de bom bɔtn ahorow pii bom sɛ ade biako a wɔabom ayɛ. Fa <a>anaa <button>nneɛma ahorow a ɛtoatoa so kyekyere wɔn.

Nneyɛe a eye sen biara

Yɛkamfo akwankyerɛ a edidi so yi kyerɛ sɛnea wode bɔtn akuw ne nnwinnade bedi dwuma:

• Fa element koro no ara di dwuma bere nyinaa wɔ button kuw biako mu, <a>anaa <button>.
• Mfa button ahorow a ɛsono kɔla ahorow nfrafra button kuw koro no ara mu.
• Fa ahyɛnsode ahorow di dwuma de ka nsɛm ho anaasɛ wode besi ananmu, nanso hwɛ hu sɛ fa alt ne asɛmti nsɛm ka ho wɔ baabi a ɛfata.

Ɛsɛ sɛ wɔfrɛ Button akuw a ɛfa ho a ɛwɔ dropdowns (hwɛ ase hɔ) no wɔ ɔkwan soronko so na bere nyinaa wɔde dropdown caret ka ho de kyerɛ suban a wɔahyɛ da ayɛ.

Default nhwɛso

Sɛnea HTML no hwehwɛ standard button kuw a wɔde anchor tag buttons asi no ni:

<div adesuakuw = "btn-kuw" > 
  <bɔtn adesuakuw = "btn" > 1 </bɔtn> 
  <bɔtn adesuakuw = "btn" > 2 </bɔtn> 
  <bɔtn adesuakuw = "btn" > 3 </bɔtn> 
</div> no

Nnwinnade pon nhwɛso

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

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.

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

Nhwɛso a wɔde hyɛ agyirae

Te sɛ button kuw no, yɛn markup no de button markup a wɔyɛ no daa di dwuma, nanso wɔde nsa kakraa bi ka ho de siesie ɔkwan no na ɛboa Bootstrap dropdown jQuery plugin no.

<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. wo bɔtn no akɛse kɔ .btn-large, .btn-small, anaa .btn-mini.

Ɛhwehwɛ sɛ wɔyɛ javascript

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.

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

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.

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" > 
  ...
  <ul class = "dropdown-menu twetwe-nifa" > 
    <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  </ul>
</div> no

Nhwɛso a wɔde hyɛ agyirae

Yɛtrɛw mu wɔ button dropdowns a ɛyɛ daa no so de button adeyɛ a ɛto so abien a ɛyɛ adwuma sɛ dropdown trigger a ɛyɛ soronko no ma.

<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

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

Tumi a ɛwɔ nnyinaso adesuakuw

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

Bere a ɛsɛ sɛ wɔde di dwuma

Tabs ne pills yɛ papa ma nsɛm a ɛwɔ afã horow anaasɛ nsɛm a ɛfa ho no nkratafa ntam a wobɛfa so.

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.

Tab atitiriw

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

• Fie
• Ho asɛm
• Nkrasɛm ahorow

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

• Fie
• Ho asɛm
• Nkrasɛm ahorow

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

Sɛnea wɔhyehyɛ 'em

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

• Fie
• Ho asɛm
• Nkrasɛm ahorow

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

Nnuru a wɔaboaboa ano

• Fie
• Ho asɛm
• Nkrasɛm ahorow

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

Menu ahorow a ɛyɛ fɛ a wɔmaa ɛyɛɛ mmerɛw

Dropdown menus wɔ Bootstrap tabs ne pills mu yɛ super mmerɛw na ɛhwehwɛ HTML kakra a ɛboro so ne jQuery plugin a emu yɛ hare nkutoo.

Ti kɔ Javascript krataafa no so na kenkan docs a ɛfa initializing dropdowns wɔ Bootstrap mu no ho.

Tabs a ɛwɔ dropdown ahorow

• Fie
• Boa
• Dropdown a ɛwɔ hɔ
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Fie
• Boa
• Dropdown a ɛwɔ hɔ
  • Action
  • Another action
  • Something else here
  • Separated link

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

Application-style navigation a wɔde di dwuma

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

Structurally, wɔasisi wɔ core nav styles koro no ara so sɛ tabs ne pills, enti dwumadie ne customization yɛ tẽẽ.

Ne mfonini ahorow

Nav lists nso yɛ mmerɛw sɛ wode icons bɛhyɛ mu. Fa <i>tag a ɛfata no ka ho ne class na woayɛ set.

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>

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 adesuakuw = "nav-atiri" > 
    Kyerɛw asɛmti no
  </li>
  <li adesuakuw = "adwumayɛ" > 
    <a href = "#" > Fie </a> na ɛwɔ hɔ 
  </li>
  <li> no
    <a href = "#" > Nhomakorabea </a> 
  </li>
  ...
</ul>

Nhwɛso a ɛwɔ ahyɛnsode ahorow

Nhwɛso koro no ara, nanso wɔde <i>tag ahorow ahyɛ mu ma ahyɛnsode ahorow.

<ul adesuakuw = "nav nav-nkyerɛwee" > 
  ...
  <li> no
    <a href = "#" > na ɛwɔ hɔ 
      <i adesuakuw = "ahyɛnsode-nhoma" ></i> 
      Laabri
    </a>
  </li>
  ...
</ul>

Nea ɛka ho

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.

Sɛ wobɛsesa wɔn ntam a, ɛnyɛ den na ɛhwehwɛ sɛ wosakra markup kakraa bi pɛ.

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 .

Nya javascript no →

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.

.nav-tabsSɛ wopɛ tab ahorow a wɔahyehyɛ no nifa anaa benkum a, fa ne .tab-contentno kyekyere .tabbable.

Markup a ɛyɛ tẽẽ

Sɛ wode tabbable tabs di dwuma a, ɛhwehwɛ sɛ wode wrapping div, tabs ahorow a wɔahyehyɛ, ne nsɛm a ɛwɔ tabbable panes ahorow a wɔahyehyɛ.

<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

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

Navbar a wɔde yɛ nneɛma

Navbar no hwehwɛ divs kakraa bi pɛ na ama woatumi asiesie no yiye ama static anaa fixed display.

<div adesuakuw = "navbar" > 
  <div adesuakuw = "navbar-mfinimfini" > 
    <div adesuakuw = "adekorabea" > 
      ...
    </div> no
  </div> no
</div> no

Wɔasiesie navbar no

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

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

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

Sɛ wode navbar no hyɛ mu a, kae sɛ wobɛbu beae a ahintaw wɔ ase no ho akontaa. Fa 40px anaa nea ɛboro saa a ɛyɛ padding ka ho <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.

Brand din a wɔde yɛ nneɛma

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

<a adesuakuw = "ahyɛnsode" href = "#" >  
  Dwumadie no din
</a>

Nkyerɛwee a ɛwɔ navbar mu

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

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>

Optional mmuae nsakrae

Ɛgyina nsɛm dodow a ɛwɔ wo topbar no so no, ebia wobɛpɛ sɛ wode mmuae a wobɛpaw no di dwuma. Sɛ wobɛyɛ saa a, fa wo nav nsɛm no kyekyere div, .nav-collapse.collapse, a ɛwɔ mu no mu 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 adesuakuw = "nav-abɔso" > 
        <!-- .nav, .navbar-hwehwɛ, .navbar-kwan, ne nea ɛkeka ho -->
      </div> no
 
    </div> no
  </div> no
</div> no

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>

Nneɛma a ɛwom no hyia

Sɛ wopɛ sɛ wo ne nav, nhwehwɛmu kratasin, anaa nsɛm bi 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.

Menu ahorow a ɛwɔ fam a wode bɛka ho

Sɛ wode dropdowns ne dropups ka nav no ho a, ɛyɛ super simple, nanso ɛhwehwɛ sɛ wode yɛn javascript plugin no di dwuma .

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

Nya javascript no →

Nsɛm a ɛwɔ navbar no mu

Fa nsɛm a wɔahyehyɛ no nhama kyekyere <.navbar-text>, mpɛn pii no wɔ <p>tag so ma edi kan ne kɔla a ɛfata.

Dɛn nti na wɔde di dwuma

Wɔde breadcrumb navigation di dwuma sɛ ɔkwan a wɔfa so kyerɛ wɔn a wɔde di dwuma no baabi a wɔwɔ wɔ app anaa wɛbsaet bi mu, nanso ɛnyɛ sɛ wɔde hwehwɛ akwantu titiriw. Ma wɔn a wɔde di dwuma no nyɛ pii na ɛnyɛ tiawa na ama wɔatu mpɔn kɛse.

Nhwɛso ahorow

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

• Fie

• Home / .
• Laabri

• Home / .
• Nhomakorabea / .
• Nsɛm

Markup a wɔde hyɛ agyirae

HTML yɛ wo standard unordered list a ɛwɔ links.

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

Bere a ɛsɛ sɛ wɔde di dwuma

Ultra simplistic na minimally styled pagination inspired by Rdio, kɛse 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ɔ.

Stateful krataafa link ahorow

Links yɛ customizable na ɛyɛ adwuma wɔ tebea horow bi mu ne adesuakuw a ɛfata. .disabledsɛ wopɛ link ahorow a wuntumi nkɔ so ne .activekrataafa a ɛwɔ hɔ mprempren.

Nneɛma a wɔde hyɛ mu a ɛyɛ mmerɛw

Fa adesuakuw abien a wopɛ no mu biara ka ho na sesa nkratafa nkitahodi ahorow no nhyehyɛe: .pagination-centeredne .pagination-right.

Nhwɛso ahorow

Default pagination component no yɛ nea ɛyɛ mmerɛw na ɛyɛ adwuma wɔ nsakrae dodow bi mu.

Markup a wɔde hyɛ agyirae

Wɔkyekyere no <div>, nkratafa no yɛ <ul>.

<div adesuakuw = "kratafa" > 
  <ul> no
    <li><a href = "#" > Nea edi kan </a></li> 
    <li adesuakuw = "adwumayɛ" > 
      <a href = "#" > 1 </a> na ɛwɔ hɔ 
    </li>
    <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 = "#" > Nea edi hɔ </a></li> 
  </ul>
</div> no

Ɛfa pager ho

Pager fã no yɛ link ahorow a wɔahyehyɛ ama pagination dwumadie a ɛnyɛ den a ɛwɔ agyiraehyɛdeɛ a ɛyɛ hare ne mpo styles a ɛyɛ hare. Ɛyɛ papa ma nsɛmma nhoma a ɛnyɛ den te sɛ blog anaa nsɛmma nhoma.

Optional disabled tebea

Pager links nso de general .disabledclass a efi pagination no mu no di dwuma.

Default nhwɛso

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

• Dada
• Deɛ ɛdi hɔ

<ul adesuakuw = "pager" > 
  <li> no
    <a href = "#" > Nea atwam </a> 
  </li>
  <li> no
    <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:

• ← Mpanyimfo
• Foforo →

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

Fa ho

Badge yɛ nneɛma nketenkete a ɛnyɛ den a wɔde kyerɛ ade bi anaa akontaabu bi. Wɔtaa hu wɔ email clients te sɛ Mail.app anaa mobile apps so ma push notifications.

Adesua ahorow a ɛwɔ hɔ

Bootstrap de ade a emu yɛ hare, ɛyɛ mmerɛw a wɔfrɛ no hero unit ma de kyerɛ nneɛma a ɛwɔ wo site no so. Ɛyɛ adwuma yiye wɔ aguadi ne nsɛmma nhoma ahorow a emu nsɛm pii wom so.

Markup a wɔde hyɛ agyirae

Fa wo nsɛm no kyekyere divlike 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

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

• 

  Mfonini ketewaa bi a wɔde kyerɛw nsɛm

  Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

  Anamɔntuo Anamɔntuo

• 

  Mfonini ketewaa bi a wɔde kyerɛw nsɛm

  Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

  Anamɔntuo Anamɔntuo

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

Nneɛma a wɔde hyɛ agyirae no

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 = "span3" > 
    <a href = "#" adesuakuw = "mfonini ketewa" >  
      <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >  
    </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 = "span3" > 
    <div class = "mfonini ketewa" > 
      <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >  
      <h5> Mfonini ketewa no nkyerɛwde </h5>
      <p> Nsɛm a wɔakyerɛw wɔ ha yi ara... </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ɛ.

Wɔasan akyerɛw base class

Bootstrap 2 no, yɛama base class no ayɛ mmerɛw: .alertsen sɛ yɛbɛma .alert-message. Yɛatew agyiraehyɛde a ɛba fam koraa a wɔhwehwɛ nso so—dabi <p>na ɛho hia default so, akyi no <div>nkutoo .

Kɔkɔbɔ nkrasɛm biako pɛ

Sɛ wopɛ sɛ wonya ade a ɛyɛ den a ɛwɔ koodu kakraa bi a, yɛayi nsonsonoe hwɛ a ɛfa block alerts, nkrasɛm a ɛba ne padding pii ne mpɛn pii no nsɛm pii. Adesuakuw no nso asesa ayɛ no .alert-block.

Ɛkɔ yiye ne javascript

Bootstrap de jQuery plugin kɛseɛ bi ba a ɛboa kɔkɔbɔ nkrasɛm, ɛma sɛ wobɛpo no ntɛmntɛm na ɛnyɛ den.

Nya plugin no » .

Nhwɛso a ɛfa kɔkɔbɔ ahorow ho

Wrap wo nkra ne optional close icon wɔ div a simple class.

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

Ti a ɛwɔ soro! iOS mfiri ahorow hwehwɛ sɛ href="#"wɔde kɔkɔbɔ ahorow a wɔpow no. Hwɛ hu sɛ wode ne data attribute no bɛka ho ama anchor close icons. 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.

Ɛnyɛ den sɛ wobɛtrɛw gyinapɛn kɔkɔbɔ nkra no mu denam adesua ahorow abien a wopɛ so: .alert-blockma padding ne nsɛm a wɔde di dwuma pii ne .alert-headingasɛmti a ɛne no hyia.

<div class = "kɔkɔbɔ kɔkɔbɔ-asiw" > 
  <a class = "to" data-dismiss = "kɔbɔ" href = "#" > × </a>   
  <h4 class = "alert-heading" > Kɔkɔbɔ! </h4> no 
  Best check yo self, wo nnyɛ...
</div> no

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

Mfiasesɛm

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

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

Ntrɛwmu

Ɔde gradient di dwuma de yɛ striped effect (IE nni hɔ).

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

Animated a wɔde yɛ nneɛma

Fa striped nhwɛso no na ɛma ɛyɛ animated (no IE).

<div class = "nkɔso nkɔso-striped." 
     a ɛyɛ adwuma" >
  <div adesuakuw = "bar". 
       style = " ntrɛwmu : 40 %; " ></div> 
</div> no

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.

Nnua a ɛwɔ nsensanee

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

Suban

Nkɔsoɔ bars de CSS3 nsakraeɛ di dwuma, enti sɛ wo dynamically sesa ne tɛtrɛtɛ denam javascript so a, ɛbɛsesa ne kɛseɛ yie.

Sɛ wode .activeadesua no di dwuma a, wo .progress-stripednkɔso nnua no bɛma nsensanee no ayɛ adwuma wɔ benkum so akɔ nifa so.

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.

Opera ne IE ntumi mmoa animations saa bere yi.

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

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 hwehwɛ href="#" ma click events sɛ wopɛ sɛ wode anchor di dwuma a.

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