Khawm pawg

Siv cov pab pawg khawm kom koom nrog ntau lub nyees khawm ua ke ua ib qho kev sib xyaw ua ke. Ua lawv nrog cov series <a>los yog <button>cov ntsiab lus.

Cov kev coj ua zoo tshaj plaws

Peb pom zoo cov lus qhia hauv qab no rau kev siv khawm pawg thiab toolbars:

• Ib txwm siv tib lub caij hauv ib pawg khawm, <a>lossis <button>.
• Tsis txhob sib tov cov nyees khawm ntawm cov xim sib txawv hauv tib pawg khawm.
• Siv cov cim ntxiv rau lossis hloov cov ntawv, tab sis nco ntsoov suav nrog alt thiab cov ntawv sau npe yog qhov tsim nyog.

Cov pawg khawm cuam tshuam nrog kev poob qis (saib hauv qab) yuav tsum raug hu tawm nyias thiab ib txwm suav nrog kev saib xyuas kev poob qis los qhia tus cwj pwm xav.

Piv txwv li

Nov yog yuav ua li cas HTML saib rau cov txheej txheem khawm pawg tsim nrog thauj tog rau nkoj tag khawm:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Toolbar piv txwv

Muab cov khoom sib xyaw ua ke <div class="btn-group">rau hauv ib qho <div class="btn-toolbar">rau ntau qhov sib txawv.

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

Checkbox thiab xov tooj cua flavors

Cov pab pawg khawm kuj tseem tuaj yeem ua haujlwm raws li xov tooj cua, qhov twg tsuas yog ib lub pob tuaj yeem ua haujlwm, lossis checkboxes, qhov twg cov nyees khawm yuav ua haujlwm. Saib Javascript docs rau qhov ntawd.

Tau txais javascript »

Dropdowns hauv pawg khawm

Tau taub hau! Cov nyees khawm nrog dropdowns yuav tsum tau muab qhwv rau hauv lawv tus kheej .btn-grouphauv ib qho .btn-toolbarkev ua kom zoo.

Txheej txheem cej luam thiab piv txwv

Siv ib lub pob kom ua rau cov ntawv qhia poob qis los ntawm qhov muab tso rau hauv ib qho .btn-groupthiab muab cov ntawv qhia zaub mov kom raug.

Piv txwv markup

Zoo ib yam li ib pab pawg khawm, peb cov cim siv lub pob khawm tsis tu ncua, tab sis nrog ib qho ntxiv ntawm cov khoom ntxiv los kho cov qauv thiab txhawb nqa Bootstrap lub dropdown jQuery plugin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Kev ua
    <span dir = "ltr" >Tswv Yim Vaj</span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Ua haujlwm nrog txhua qhov ntau thiab tsawg khawm

Khawm dropdowns ua haujlwm ntawm txhua qhov loj. koj lub khawm loj rau .btn-large, .btn-small, lossis .btn-mini.

Yuav tsum muaj javascript

Khawm dropdowns xav tau Bootstrap dropdown plugin ua haujlwm.

Qee qhov xwm txheej - zoo li lub xov tooj ntawm tes - cov ntawv qhia zaub mov poob yuav nthuav tawm sab nraum qhov chaw saib. Koj yuav tsum daws qhov kev sib tw manually lossis nrog kev cai javascript.

Txheej txheem cej luam thiab piv txwv

Lub tsev nyob rau hauv cov khawm pab pawg neeg style thiab markup, peb tuaj yeem yooj yim tsim lub pob phua. Split nyees khawm muaj cov txheej txheem ua haujlwm nyob rau sab laug thiab lub dropdown toggle ntawm sab xis nrog cov ntsiab lus txuas.

Qhov ntau thiab tsawg

Siv cov chav kawm khawm ntxiv .btn-mini, .btn-small, lossis .btn-largerau qhov loj me.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Piv txwv markup

Peb nthuav dav ntawm qhov ib txwm khawm dropdowns los muab lub khawm thib ob uas ua haujlwm ua ib qho kev sib cais.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span dir = "ltr" >Tswv Yim Vaj</span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus kuj tuaj yeem toggled los ntawm hauv qab los ntawm kev ntxiv ib chav kawm rau niam txiv tam sim ntawm .dropdown-menu. Nws yuav tig cov kev taw qhia ntawm .caretthiab reposition cov ntawv qhia zaub mov nws tus kheej kom txav los ntawm hauv qab mus rau saum toj.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span dir = "ltr" >Tswv Yim Vaj</span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Cov chav kawm muaj zog

Tag nrho cov khoom siv ntawm no - tabs, tshuaj, thiab cov npe - qhia tib lub hauv paus cim thiab cov qauv hauv .navchav kawm.

Thaum siv

Tabs thiab cov ntsiav tshuaj yog qhov zoo rau cov ntu ntawm cov ntsiab lus lossis kev taw qhia ntawm nplooj ntawv ntawm cov ntsiab lus ntsig txog.

Kev sib xyaw ua ke

Txhawm rau kho cov kev sib txuas nav, siv cov chav kawm siv .pull-lefthluav .pull-righttaws xob. Ob chav kawm yuav ntxiv CSS ntab hauv cov lus qhia.

Basic tabs

Siv ib qhov <ul>txuas tsis tu ncua thiab ntxiv .nav-tabs:

• Tsev
• Profile
• Cov lus

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> </li > 
  <li><a href="#" > ... </a> </li > 
</ul>

Cov tshuaj yooj yim

Siv tib yam HTML, tab sis siv .nav-pillshloov:

• Tsev
• Profile
• Cov lus

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> </li > 
  <li><a href="#" > ... </a> </li > 
</ul>

Yuav ua li cas stack 'em

Raws li tabs thiab cov tshuaj yog kab rov tav los ntawm lub neej ntawd, tsuas yog ntxiv ib chav kawm thib ob, .nav-stacked, ua kom lawv tshwm vertically stacked.

Stacked tabs

• Tsev
• Profile
• Cov lus

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

Stacked tshuaj

• Tsev
• Profile
• Cov lus

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

Cov zaub mov nplua nuj ua tau yooj yim

Dropdown menus hauv Bootstrap tabs thiab ntsiav tshuaj yog super yooj yim thiab yuav tsum tau tsuas yog me ntsis ntxiv HTML thiab lub teeb jQuery plugin.

Lub taub hau mus rau nplooj ntawv Javascript los nyeem cov ntaub ntawv ntawm kev pib ua cov dropdowns hauv Bootstrap.

Tabs nrog dropdowns

• Tsev
• Pab
• poob
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        poob
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Cov tshuaj nrog dropdowns

• Tsev
• Pab
• poob
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        poob
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Daim ntawv thov-style navigation

Cov npe Nav muab txoj hauv kev yooj yim thiab yooj yim los tsim cov pab pawg ntawm cov kev sib txuas nav nrog cov npe xaiv. Lawv zoo tshaj plaws siv hauv sidebars zoo li Finder hauv OS X.

Raws li txoj cai, lawv tau tsim los ntawm tib lub hauv paus nav cov qauv zoo li tabs thiab tshuaj, yog li kev siv thiab kev kho kom haum yog ncaj nraim.

Nrog icons

Nav cov npe kuj yooj yim rau nruab nrog cov cim. Ntxiv cov ntawv <i>cim npe kom raug nrog cov chav kawm thiab koj tau teeb tsa.

Kab rov tav dividers

Ntxiv ib txoj kab rov tav los ntawm kev tsim cov khoom seem nrog cov chav kawm .divider, zoo li:

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

Example nav lis

Siv ib daim ntawv teev cov kev sib txuas thiab ntxiv class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Sau npe
  </li>
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Tsev qiv ntawv </a> _ 
  </li>
  ...
</ul>

Piv txwv nrog cov cim

Ib yam piv txwv, tab sis nrog <i>cov cim npe rau cov cim.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Lub tsev qiv ntawv
    </a>
  </li>
  ...
</ul>

Dab tsi suav nrog

Nqa koj cov tabs mus rau lub neej nrog lub plugin yooj yim los hloov ntawm cov ntsiab lus ntawm tabs. Bootstrap integrates tabbable tabs nyob rau hauv plaub hom: sab saum toj (default), txoj cai, hauv qab, thiab sab laug.

Hloov ntawm lawv yog ib qho yooj yim thiab tsuas yog yuav tsum tau hloov me ntsis markup.

Fade hauv tabs

Txhawm rau ua kom cov tabs ploj mus, ntxiv .faderau txhua qhov .tab-pane.

Yuav tsum tau jQuery plugin

Tag nrho cov tabbable tabs yog siv los ntawm peb lub teeb jQuery plugin. Nyeem ntxiv txog yuav ua li cas coj tabbable tabs rau lub neej ntawm nplooj ntawv javascript docs .

Tau txais javascript →

Tabbable piv txwv

Txhawm rau ua tabs tabbable, tsim ib .tab-panetus ID tshwj xeeb rau txhua lub tab thiab qhwv lawv hauv .tab-content.

Rau txoj cai los yog sab laug dlhos tab, qhwv lub .nav-tabsthiab .tab-contentnyob rau hauv .tabbable.

Ncaj nraim markup

Kev siv tabbable tabs yuav tsum muaj wrapping div, txheej tabs, thiab txheej tabbable panes ntawm cov ntsiab lus.

<div class = "tabbable" > <!-- Tsuas yog xav tau rau sab laug / sab xis tabs -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Ntu 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Ntu 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Kuv nyob rau ntu 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Nyob zoo, Kuv nyob rau ntu 2. </p>
    </div>
  </div>
</div>

Tabs hauv qab

Tig qhov kev txiav txim ntawm HTML thiab ntxiv ib chav kawm los muab tabs rau hauv qab.

<div class = "tabbable tabs-hauv qab" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs ntawm sab laug

Hloov cov chav kawm kom muab tabs ntawm sab laug.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Tabs ntawm sab xis

Hloov cov chav kawm kom muab tabs ntawm sab xis.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar scaffolding

Lub navbar yuav tsum tsuas yog ob peb divs los tsim nws kom zoo rau cov duab zoo li qub lossis cov duab tas.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Tsau navbar

Kho lub navbar mus rau sab saum toj lossis hauv qab ntawm qhov chaw saib nrog ib chav kawm ntxiv ntawm sab nraud div, .navbar.

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

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

Thaum koj affix lub navbar, nco ntsoov account rau qhov chaw zais hauv qab. Ntxiv 40px lossis ntau dua ntawm padding rau <body>. Nco ntsoov ntxiv qhov no tom qab cov tub ntxhais Bootstrap CSS thiab ua ntej qhov kev xaiv teb CSS.

Hom lub npe

Ib qho yooj yim txuas los qhia koj lub hom phiaj lossis lub npe project tsuas yog xav tau ib qho chaw thauj tog rau nkoj.

<a class = "brand" href = "#" >  
  Lub npe qhov project
</a>

Cov ntawv hauv navbar

Txhawm rau kom ua kom zoo nkauj thiab tso ib daim ntawv hauv navbar, ntxiv cov chav kawm tsim nyog raws li qhia hauv qab no. Rau ib daim ntawv ua ntej, suav nrog .navbar-formthiab los .pull-leftyog .pull-rightlos kho kom raug.

<form class = "navbar-form rub-left" > 
  <input type = "text" class = "span2" >  
</form>

Rau ib daim ntawv tshawb fawb ntxiv, ntxiv .navbar-searchrau formthiab .search-queryrau cov tswv yim rau cov qauv tshwj xeeb hauv navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Optional teb variation

Nyob ntawm seb muaj pes tsawg cov ntsiab lus hauv koj lub topbar, tej zaum koj yuav xav siv cov kev xaiv teb. Txhawm rau ua li ntawd, qhwv koj cov ntsiab lus nav hauv qhov muaj div, .nav-collapse.collapse, thiab ntxiv cov khawm navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar yog siv los ua lub toggle rau cov ntsiab lus navbar uas ploj lawm -->
      <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>
 
      <!-- Nco ntsoov tawm lub hom tawm ntawd yog tias koj xav kom nws pom -->
      <a class="brand" href="#" > Project name </a> _ _ _  
 
      <!-- Txhua yam koj xav tau zais ntawm 940px lossis tsawg dua, tso rau hauv no -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, thiab lwm yam -->
      </div>
 
    </div>
  </div>
</div>

Nav links

Nav khoom yog yooj yim ntxiv los ntawm cov npe tsis tau xaj.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Koj tuaj yeem yooj yim ntxiv cov faib rau koj cov kev sib txuas nav nrog rau cov npe khoob thiab cov chav kawm yooj yim. Tsuas yog ntxiv qhov no ntawm qhov txuas:

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

Kev sib xyaw ua ke

Txhawm rau kho qhov nav, tshawb nrhiav, lossis ntawv nyeem, siv cov chav kawm siv .pull-lefthluav .pull-righttaws xob. Ob chav kawm yuav ntxiv CSS ntab hauv cov lus qhia.

Ntxiv dropdown menus

Ntxiv dropdowns thiab dropups rau nav yog super yooj yim, tab sis yuav tsum tau siv peb javascript plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Tus account
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Tau txais javascript →

Cov ntawv hauv navbar

Qhwv cov hlua ntawm cov ntawv hauv ib qho <.navbar-text>, feem ntau ntawm ib lub <p>cim rau kev coj thiab xim.

Vim li cas siv lawv

Breadcrumb navigation yog siv los ua ib txoj hauv kev los qhia cov neeg siv qhov twg lawv nyob hauv ib qho app lossis ib qhov chaw, tab sis tsis yog rau thawj qhov kev taw qhia. Khaws lawv cov kev siv me me thiab succinct kom ua tau zoo tshaj plaws.

Piv txwv

Ib qho piv txwv qhia tau hais tias nws tuaj yeem tso tawm thoob plaws ntau nplooj ntawv.

• Tsev

• Tsev /
• Lub tsev qiv ntawv

• Tsev /
• Lub tsev qiv ntawv /
• Cov ntaub ntawv

Markup

HTML yog koj daim ntawv teev npe tsis raug cai nrog cov txuas.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> Tsev </a> < span class = "divider" > / < / span>   
  </li>
  <li>
    <a href="#"> Lub Tsev Qiv Ntawv </a> < span class = "divider" > / < / span>   
  </li>
  <li class = "active" > Data </li> 
</ul>

Thaum siv

Ultra simplistic thiab minimally styled pagination tshwm sim los ntawm Rdio, zoo rau cov apps thiab tshawb nrhiav. Qhov loj thaiv yog ib qho nyuaj rau nco, yooj yim scalable, thiab muab loj nias qhov chaw.

Stateful nplooj ntawv links

Kev sib txuas yog customizable thiab ua hauj lwm nyob rau hauv ib tug xov tooj ntawm cov xwm txheej nrog rau cov chav kawm zoo. .disabledrau unclickable links thiab .activerau nplooj ntawv tam sim no.

Hloov kho kom haum

Ntxiv ob qho ntawm ob chav kawm xaiv los hloov qhov kev sib tw ntawm kev sib txuas ntawm pagination: .pagination-centeredthiab .pagination-right.

Piv txwv

Lub default pagination tivthaiv yog hloov tau thiab ua haujlwm nyob rau hauv ib tug xov tooj ntawm variations.

Markup

qhwv hauv ib <div>, pagination tsuas yog ib <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li class = "active" > 
      <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 = "#" > Next </a></li> 
  </ul>
</div>

Hais txog pager

Cov tshuaj tivthaiv pager yog ib txheej txuas rau kev siv pagination yooj yim nrog lub teeb cim thiab txawm tias sib dua. Nws yog qhov zoo rau cov chaw yooj yim xws li blogs lossis cov ntawv xov xwm.

Xaiv lub xeev tsis taus

Pager links kuj siv cov .disabledchav kawm dav dav los ntawm pagination.

Piv txwv li

Los ntawm lub neej ntawd, pager chaw txuas.

• Yav dhau los
• Tom ntej no

<ul class = "pager" > 
  <li>
    <a href="#"> Previous </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Tom ntej </a> _ _ 
  </li>
</ul>

Aligned links

Xwb, koj tuaj yeem kho txhua qhov txuas mus rau sab:

• ← Laus
• Tshiab →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href="#"> & larr ; _ Laus </a> 
  </li>
  <li class = "next" > 
    <a href="#"> Tshiab & rarr ; </a> 
  </li>
</ul>

Txog

Cov paib yog cov khoom me me, yooj yim rau kev nthuav qhia qhov taw qhia lossis suav ntawm qee yam. Lawv feem ntau pom nyob rau hauv cov neeg siv email xws li Mail.app lossis ntawm cov ntawv xov tooj ntawm tes rau kev ceeb toom thawb.

Muaj cov chav kawm

Bootstrap muab lub teeb yuag, hloov tau yooj yim hu ua chav tsev hero los nthuav qhia cov ntsiab lus ntawm koj qhov chaw. Nws ua haujlwm zoo ntawm kev lag luam thiab cov ntsiab lus-hnyav qhov chaw.

Markup

Qhwv koj cov ntsiab lus hauv ib divyam li ntawd:

<div class = "hero-unit" > 
  <h1> Lub taub hau </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Kawm ntxiv
    </a>
  </p>
</div>

Lub plhaub yooj yim rau qhov h1kom tsim nyog qhov chaw tawm thiab ntu ntu ntawm cov ntsiab lus ntawm nplooj ntawv. Nws tuaj yeem siv lub h1neej ntawd small, lub ntsiab lus thiab feem ntau lwm yam khoom (nrog rau cov qauv ntxiv).

<div class = "page-header" > 
  <h1> Piv txwv nplooj ntawv header </h1>
</div>

Cov duab me me

Los ntawm lub neej ntawd, Bootstrap's thumbnails yog tsim los qhia cov duab txuas nrog tsawg kawg yuav tsum tau kos.

Kho siab heev

Nrog me ntsis ntawm cov cim ntxiv, nws muaj peev xwm ntxiv txhua hom HTML cov ntsiab lus xws li kab lus, kab lus, lossis cov nyees khawm rau hauv cov duab me.

• 

  Thumbnail daim ntawv lo

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

  Kev ua Kev ua

• 

  Thumbnail daim ntawv lo

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

  Kev ua Kev ua

Vim li cas thiaj siv cov duab me

Thumbnails (yav dhau .media-gridlos txog v1.4) yog qhov zoo rau daim phiaj duab lossis cov yeeb yaj kiab, cov duab tshawb nrhiav, cov khoom muag, cov ntaub ntawv, thiab ntau ntxiv. Lawv tuaj yeem yog cov ntawv txuas lossis cov ntsiab lus zoo li qub.

Yooj yim, saj zawg zog markup

Thumbnail markup yog qhov yooj yim - ulnrog ib tus lej ntawm licov ntsiab lus yog txhua yam uas yuav tsum tau ua. Nws kuj tseem hloov tau yooj yim, tso cai rau txhua hom ntsiab lus nrog me ntsis ntxiv cim los qhwv koj cov ntsiab lus.

Siv daim phiaj kab loj

Thaum kawg, cov duab thumbnails siv cov chav kawm kab sib chaws uas twb muaj lawm - zoo li .span2lossis .span3- rau kev tswj cov duab me me.

Lub markup

Raws li tau hais dhau los, qhov yuav tsum tau kos npe rau cov duab me me yog lub teeb thiab ncaj nraim. Nov yog saib ntawm qhov teeb tsa ua ntej rau cov duab txuas :

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

Rau kev cai HTML cov ntsiab lus hauv cov duab me, cov cim hloov me ntsis. Txhawm rau tso cai thaiv cov ntsiab lus nyob txhua qhov chaw, peb sib pauv qhov <a>zoo <div>li:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail label </h5>
      <p> Tub Nuj Nplhaib txoj nkauj no... </p>
    </div>
  </li>
  ...
</ul>

Piv txwv ntxiv

Tshawb nrhiav tag nrho koj cov kev xaiv nrog ntau cov chav kawm kab sib chaws muaj rau koj. Koj tseem tuaj yeem sib xyaw thiab sib txawv qhov ntau thiab tsawg.

Rewritten base class

Nrog Bootstrap 2, peb tau simplified lub hauv paus chav kawm: .alerttsis yog .alert-message. Peb kuj tau txo qhov tsawg kawg nkaus uas yuav tsum tau kos npe - tsis <p>yog yuav tsum tau los ntawm lub neej ntawd, tsuas yog sab nrauv <div>.

Cov lus ceeb toom ib leeg

Rau cov khoom siv ruaj khov dua nrog cov lej tsawg, peb tau tshem tawm qhov sib txawv saib rau kev ceeb toom thaiv, cov lus uas tuaj nrog ntau dua padding thiab feem ntau cov ntawv nyeem ntau dua. Cov chav kawm kuj tau hloov mus rau .alert-block.

Mus zoo nrog javascript

Bootstrap los nrog lub zoo jQuery plugin uas txhawb cov lus ceeb toom, ua rau lawv tshem tawm sai thiab yooj yim.

Tau lub plugin »

Piv txwv ceeb toom

Qhwv koj cov lus thiab ib qho kev xaiv kaw icon hauv div nrog chav kawm yooj yim.

<div class = "alert" > 
  <button class = "kaw" data-dismiss = "alert" > × </button>  
  <strong> Ceeb toom! </strong> Zoo tshaj koj tus kheej, koj tsis saib zoo heev.
</div>

Tau taub hau! iOS pab kiag li lawm xav tau ib tug href="#"rau kev tso tseg ntawm ceeb toom. Nco ntsoov suav nrog nws thiab cov ntaub ntawv tus cwj pwm rau thauj tog rau nkoj kaw icons. Xwb, koj tuaj yeem siv lub <button>caij nrog cov ntaub ntawv tus cwj pwm, uas peb tau xaiv ua rau peb cov ntaub ntawv. Thaum siv <button>, koj yuav tsum suav nrog type="button"lossis koj cov ntawv yuav tsis xa tuaj.

Yooj yim txuas ntxiv cov lus ceeb toom tus qauv nrog ob chav kawm xaiv: .alert-blockrau ntau qhov padding thiab cov ntawv nyeem thiab .alert-headingrau cov lus sib xws.

<div class = "alert-block" > 
  <a class = "kaw" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Ceeb toom! </h4> 
  Best check koj tus kheej, koj tsis yog ...
</div>

yuam kev los yog txaus ntshai

<div class = "alert alert-error" > 
  ...
</div>

Kev vam meej

<div class = "alert-success" > 
  ...
</div>

Cov ntaub ntawv

<div class = "alert-info" > 
  ...
</div>

Basic

Default kev nce qib bar nrog ntsug gradient.

<div class = "progress" > 
  <div class = "bar" 
       style = " width : 60 %; " ></div> 
</div>

striped

Siv cov gradient los tsim cov nyhuv striped (tsis muaj IE).

<div class = "progress-striped" > 
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

Animated

Siv tus qauv kab txaij thiab ua rau nws (tsis muaj IE).

<div class = "progress-striped 
     active" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Cov xim ntxiv

Cov kab kev nce qib siv qee qhov tib lub pob thiab ceeb toom cov chav kawm rau cov qauv zoo ib yam.

Cov kab txaij

Zoo ib yam li cov xim xim, peb muaj cov kab txaij sib txawv.

Cwj pwm

Kev nce qib bar siv CSS3 kev hloov pauv, yog li yog tias koj hloov kho qhov dav ntawm javascript, nws yuav hloov kho kom zoo.

Yog tias koj siv .activechav kawm, koj .progress-stripedqhov kev kawm bar yuav ua rau cov kab txaij sab laug mus rau sab xis.

Kev them nyiaj yug browser

Cov kab nce qib siv CSS3 gradients, kev hloov pauv, thiab cov animations kom ua tiav tag nrho lawv cov teebmeem. Cov yam ntxwv no tsis txaus siab hauv IE7-9 lossis cov laus dua ntawm Firefox.

Opera thiab IE tsis txhawb cov animations nyob rau lub sijhawm no.

Wells

Siv lub qhov dej zoo li cov nyhuv yooj yim ntawm ib lub caij los muab nws cov nyhuv inset.

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

Kaw lub cim

Siv lub cim ze ze rau kev tso tawm cov ntsiab lus xws li modals thiab ceeb toom.

×

<button class = "kaw" > × </button> 

iOS pab kiag li lawm yuav tsum tau ib tug href="#" rau nias cov xwm txheej yog tias koj xav siv lub thauj tog rau nkoj.

<a class = "kaw" href = "#" > × </a>