Pagwadan

Mabaliwan, konteksto a menu para iti panangiparang kadagiti listaan ​​dagiti silpo. Naaramid nga interaktibo babaen ti dropdown a plugin ti JavaScript .

<ul klase = "mababa-a-menu" akem = "menu" aria-labelledby = "agbaba-a-menu" >   
  <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > Sabali nga aramid </a></li>  
  <li><a tabindex = "-1" href = "#" > Sabali pay ditoy </a></li>  
  <li klase = "mangbingay" </li> 
  <li><a tabindex = "-1" href = "#" > Naisina a silpo </a></li>  
</ul>

Panagmarka

No kitaen laeng ti dropdown menu, ditoy ti kasapulan nga HTML. Masapul nga ibalkotmo ti trigger ti dropdown ken ti dropdown a menu iti uneg ti .dropdown, wenno ti sabali nga elemento a mangideklara position: relative;ti . Kalpasanna, mangaramid laeng iti menu.

<div klase = "agpababa" > 
  <!-- Isilpo wenno buton tapno ag-toggle iti dropdown -->
  <ul klase = "dropdown-menu" akem = "menu" aria-naimarka babaen = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > Sabali nga aramid </a></li>  
    <li><a tabindex = "-1" href = "#" > Sabali pay ditoy </a></li>  
    <li klase = "mangbingay" </li> 
    <li><a tabindex = "-1" href = "#" > Naisina a silpo </a></li>  
  </ul>
</div>

Dagiti Pagpilian

Itunos dagiti menu iti kannawan ken inayon iraman dagiti kanayonan a lebel dagiti dropdown.

Panangitunos kadagiti menu

Inayon .pull-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.

<ul klase = "dropdown-menu a guyoden-kannawan" akem = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Nabaldado dagiti pagpilian iti menu

Inayon .disablediti a <li>iti dropdown tapno mapasardeng ti link.

<ul klase = "mababa-a-menu" akem = "menu" aria-labelledby = "agbaba-a-menu" >   
  <li><a tabindex = "-1" href = "#" > Kanayon a silpo </a></li>  
  <li class = "nabaldado" ><a tabindex = "-1" href = "#" > Nabaldado a silpo </a></li>   
  <li><a tabindex = "-1" href = "#" > Sabali pay a silpo </a></li>  
</ul>

Sub menu kadagiti dropdown

Manginayon ti ekstra a lebel dagiti dropdown a menu, nga agparang iti hover a kas dagitoy ti OS X, nga addaan kadagiti sumagmamano a simple a panaginayon ti markup. Inayon .dropdown-submenuiti aniaman liiti addan a dropdown menu para iti automatiko nga estilo.

<ul klase = "dropdown-menu" akem = "menu" aria-naimarka babaen = "dLabel" >   
  ...
  <li klase = "submenu nga agpababa" > 
    <a tabindex = "-1" href = "#" > Ad-adu pay a pagpilian </a>  
    <ul klase = "nababa-a-menu" > 
      ...
    </ul>
  </li>
</ul>

Dagiti pagarigan

Dua a kangrunaan a pagpilian, agraman ti dua pay nga espesipiko a panagduduma.

Agmaymaysa a buton ti grupo

Balkoten ti agsasaruno a buton babaen ti .btnin .btn-group.

<div klase = "btn-grupo" > 
  <buton klase = "btn" > Kannigid </button> 
  <buton klase = "btn" > Tengnga </button> 
  < klase ti buton = "btn" > Kannawan </button> 
</div>

Adu a grupo ti buton

Pagtiponen dagiti set ti <div class="btn-group">iti maysa <div class="btn-toolbar">para kadagiti mas komplikado a paset.

<div klase = "btn-a baras ti ramit" > 
  <div klase = "btn-grupo" > 
    ...
  </div>
</div>

Bertikal a grupo dagiti buton

Pagbalinen a ti maysa a set dagiti buton ket agparang a bertikal a naurnong imbes a horizontal.

<div klase = "btn-grupo btn-grupo-bertikal" > 
  ...
</div>

Checkbox ken dagiti raman ti radio

Mabalin met nga agtignay dagiti grupo ti buton kas radio, a sadiay maysa laeng a buton ti mabalin nga aktibo, wenno dagiti kahon ti tsek, a mabalin nga aktibo ti aniaman a bilang dagiti buton. Kitaen dagiti docs ti JavaScript para iti dayta.

Dagiti dropdown kadagiti grupo ti buton

Ulo nga agpangato!Dagiti buton nga addaan kadagiti dropdown ket masapul a saggaysa a nabalkot iti bukodda .btn-groupiti uneg ti a .btn-toolbarpara iti umno a panagiparang.

Panangkita iti pakabuklan ken dagiti pagarigan

Usaren ti aniaman a buton tapno mangtignay iti dropdown menu babaen ti panangikabil iti dayta iti uneg ti a .btn-groupken panangipaay iti umno a menu markup.

<div klase = "btn-grupo" > 
  <a klase = "btn dropdown-a-mabaliwan" data-a-mabaliwan = "agbaba" href = "#" >   
    Aksion
    <span klase = "caret" </span> 
  </a>
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Agtrabaho iti amin a kadakkel ti buton

Dagiti dropdown ti buton ket agtrabaho iti aniaman a kadakkel: .btn-large, .btn-small, wenno .btn-mini.

Kasapulan ti JavaScript

Dagiti dropdown ti buton ket kasapulan ti Bootstrap dropdown plugin tapno agtignay.

Iti dadduma a kaso—kas iti mobile—dagiti dropdown menu ket agsaknapto iti ruar ti viewport. Masapul a marisutmo ti panagtunos a manual wenno babaen ti kostumbre a JavaScript.

Split dagiti dropdown ti buton

Iti panangibangon kadagiti estilo ti grupo ti buton ken markup, nalaka laeng a makaaramidtayo iti split button. Dagiti nabingay a buton ket mangitampok ti gagangay a panagtignay iti kannigid ken ti dropdown a panagbalbaliw iti kannawan nga addaan kadagiti konteksto a silpo.

<div klase = "btn-grupo" > 
  <buton klase = "btn" > Aksyon </button> 
  < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >  
    <span klase = "caret" </span> 
  </button> nga
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Dagiti Kadakkel

Usaren dagiti ekstra a klase ti buton .btn-mini, .btn-small, wenno .btn-largepara iti panagdakkel.

<div klase = "btn-grupo" > 
  < klase ti buton = "btn btn-mini" > Aksyon </buton> 
  < klase ti buton = "btn btn-mini dropdown-toggle" panagbalbaliw -datos = "pababa" >  
    <span klase = "caret" </span> 
  </button> nga
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Dagiti menu ti dropup

Dagiti dropdown a menu ket mabalin pay a mai-toggle manipud iti baba nga agpangato babaen ti pananginayon ti maymaysa a klase iti dagus a nagannak ti .dropdown-menu. I-flip-na ti direksion ti .caretken iposisionna manen ti menu a mismo tapno umakar manipud baba nga agpangato imbes nga agpangato nga agpababa.

<div class = "panagbaba ti btn-grupo" > 
  < klase ti buton = "btn" > Panag- dropup </button> 
  < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >  
    <span klase = "caret" </span> 
  </button> nga
  <ul klase = "nababa-a-menu" > 
    <!-- dagiti silpo ti dropdown a menu -->
  </ul>
</div>

Nalag-an a default Agpada a markup, nadumaduma a klase

Amin a paset ti nav ditoy—tab, pildoras, ken listaan— ket mangibinglay iti isu met laeng a base markup ken estilo babaen ti .navklase.

Dagiti kangrunaan a tab

Mangala ti regular <ul>ti links ken inayon .nav-tabs:

<ul klase = "nav nav-tabs" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Dagiti kangrunaan a pildoras

Alaem dayta met laeng nga HTML, ngem usarem .nav-pillsketdi:

<ul klase = "nav nav-pildoras" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kasasaad ti baldado

Para iti ania man a paset ti nav (tab, pildoras, wenno listaan), inayon .disabledpara kadagiti abuabuan a silpo ken awan dagiti epekto ti hover . Agtalinaed a mai-klik dagiti silpo, nupay kasta, malaksid no ikkatem ti hrefattribute. Saan laeng a dayta, mabalinmo nga ipatungpal ti kostumbre a JavaScript tapno malapdan dagita a panag-click.

<ul klase = "nav nav-pildoras" > 
  ...
  <li klase = "baldado" ><a href = "#" > Pagtaengan </a></li>  
  ...
</ul>

Panagtunos ti paset

Tapno maitunos dagiti silpo ti nav, usaren ti .pull-leftwenno .pull-rightdagiti klase ti utilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion.

Mabalin nga agtumpok

Kas dagiti tab ken pildoras ket horizontal babaen ti default, mangnayon laeng iti maikadua a klase, .nav-stacked, tapno agparangda a bertikal a naurnong.

Naurnong dagiti tab

<ul klase = "nav nav-tabs nav-naurnong" > 
  ...
</ul>

Naurnong a pildoras

<ul klase = "nav nav-pildoras nav-naurnong" > 
  ...
</ul>

Dagiti dropdown

Manginayon kadagiti dropdown a menu nga addaan iti bassit nga ekstra nga HTML ken dagiti dropdown a JavaScript plugin .

Dagiti tab nga addaan kadagiti dropdown

<ul klase = "nav nav-tabs" > 
  <li klase = "agpababa" > 
    <a klase = "panag-dropdown-a-mabaliwan". 
       data-toggle = "agpababa nga agpababa".
       href = "#" > nga
        Dropdown nga
        <b klase = "caret" ></b> 
      </a>
    <ul klase = "nababa-a-menu" > 
      <!-- dagiti silpo -->
    </ul>
  </li>
</ul>

Pildoras nga addaan dropdowns

<ul klase = "nav nav-pildoras" > 
  <li klase = "agpababa" > 
    <a klase = "panag-dropdown-a-mabaliwan". 
       data-toggle = "agpababa nga agpababa".
       href = "#" > nga
        Dropdown nga
        <b klase = "caret" ></b> 
      </a>
    <ul klase = "nababa-a-menu" > 
      <!-- dagiti silpo -->
    </ul>
  </li>
</ul>

Nav dagiti listaan

Ti simple ken nalaka a wagas ti panagbangon kadagiti grupo dagiti silpo ti nav nga addaan kadagiti opsional nga ulo. Kasayaatan nga usaren dagitoy kadagiti sidebar a kas iti Finder iti OS X.

Pagarigan ti listaan ​​ti nav

Mangala ti listaan ​​dagiti silpo ken inayon class="nav nav-list":

<ul klase = "nav nav-listaan" > 
  <li class = "nav-header" > Paulo ti listaan ​​</li> 
  <li klase = "aktibo" ><a href = "#" > Pagtaengan </a></li>  
  <li><a href = "#" > Biblioteka </a></li> 
  ...
</ul>

LagipenPara iti panagumok iti uneg ti listaan ​​ti nav, iraman class="nav nav-list"iti ania man a panagumok <ul>.

Dagiti horizontal a mangbingay

Manginayon ti horisontal a mangbingbingay babaen ti panagpartuat ti awan kargana a banag ti listaan ​​nga addaan ti klase .divider, a kas ti kasta:

<ul klase = "nav nav-listaan" > 
  ...
  <li klase = "mangbingay" </li> 
  ...
</ul>

Tabbable nga nav

Iyegmo ti biag dagiti tabmo babaen ti simple a plugin tapno ag-toggle iti nagbaetan ti linaon babaen kadagiti tab. Ti Bootstrap ket mangitipon kadagiti tabbable a tab kadagiti uppat nga estilo: ngato (default), kannawan, baba, ken kannigid.

Pagarigan ti tabbable

Tapno agbalin a tabbable dagiti tab, mangpartuat ti .tab-paneaddaan iti naisangsangayan nga ID para iti tunggal tab ken baluten dagitoy iti .tab-content.

<div class = "tabbable" > <!-- Masapul laeng para kadagiti kannigid/kannawan a tab -->  
  <ul klase = "nav nav-tabs" > 
    <li klase = "aktibo" ><a href = "#tab1" data-toggle = "tab" > Seksion 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksion 2 </a></li>  
  </ul>
  <div klase = "linaon-tab" > 
    <div klase = "aktibo ti tab-pane" id = "tab1" >  
      <p> Addaak iti Seksion 1. </p>
    </div>
    <div klase = "tab-pane" id = "tab2" >  
      <p> Howdy, addaak iti Seksion 2. </p>
    </div>
  </div>
</div>

Agkupas kadagiti tab

Tapno agkupas dagiti tab, inayon .fadeiti tunggal .tab-pane.

Kasapulan ti plugin ti jQuery

Amin a tabbable a tab ket paandaren ti nalag-an a jQuery plugin-mi. Basaen ti ad-adu pay maipapan no kasano ti mangyeg kadagiti tabbable a tab iti biag iti panid dagiti dokumento ti JavaScript .

Tabbable iti aniaman a direksion

Tabs iti baba

I-flip ti urnos ti HTML ken mangnayon iti klase tapno mangikabil kadagiti tab iti baba.

<div class = "dagiti tabba ti tabba-iti baba" > 
  <div klase = "linaon-tab" > 
    ...
  </div>
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs iti kannigid

Isukat ti klase tapno mangikabil kadagiti tab iti kannigid.

<div class = "dagiti tabba ti tabba-kannigid" > 
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
  <div klase = "linaon-tab" > 
    ...
  </div>
</div>

Tabs iti kannawan

Isukat ti klase tapno mangikabil kadagiti tab iti kannawan.

<div class = "dagiti tabba ti tabba-kannigid" > 
  <ul klase = "nav nav-tabs" > 
    ...
  </ul>
  <div klase = "linaon-tab" > 
    ...
  </div>
</div>

Basic nga navbar

Tapno mangrugi, dagiti navbar ket estatiko (saan a naipatakder iti ngato) ken mairaman ti suporta para iti nagan ti proyekto ken ti batayan a panaglayag. Ikabil ti maysa iti sadinoman iti uneg ti .container, a mangikeddeng iti kalawa ti site ken linaonmo.

< klase ti div = "navbar".  >
  <div klase = "navbar-a-uneg".  >
    <a klase = "marka" href = "#" > Paulo   </a>
    <ul klase = "nav".  >
      <li klase = "aktibo" ><a href = "#" > Pagtaengan  </a></li>
      <li><a href = "#" > Pagsilpoan  </a></li>
      <li><a href = "#" > Pagsilpoan  </a></li>
    </ul>
  </div>
</div>

Dagiti paset ti Navbar

Marka

Ti simple a link tapno maipakita ti brand wenno nagan ti proyektom ket kasapulan laeng ti anchor tag.

<a class = "brand" href = "#" > Nagan ti proyekto </a>  

Nav dagiti silpo

Simple nga inayon dagiti banag ti Nav babaen kadagiti di naurnos a listaan.

<ul klase = "nav" > 
  <li klase = "aktibo" > 
    <a href = "#" > Pagtaengan </a> 
  </li>
  <li><a href = "#" > Pagsilpoan </a></li> 
  <li><a href = "#" > Pagsilpoan </a></li> 
</ul>

Nalaka laeng a mainayonmo dagiti divider kadagiti nav a silpom babaen ti empty list item ken simple a klase. Inayon laeng daytoy iti nagbaetan dagiti silpo:

<ul klase = "nav" > 
  ...
  <li klase = "dibision-bertikal" </li> 
  ...
</ul>

Dagiti Pormas

Tapno umno nga estilo ken iposision ti maysa a porma iti uneg ti navbar, inayon dagiti maitutop a klase a kas naipakita iti baba. Para iti default a porma, iraman .navbar-formken urayno .pull-leftwenno .pull-righttapno umiso ti panangitunos iti daytoy.

<porma a klase = "navbar-porma a guyoden-kannigid" > 
  < tipo ti input = "teksto" klase = "span2" >  
  <button type = "ipatuloden" klase = "btn" > Isumite </button>  
</porma>

Pormas ti panagsapul

Para iti ad-adu a napasadaan a porma ti panagbiruk, inayon .navbar-searchti formken .search-queryiti input para kadagiti espesial nga estilo iti navbar.

<porma ti klase = "navbar-biroken guyoden-kannigid" > 
  <input type = "teksto" klase = "biruk-saludsod" placeholder = "Agbirok" >   
</porma>

Panagtunos ti paset

Itunos dagiti silpo ti nav, porma ti panagsapul, wenno teksto, usaren ti .pull-leftor.pull-right utilidad. Agpada a manginayon dagiti klase ti CSS float iti naikeddeng a direksion.

Panangusar kadagiti dropdown

Inayon dagiti dropdown ken dropup iti nav nga addaan iti sangkabassit a markup ken dagiti dropdown JavaScript plugin .

<ul klase = "nav" > 
  <li klase = "agpababa" > 
    <a href = "#" klase = "pababa-a-mabaliwan" data-a-mabaliwan = "agpababa" >   
      Account
      <b klase = "caret" ></b> 
    </a>
    <ul klase = "nababa-a-menu" > 
      ...
    </ul>
  </li>
</ul>

Bisitaen ti dokumentasion dagiti dropdown ti JavaScript para iti ad-adu pay a markup ken impormasion iti panagayab kadagiti dropdown.

Teksto

Balkoten dagiti kuerdas ti teksto iti maysa nga elemento nga addaan iti .navbar-text, kadawyan iti maysa nga <p>etiketa para iti umno a panangidaulo ken kolor.

Opsional a panagduduma ti display

Ilinteg ti navbar iti ngato wenno baba ti viewport nga addaan iti kanayonan a klase iti akinruar a div, .navbar.

Natakder iti ngato

Inayon .navbar-fixed-topken laglagipen a kuentaen ti nailemmeng a lugar iti baba daytoy babaen ti pananginayon iti di kumurang a 40px paddingiti <body>. Siguraduen nga inayon daytoy kalpasan ti kangrunaan a Bootstrap CSS ken sakbay ti opsional a sumungbat a CSS.

<div class = "navbar navbar-natakder-nga-ngato" > 
  ...
</div>

Natakder iti baba

Inayon .navbar-fixed-bottomketdi.

<div class = "navbar navbar-natakder-nga-baba" > 
  ...
</div>

Estatiko nga ngato nga navbar

Mangaramid ti naan-anay a kalawa a navbar nga ag-scroll nga umadayo a kadua ti panid babaen ti pananginayon ti .navbar-static-top. Saan a kas iti .navbar-fixed-topklase, saanmo a kasapulan a baliwan ti aniaman a padding iti body.

<div klase = "navbar navbar-estatiko-nga-ngato" > 
  ...
</div>

Responsibo nga navbar

Tapno maipatungpal ti agruprupsa a sumungbat a navbar, baluten ti linaon ti navbarmo iti naglaon a div, .nav-collapse.collapse, ken inayon ti navbar toggle button, .btn-navbar.

< klase ti div = "navbar" > 
  <div klase = "navbar-a-uneg" > 
    <div klase = "laon" > 
 
      Ti <!-- Ti .btn-navbar ket naus-usar a kas ti toggle para iti narakrak a linaon ti navbar -->
      <a klase = "btn btn-navbar" datos-a-mangbalbaliw = "mang-collapse" datos-a-puntiria = ".nav-ag-collapse" >   
        <span klase = "ikono-bar" </span> 
        <span klase = "ikono-bar" </span> 
        <span klase = "ikono-bar" </span> 
      </a>
 
      <!-- Siguraduenyo a baybay-an ti brand sadiay ruar no kayatmo a maipakita -->
      <a class = "brand" href = "#" > Nagan ti proyekto </a>  
 
      <!-- Amin a kayatmo a mailemmeng iti 940px wenno basbassit, ikabilmo iti uneg ditoy -->
      <div class = "nav-panagtinnag" > 
        <!-- .nav, .navbar-panagbiruk, .navbar-porma, kdpy -->
      </div>
 
    </div>
  </div>
</div>

Nabaliktad a panagduduma

Baliwan ti langa ti navbar babaen ti pananginayon ti .navbar-inverse.

<div klase = "navbar navbar-baliktad" > 
  ...
</div>

Dagiti pagarigan

Ti maymaysa a pagarigan a naipakita a kas daytoy ket mabalin a maiparang iti ballasiw dagiti adu a panid.

<ul klase = "pigket ti tinapay" > 
  <li><a href = "#" > Pagtaengan </a> < klase ti span = "mangbingbingay" > / </span></li>   
  <li><a href = "#" > Biblioteka </a> < klase ti span = "mangbingbingay" > / </span></li>   
  <li klase = "aktibo" > Datos </li> 
</ul>

Pagalagadan a paginasion

Simple a pagination nga inspired ti Rdio, nasayaat para kadagiti apps ken resulta ti panagbirok. Ti dakkel a bloke ket narigat a malipatan, nalaka a maipadakkel, ken mangipaay kadagiti dadakkel a lugar ti panag-click.

<div klase = "paginasyon" > 
  <ul> nga
    <li><a href = "#" > Naudi </a></li> 
    <li><a href = "#" > 1 nga </a></li> 
    <li><a href = "#" > 2 nga </a></li> 
    <li><a href = "#" > 3 nga </a></li> 
    <li><a href = "#" > 4 ​​nga </a></li> 
    <li><a href = "#" > 5 nga </a></li> 
    <li><a href = "#" > Sumaruno </a></li> 
  </ul>
</div>

Dagiti Pagpilian

Baldado ken aktibo nga estado

Mabalin a ma-customize dagiti link para iti nadumaduma a kasasaad. Usaren .disabledpara kadagiti saan a mai-click a silpo ken .activetapno mangipakita ti agdama a panid.

<div klase = "paginasyon" > 
  <ul> nga
    <li klase = "nabaldado" ><a href = "#" > « </a></li> nga adda  
    <li klase = "aktibo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Mabalinmo nga opsional nga isukat dagiti aktibo wenno baldado nga angkla para kadagiti span tapno maikkat ti panagusar ti panagpidut bayat a pagtalinaeden dagiti nairanta nga estilo.

<div klase = "paginasyon" > 
  <ul> nga
    <li klase = "baldado" ><span> « </span></li> nga adda 
    <li klase = "aktibo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Dagiti Kadakkel

Magarbo a dakdakkel wenno basbassit a pagination? Inayon ti .pagination-large, .pagination-small, wenno .pagination-minipara kadagiti kanayonan a kadakkel.

<div class = "paginasion-paginasion-dakkel" > 
  <ul> nga
    ...
  </ul>
</div>
<div klase = "paginasyon" > 
  <ul> nga
    ...
  </ul>
</div>
<div class = "paginasion ti panagpagina-bassit" > 
  <ul> nga
    ...
  </ul>
</div>
<div class = "paginasion ti panagpagina-mini" > 
  <ul> nga
    ...
  </ul>
</div>

Panagtunos

Inayon ti maysa kadagiti dua nga opsional a klase tapno baliwan ti panagtunos dagiti silpo ti pagination: .pagination-centeredken .pagination-right.

<div class = "naisentro iti paginasion ti panid" > 
  ...
</div>

<div class = "paginasion ti panagpagina-kannigid" > 
  ...
</div>

Pager nga

Napardas a napalabas ken sumaganad a silpo para kadagiti simple a pannakaipatungpal ti pagination nga addaan iti nalawag a marka ken estilo. Nasayaat dayta para kadagiti simple a site a kas kadagiti blog wenno magasin.

Default nga pagarigan

Babaen ti default, ti pager ket mangisentro kadagiti silpo.

<ul klase = "pager" > 
  <li><a href = "#" > Naudi </a></li> 
  <li><a href = "#" > Sumaruno </a></li> 
</ul>

Naitunos dagiti silpo

Saan laeng a dayta, mabalinmo nga itunos ti tunggal silpo kadagiti sikigan:

<ul klase = "pager" > 
  <li klase = "naudi" > 
    <a href = "#" > ken dagiti dadduma pay. Nataengan </a> 
  </li>
  <li klase = "sumaruno" > 
    <a href = "#" > Baro nga → </a> 
  </li>
</ul>

Opsional a baldado nga estado

Dagiti silpo ti pager ket agus-usar pay ti sapasap .disableda klase ti utilidad manipud iti pagination.

<ul klase = "pager" > 
  <li class = "naudi a nabaldado" > 
    <a href = "#" > ken dagiti dadduma pay. Nataengan </a> 
  </li>
  ...
</ul>

Dagiti etiketa

Dagiti Badge

Nalaka a ma-collapsible

Para iti nalaka a pannakaipatungpal, dagiti etiketa ken badge ket basta agrupsa (babaen ti :emptyagpili ti CSS) no awan ti linaon nga adda iti uneg.

Bannuar nga yunit

Maysa a nalag-an, nalaka a maibagay a paset tapno maipakita dagiti kangrunaan a linaon iti site-mo. Nasayaat ti panagtrabahona kadagiti site a paglakuan ken nadagsen ti linaonna.

<div klase = "bannuar-yunit" > 
  <h1> Paulo </h1>
  <p> Tagline nga </p>
  <p> nga
    <a klase = "btn btn-pangruna a btn-dakkel" > 
      Ammuem ti ad-adu pay
    </a>
  </p>
</div>

Paulo ti panid

Maysa a simple a shell para iti maysa h1a maitutop nga espasyo ken segmento dagiti benneg ti linaon iti maysa a panid. Daytoy ket mabalinna nga usaren ti h1's default small, nga elemento a kas met laeng ti kaaduan a dadduma pay a paset (nga addaan kadagiti kanayonan nga estilo).

<div class = "paulo-ti-panid" > 
  <h1> Pagarigan ti ulo ti panid <small> Subteksto para iti ulo </small></h1>
</div>

Dagiti default a thumbnail

Babaen ti default, dagiti thumbnail ti Bootstrap ket nadisenio a mangipakita kadagiti naisilpo a ladawan nga addaan iti kabassitan a kasapulan a marka.

Mabalin a ma-customize unay

Babaen ti sangkabassit nga ekstra a marka, mabalin ti manginayon iti ania man a kita ti linaon ti HTML a kas dagiti paulo, parapo, wenno buton kadagiti thumbnail.

Apay nga agusar kadagiti thumbnail

Dagiti thumbnail (dati.media-grid agingga iti v1.4) ket nasayaat para kadagiti grid dagiti retrato wenno video, resulta ti panagsapul ti ladawan, produkto ti panagtagilako, portfolio, ken adu pay. Mabalin a link wenno static content dagitoy.

Simple, nalaka a maibagay a markup

Simple ti panangmarka iti thumbnail—a nga uladdaan iti aniaman a numero tili elemento ti kasapulan laeng. Daytoy ket super flexible met, a mangipalubos para iti ania man a kita ti linaon nga addaan laeng iti bassit nga ad-adu a markup a mangbalkot kadagiti linaonmo.

Agus-usar kadagiti kadakkel ti adigi ti grid

Maudi, ti paset dagiti thumbnail ket agus-usar kadagiti addan a klase ti sistema ti grid—kas ti .span2wenno.span3 —para iti panagtengngel kadagiti rukod ti thumbnail.

Panagmarka

Kas nadakamaten, nalag-an ken diretso ti kasapulan a markup para kadagiti thumbnail. Adda ditoy ti panangkita ti default a panagisaad para kadagiti naisilpo a ladawan :

<ul class = "dagiti bassit a ladawan" > 
  <li klase = "span4" > 
    <a href = "#" klase = "pabassit a ladawan" >  
      <img datos-src = "agtagikua.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Para iti kostumbre a linaon ti HTML kadagiti thumbnail, agbaliw bassit ti markup. Tapno maipalubos ti linaon ti lebel ti bloke iti sadinoman, isukatmi ti <a>para iti <div>kas iti kasta:

<ul class = "dagiti bassit a ladawan" > 
  <li klase = "span4" > 
    <div klase = "pabassit nga larawan" > 
      <img datos-src = "agtagikua.js/300x200" alt = "" >  
      <h3> Etiketa ti bassit a ladawan </h3>
      <p> Kapsion ti bassit a ladawan... </p>
    </div>
  </li>
  ...
</ul>

Ad-adu pay a pagarigan

Sukisoken amin a pagpiliam babaen kadagiti nadumaduma a klase ti grid a magun-odmo. Mabalin met a paglaoken ken pagtunos ti nadumaduma a kadakkel.

Default nga alerto

Balkoten ti ania man a teksto ken ti opsional a buton ti panangilaksid .alertpara iti kangrunaan a mensahe ti alerto ti pakdaar.

<div klase = "alerto" > 
  < tipo ti buton = "buton" klase = "serraan" data-dismiss = "alerto" > × </button> nga   
  <strong> Pakdaar! </strong> Best check yo self, saan ka nga nasayaat unay ti langam.
</div>

Dismiss dagiti buton

Dagiti Mobile Safari ken Mobile Opera a browser, malaksid ti data-dismiss="alert"attribute, ket agkasapulan ti maysa href="#"para iti pannakaikkat dagiti alerto no agus-usar ti maysa nga <a>etiketa.

<a href = "#" klase = "serraan" data-dismiss = "alerto" > × </a>   

Saan laeng a dayta, mabalinmo nga usaren ti <button>elemento nga addaan iti attribute ti datos, a pinilimi nga aramiden para kadagiti dokmi. No usarem ti <button>, masapul nga iramanmo type="button"wenno saan a mabalin nga isubmite dagiti pormam.

< tipo ti buton = "buton" klase = "serraan" data-dismiss = "alerto" > × </button> nga   

Ilaksid dagiti alerto babaen ti JavaScript

Usaren ti alerts jQuery plugin para iti napardas ken nalaka a pannakaikkat dagiti alerto.

Dagiti Pagpilian

Para kadagiti at-atiddog ​​a mensahe, paaduem ti padding iti ngato ken baba ti alert wrapper babaen ti pananginayon iti .alert-block.

<div class = "alerto-a-block ti alerto" > 
  < tipo ti buton = "buton" klase = "serraan" data-dismiss = "alerto" > × </button> nga   
  <h4> Pakdaar! </h4>
  Best check yo self, saan ka nga...
</div>

Dagiti alternatibo iti konteksto

Manginayon kadagiti opsional a klase tapno agbaliw ti konotasion ti maysa nga alerto.

Biddut wenno peggad

<div class = "alerto-a-biddut" > 
  ...
</div>

Balligi

<div class = "alerto-balligi ti alerto" > 
  ...
</div>

Impormasion

<div class = "impormasion ti alerto ti alerto" > 
  ...
</div>

Dagiti pagarigan ken markup

Kadawyan

Default a bara ti panagrang-ay nga addaan iti bertikal a panagrang-ay.

<div klase = "panagrang-ay" > 
  <div klase = "bar" estilo = " kalawa : 60 %; " ></div>   
</div>

Garitgaritan

Usaren ti gradient tapno makaaramid ti garitgaritan nga epekto. Saan a magun-od iti IE7-8.

<div class = "progreso nga progreso-striped" > 
  <div klase = "bar" estilo = " kalawa : 20 %; " ></div>   
</div>

Animado nga

Add .activeto .progress-stripedtapno ma-animate dagiti garit iti kannawan agingga iti kannigid. Saan a magun-od kadagiti amin a bersion ti IE.

<div class = "aktibo nga progreso-striped nga aktibo" > 
  <div klase = "bar" estilo = " kalawa : 40 %; " ></div>   
</div>

Naurnong

Ikabil ti adu a bara iti isu met laeng .progresstapno maitumpok dagitoy.

<div klase = "panagrang-ay" > 
  <div klase = "bar bar-balligi" estilo = " kalawa : 35 %; " ></div>   
  <div klase = "bar-bar-pakdaar" estilo = " kalawa : 20 %; " ></div>   
  <div klase = "bar bar-peggad" estilo = " kalawa : 10 %; " ></div>   
</div>

Dagiti Pagpilian

Dagiti kanayonan a kolor

Dagiti bara ti panagrang-ay ket agus-usar kadagiti sumagmamano kadagiti isu met laeng a buton ken dagiti klase ti alerto para kadagiti agtultuloy nga estilo.

<div class = "impormasion ti panagrang-ay ti panagrang-ay" > 
  <div klase = "bar" estilo = " kalawa : 20 % " ></div>   
</div>
<div class = "progreso nga progreso-balligi" > 
  <div klase = "bar" estilo = " kalawa : 40 % " ></div>   
</div>
<div class = "pakdaar ti panagrang-ay ti panagrang-ay" > 
  <div klase = "bar" estilo = " kalawa : 60 % " ></div>   
</div>
<div class = "peggad ti panagrang-ay ti panagrang-ay" > 
  <div klase = "bar" estilo = " kalawa : 80 % " ></div>   
</div>

Dagiti garitgaritan a bara

Kas kadagiti solido a kolor, addaankami kadagiti nadumaduma a garitgaritan a progress bar.

<div class = "progreso nga progreso-info progreso-striped" > 
  <div klase = "bar" estilo = " kalawa : 20 % " ></div>   
</div>
<div class = "progreso nga progreso-balligi nga progreso-striped" > 
  <div klase = "bar" estilo = " kalawa : 40 % " ></div>   
</div>
<div class = "progreso nga progreso-pakdaar progreso-striped" > 
  <div klase = "bar" estilo = " kalawa : 60 % " ></div>   
</div>
<div class = "progreso nga progreso-peggad progreso-striped" > 
  <div klase = "bar" estilo = " kalawa : 80 % " ></div>   
</div>

Suporta ti browser

Dagiti bara ti panagrang-ay ket agus-usar kadagiti CSS3 a panagrang-ay, dagiti panagbalbaliw, ken dagiti animasion tapno magun-od amin dagiti epektoda. Dagitoy a tampok ket saan a nasuportaran iti IE7-9 wenno dagiti daan a bersion ti Firefox.

Dagiti bersion a nasapsapa ngem ti Internet Explorer 10 ken Opera 12 ket saan a mangsuporta kadagiti animasion.

Dagiti abstrakto nga estilo ti banag para iti panagbangon kadagiti nadumaduma a kita ti paset (kas dagiti komento ti blog, dagiti Tweet, kdpy) a mangitampok ti kannigid- wenno kannawan-a-naitunos a ladawan a kadua ti tekstual a linaon.

Default nga pagarigan

Ti default a media ket mangipalubos ti panagtaytayab ti maysa a banag ti media (dagiti ladawan, video, audio) iti kannigid wenno kannawan ti maysa a bloke ti linaon.

Paulo ti media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Paulo ti media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga ekselerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Paulo ti media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin nga komodo. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

<div klase = "media" > 
  <a klase = "guyod-kannigid" href = "#" >  
    <img klase = "media-a-banag" datos-src = "agtagikua.js/64x64" >  
  </a>
  <div klase = "bagi-ti-media" > 
    <h4 class = "paulo ti media" > Paulo ti media </h4> 
    ...
 
    <!-- Naisanglad a banag ti media -->
    <div klase = "media" > 
      ...
    </div>
  </div>
</div>

Listaan ​​ti media

Iti sangkabassit nga ekstra a marka, mabalinmo nga usaren ti media iti uneg ti listaan ​​(mausar para kadagiti thread ti komento wenno dagiti listaan ​​dagiti artikulo).

<ul klase = "listaan-ti-media" > 
  <li klase = "media" > 
    <a klase = "guyod-kannigid" href = "#" >  
      <img klase = "media-a-banag" datos-src = "agtagikua.js/64x64" >  
    </a>
    <div klase = "bagi-ti-media" > 
      <h4 class = "paulo ti media" > Paulo ti media </h4> 
      ...
 
      <!-- Naisanglad a banag ti media -->
      <div klase = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Dagiti Bubon

Usaren ti bubon a kas simple nga epekto iti maysa nga elemento tapno maited daytoy iti inset nga epekto.

<div klase = "nasayaat" > 
  ...
</div>

Opsional a klase

Kontrol ti padding ken nagtimbukel a suli nga addaan iti dua nga opsional a klase ti modifier.

<div class = "nasayaat a nasayaat-dakkel" > 
  ...
</div>

<div class = "nasayaat a nasayaat-bassit" > 
  ...
</div>

Iserram ti ikono

Usaren ti generic close icon para iti panangilaksid ti linaon a kas dagiti modal ken alerto.

< klase ti buton = "serraan" > × </button> nga 

Dagiti alikamen ti iOS ket agkasapulan ti href="#"para kadagiti pasamak ti panag-click no kaykayatmo nga usaren ti angkla.

<a klase = "serraan" href = "#" > &panawen; </a>  

Dagiti klase ti katulongan

Simple, naipamaysa a klase para kadagiti babassit a display wenno behavior tweaks.

.guyod-kannigid

Float ti maysa nga elemento iti kannigid

klase = "guyod-kannigid".

. guyoden - kannigid { .
  float : kannigid ;
} nga

.guyod-kannigid

Float ti maysa nga elemento iti kannawan

klase = "guyoden-kannigid".

. guyoden - kannawan { .
  float : kannawan ;
} nga

.naulimek

Baliwan ti kolor ti maysa nga elemento iti#999

klase = "naulimek".

. naulimek { .
  kolor : # 999 nga; 
} nga

.nalawag nga ilinteg

I-clear ti floatiti aniaman nga elemento

klase = "panangdalus" .

. clearfix nga { .
  * panag-zoom : 1 ; 
  &: sakbay ti , .
  &: kalpasan ti {
    display : lamisaan ;
    linaon : "" ; 
  } nga
  &: kalpasan ti {
    nalawag : agpada ;
  } nga
} nga