Misali

Mai iya canzawa, menu na mahallin don nuna jerin hanyoyin haɗin gwiwa. An yi hulɗa tare da zazzage kayan aikin JavaScript .

<ul class = "sauke-menu" rawar = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aiki </a></li>  
  <li><a tabindex = "-1" href = "#" > Wani aiki </a></li>  
  <li><a tabindex = "-1" href = "#" > Wani abu kuma a nan </a></li>  
  <li class = "mai rarrabawa" </li> 
  <li><a tabindex = "-1" href = "#" > Rabuwar hanyar haɗin gwiwa </a></li>  
</ul>

Alamar alama

Duba kawai menu na zazzagewa, ga HTML ɗin da ake buƙata. Kuna buƙatar kunsa maɓallin zazzagewa da menu na zazzagewa a cikin .dropdown, ko wani ɓangaren da ke bayyana position: relative;. Sa'an nan kawai ƙirƙirar menu.

<div class = "saukarwa" > 
  <!-- Hanyar haɗi ko maɓalli don kunna zazzagewa -->
  <ul class = "zaɓi-menu" rawar = "menu" aria-labeledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aiki </a></li>  
    <li><a tabindex = "-1" href = "#" > Wani aiki </a></li>  
    <li><a tabindex = "-1" href = "#" > Wani abu kuma a nan </a></li>  
    <li class = "mai rarrabawa" </li> 
    <li><a tabindex = "-1" href = "#" > Rabuwar hanyar haɗin gwiwa </a></li>  
  </ul>
</div>

Zabuka

Daidaita menus zuwa dama kuma ƙara sun haɗa da ƙarin matakan zaɓuka.

Daidaita menus

Ƙara .pull-rightzuwa .dropdown-menudama a daidaita menu na zazzagewa.

<ul class = "zaɓi-menu pull-right" rawar = "menu" aria-labeledby = "dLabel" >   
  ...
</ul>

Zaɓuɓɓukan menu na kashe

Ƙara .disabledzuwa <li>cikin zazzagewar don kashe hanyar haɗin.

<ul class = "sauke-menu" rawar = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Haɗin kai na yau da kullun </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > An kashe hanyar haɗin gwiwa </a></li>   
  <li><a tabindex = "-1" href = "#" > Wani hanyar haɗi </a></li>  
</ul>

Sub menus akan zazzagewa

Ƙara ƙarin matakin menus na zazzagewa, yana bayyana akan shawagi kamar na OS X, tare da wasu ƙarin ƙari mai sauƙi. Ƙara .dropdown-submenuzuwa kowane lia cikin jerin zaɓuka na yanzu don salo ta atomatik.

<ul class = "zaɓi-menu" rawar = "menu" aria-labeledby = "dLabel" >   
  ...
  <li class = "zaɓi-submenu" > 
    <a tabindex = "-1" href = "#" > Ƙarin zaɓuɓɓuka </a>  
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </li>
</ul>

Misalai

Zaɓuɓɓuka na asali guda biyu, tare da ƙarin takamaiman bambance-bambancen guda biyu.

Ƙungiyar maɓalli guda ɗaya

Kunna jerin maɓalli tare da .btnciki .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Hagu </button> 
  <button class = "btn" > Tsakiya </button> 
  <button class = "btn" > Dama </button> 
</div>

Ƙungiyoyin maɓalli da yawa

Haɗa saiti na <div class="btn-group">cikin wani <div class="btn-toolbar">don ƙarin hadaddun abubuwa.

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

Ƙungiyoyin maɓalli na tsaye

Yi saitin maɓalli ya bayyana a tsaye a tsaye maimakon a kwance.

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

Akwatin akwati da dandanon rediyo

Ƙungiyoyin maɓalli kuma za su iya aiki azaman rediyo, inda maɓalli ɗaya kawai zai iya aiki, ko akwatunan rajista, inda kowane adadin maɓalli zai iya aiki. Duba takardun JavaScript don haka.

Zazzagewa a cikin ƙungiyoyin maɓalli

A kula!.btn-groupMaɓallai masu zazzagewa dole ne a nannade su daban-daban a cikin nasu .btn-toolbardon daidaitawa.

Overview da misalai

Yi amfani da kowane maballin don kunna menu na zazzagewa ta hanyar sanya shi a cikin .btn-groupkuma samar da alamar menu mai dacewa.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "zazzagewar" href = "#" >   
    Aiki
    <span class = "kulawa" > </span> 
  </a>
  <ul class = "zazzage-menu" > 
    <!-- menu na zazzage mahaɗan -->
  </ul>
</div>

Yana aiki tare da duk girman maɓalli

Maɓallin maɓalli suna aiki a kowane girman: .btn-large, .btn-small, ko .btn-mini.

Yana buƙatar JavaScript

Maɓallin zazzagewa yana buƙatar kayan aikin saukarwa na Bootstrap don aiki.

A wasu lokuta-kamar wayar hannu-manufofin zaɓuka za su shimfiɗa a waje da wurin kallo. Kuna buƙatar warware jeri da hannu ko tare da JavaScript na al'ada.

Zazzage maballin Raba

Gina kan salon rukunin maɓallin maɓallin da alama, za mu iya ƙirƙirar maɓallin tsaga cikin sauƙi. Maɓallai masu tsaga suna fasalta daidaitaccen aiki a hagu da jujjuyawar saukewa a dama tare da mahallin mahallin.

<div class = "btn-group" > 
  <button class = "btn" > Aiki </button> 
  < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
    <span class = "kulawa" > </span> 
  </button>
  <ul class = "zazzage-menu" > 
    <!-- menu na zazzage mahaɗan -->
  </ul>
</div>

Girman girma

Yi amfani da ƙarin azuzuwan maɓalli .btn-mini, .btn-small, ko .btn-largedon ƙima.

<div class = "btn-group" > 
  < class class = "btn btn-mini" > Aiki </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "saukarwa" >  
    <span class = "kulawa" > </span> 
  </button>
  <ul class = "zazzage-menu" > 
    <!-- menu na zazzage mahaɗan -->
  </ul>
</div>

Zazzage menu

Hakanan za'a iya jujjuya menu na saukarwa daga ƙasa zuwa sama ta ƙara aji ɗaya ga iyayen .dropdown-menu. Zai jujjuya alkiblar .caretkuma ya sake sanya menu ɗin kansa don motsawa daga ƙasa zuwa sama maimakon sama zuwa ƙasa.

<div class = "btn-group dropup" > 
  <button class = "btn" > Sauke </button> 
  < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
    <span class = "kulawa" > </span> 
  </button>
  <ul class = "zazzage-menu" > 
    <!-- menu na zazzage mahaɗan -->
  </ul>
</div>

Matsaloli masu nauyi mara nauyi Alama iri ɗaya, nau'o'i daban-daban

Duk abubuwan haɗin nav anan-shafukan, kwaya, da jeri - suna raba alamar tushe iri ɗaya da salo ta cikin .navaji.

Shafukan asali

Ɗauki hanyar <ul>haɗin kai na yau da kullun kuma ƙara .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aiki" > 
    <a href = "#" > Gida </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kwayoyin asali

Ɗauki HTML iri ɗaya, amma amfani .nav-pillsmaimakon:

<ul class = "nav nav-pills" > 
  <li class = "aiki" > 
    <a href = "#" > Gida </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Jihar naƙasassu

Ga kowane ɓangaren nav (shafukan, kwayoyi, ko jeri), ƙara .disableddon hanyoyin haɗin launin toka kuma babu tasiri . Hanyoyin haɗi za su kasance masu dannawa, duk da haka, sai dai idan kun cire hrefsifa. A madadin, kuna iya aiwatar da JavaScript na al'ada don hana waɗannan dannawa.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Gida </a></li>  
  ...
</ul>

Daidaita bangaren

Don daidaita hanyoyin haɗin yanar gizo, yi amfani da azuzuwan .pull-leftmasu amfani. .pull-rightDuk nau'o'in biyu za su ƙara tudun ruwa na CSS a cikin ƙayyadadden shugabanci.

Mai iya tarawa

Kamar yadda shafuka da kwayoyi suke kwance ta tsohuwa, kawai ƙara aji na biyu, .nav-stacked, don sa su bayyana a tsaye.

Shafukan da aka tara

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

Kwayoyin da aka tara

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

Zazzagewa

Ƙara menu na zaɓuka tare da ɗan ƙarin HTML da abubuwan da aka sauke JavaScript plugin .

Shafukan da zazzagewa

<ul class = "nav nav-tabs" > 
  <li class = "saukarwa" > 
    <a class = "sauke-saukarwa" 
       data-toggle = "saukarwa"
       href = "#" >
        Zazzagewa
        <b class = "kulawa" </b> 
      </a>
    <ul class = "zazzage-menu" > 
      <!-- hanyoyin haɗin gwiwa -->
    </ul>
  </li>
</ul>

Kwayoyin cuta masu zazzagewa

<ul class = "nav nav-pills" > 
  <li class = "saukarwa" > 
    <a class = "sauke-saukarwa" 
       data-toggle = "saukarwa"
       href = "#" >
        Zazzagewa
        <b class = "kulawa" </b> 
      </a>
    <ul class = "zazzage-menu" > 
      <!-- hanyoyin haɗin gwiwa -->
    </ul>
  </li>
</ul>

Jerin Nav

Hanya mai sauƙi da sauƙi don gina ƙungiyoyin hanyoyin haɗin yanar gizo tare da kanun labarai na zaɓi. An fi amfani da su a cikin labarun gefe kamar mai nema a cikin OS X.

Misalin jerin nav

Ɗauki jerin hanyoyin haɗin kuma ƙara class="nav nav-list":

<ul class = "nav-list" > 
  <li class = "nav-header" > Jerin taken </li> 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li><a href = "#" > Laburare </a></li> 
  ...
</ul>

LuraDon gida a cikin jerin nav, haɗa class="nav nav-list"kan kowane gida mai gida <ul>.

Masu rarraba a kwance

Ƙara mai raba kwance ta hanyar ƙirƙirar abin jeri mara komai tare da aji .divider, kamar haka:

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

Tabbable nav

Kawo shafukanku zuwa rai tare da sauƙi mai sauƙi don juyawa tsakanin abun ciki ta shafuka. Bootstrap yana haɗa shafuka masu yiwuwa a cikin salo huɗu: saman (tsoho), dama, ƙasa, da hagu.

Tabbataccen misali

Don yin shafuka masu ma'ana, ƙirƙiri .tab-paneID na musamman ga kowane shafin kuma kunsa su a cikin .tab-content.

<div class = "tabbable" > <!-- Ana buƙata kawai don shafukan hagu/dama -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sashe na 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sashe na 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ina cikin Sashe na 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, Ina cikin Sashe na 2. </p>
    </div>
  </div>
</div>

Fade a cikin shafuka

Don sanya shafuka su shuɗe, ƙara .fadezuwa kowane .tab-pane.

Yana buƙatar plugin jQuery

Dukkan shafukan da za a iya amfani da su ana yin su ta hanyar jQuery plugin ɗin mu mai sauƙi. Kara karantawa game da yadda ake kawo shafuka masu shafi zuwa rayuwa a shafin JavaScript .

Tabable a kowace hanya

Tabs a kasa

Juya tsarin HTML ɗin kuma ƙara aji don sanya shafuka a ƙasa.

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

Shafukan hagu

Musanya ajin don sanya shafuka a hagu.

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

Shafukan dama

Musanya ajin don sanya shafuka a dama.

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

Navbar na asali

Don farawa, navbars suna tsaye (ba a daidaita su zuwa sama ba) kuma sun haɗa da goyan bayan sunan aikin da kewayawa na asali. Sanya ɗaya a ko'ina cikin wani .container, wanda ke saita faɗin rukunin yanar gizonku da abun ciki.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Take </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Gida </a></li>  
      <li><a href = "#" > mahada </a></li> 
      <li><a href = "#" > mahada </a></li> 
    </ul>
  </div>
</div>

Abubuwan Navbar

Alamar

Hanya mai sauƙi don nuna alamar ku ko sunan aikin kawai yana buƙatar alamar anga.

<a class = "brand" href = "#" > Sunan aikin </a>  

Hanyoyin haɗi na Nav

Abubuwan Nav suna da sauƙi don ƙarawa ta lissafin da ba a ba da oda ba.

<ul class = "nav" > 
  <li class = "aiki" > 
    <a href = "#" > Gida </a> 
  </li>
  <li><a href = "#" > mahada </a></li> 
  <li><a href = "#" > mahada </a></li> 
</ul>

Kuna iya ƙara masu rarraba cikin sauƙi zuwa hanyoyin haɗin yanar gizonku tare da abin jeri mara komai da aji mai sauƙi. Kawai ƙara wannan tsakanin hanyoyin haɗi:

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

Siffofin

Don salo da kyau da sanya fom a cikin mashigar kewayawa, ƙara darussan da suka dace kamar yadda aka nuna a ƙasa. Don sigar tsoho, haɗa .navbar-formda ko dai .pull-leftko .pull-rightdaidaita shi da kyau.

< class class = "navbar-form ja-hagu" > 
  < nau'in shigarwa = "rubutu" aji = "span2" >  
  <button type = "submit" class = "btn" > Aika < /button>  
</form>

Binciken tsari

Don ƙarin sigar bincike na musamman, ƙara .navbar-searchzuwa formda .search-queryzuwa shigarwar don salo na musamman a cikin navbar.

< class class = "navbar-search ja-hagu" > 
  < nau'in shigarwa = "rubutu" aji = "search-query" mai sanya wuri = "Bincike" >   
</form>

Daidaita bangaren

Daidaita mahaɗin kewayawa, hanyar bincike, ko rubutu, yi amfani da azuzuwan masu amfani .pull-leftko . .pull-rightDuk nau'o'in biyu za su ƙara tudun ruwa na CSS a cikin ƙayyadadden shugabanci.

Amfani da dropdowns

Ƙara zazzagewa da saukarwa zuwa nav tare da ɗan alamar alama da abubuwan da aka sauke JavaScript plugin .

<ul class = "nav" > 
  <li class = "saukarwa" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "saukarwa" >   
      Asusu
      <b class = "kulawa" </b> 
    </a>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </li>
</ul>

Ziyarci takaddun saukarwa na JavaScript don ƙarin alama da bayani kan kiran zazzagewa.

Rubutu

Kunna kirtani na rubutu a cikin kashi tare da .navbar-text, yawanci akan <p>tambari don jagora mai kyau da launi.

Bambance-bambancen nuni na zaɓi

Gyara mashigin navbar zuwa sama ko kasa na wurin kallo tare da ƙarin aji akan babban div, .navbar.

Kafaffen zuwa sama

Ƙara .navbar-fixed-topkuma ku tuna don asusu don ɓoye wurin da ke ƙarƙashinsa ta ƙara aƙalla 40px paddingzuwa <body>. Tabbatar ƙara wannan bayan ainihin Bootstrap CSS kuma kafin zaɓin CSS mai amsawa.

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

Kafaffen zuwa kasa

Ƙara .navbar-fixed-bottommaimakon.

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

A tsaye saman navbar

Ƙirƙiri cikakken mashigin navbar mai faɗi wanda ke gungurawa tare da shafi ta ƙara .navbar-static-top. Ba kamar .navbar-fixed-topajin ba, ba kwa buƙatar canza kowane padding akan body.

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

Navbar mai amsawa

Don aiwatar da navbar mai amsawa mai rugujewa, kunsa abun cikin navbar ɗinku a cikin div mai ɗauke da, .nav-collapse.collapse, sannan ƙara maɓallin kewayawa navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kwantena" > 
 
      <!-- .btn-navbar ana amfani dashi azaman juyawa don rugujewar abun cikin navbar -->
      <a class = "btn btn-navbar" data-toggle = "rushe" data-target = ".nav-collapse" >   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <!-- Tabbatar da barin alamar a can idan kuna son nunawa -->
      <a class = "brand" href = "#" > Sunan aikin </a>  
 
      <!-- Duk abin da kuke so a ɓoye a 940px ko ƙasa da haka, sanya cikin nan -->
      <div class = "nav-collapse rushewa" > 
        <!-- .nav, .navbar-search, .navbar-form, da sauransu -->
      </div>
 
    </div>
  </div>
</div>

Jujjuyawar juzu'i

Gyara kamannin navbar ta ƙara .navbar-inverse.

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

Misalai

Misali guda daya da aka nuna kamar yadda za'a iya nunawa a cikin shafuka da yawa.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Gida </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Laburare </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Bayanai </li> 
</ul>

Standard pagination

Sauƙaƙan rubutun da aka yi wahayi daga Rdio, mai girma don ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > Gaba </a></li> 
  </ul>
</div>

Zabuka

Jihohi naƙasassu da aiki

Ana iya daidaita hanyoyin haɗin gwiwa don yanayi daban-daban. Yi amfani .disabledda hanyoyin haɗin da ba za a iya dannawa ba kuma .activedon nuna shafin na yanzu.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Kuna iya da zaɓin musanya anka mai aiki ko naƙasasshe don tazara don cire ayyukan dannawa yayin riƙe da salon da aka yi niyya.

<div class = "pagination" > 
  <ul>
    <li class = "an kashe" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Girman girma

Zaki fi girma ko ƙarami? Ƙara .pagination-large, .pagination-small, ko .pagination-minidon ƙarin girma.

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

Daidaitawa

Ƙara ɗaya daga cikin azuzuwan zaɓi biyu don canza daidaita hanyoyin haɗin yanar gizo: .pagination-centeredda .pagination-right.

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

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

Pager

Hanyoyi masu sauri na baya da na gaba don aiwatar da fage mai sauƙi tare da alamar haske da salo. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.

Misali na asali

Ta hanyar tsoho, shafin yanar gizon yana haɗin haɗin kai.

<ul class = "pager" > 
  <li><a href = "#" > Gaba </a> </li> 
  <li><a href = "#" > Gaba </a></li> 
</ul>

Hanyoyin haɗin kai masu daidaitawa

A madadin, zaku iya daidaita kowace hanyar haɗin gwiwa zuwa ɓangarorin:

<ul class = "pager" > 
  <li class = "na baya" > 
    <a href = "#" > ← Tsoho </a> 
  </li>
  <li class = "na gaba" > 
    <a href = "#" > Sabo → </a> 
  </li>
</ul>

Yanayin naƙasasshen zaɓi

Hanyoyin haɗin yanar gizon Pager kuma suna amfani da .disabledajin mai amfani na gaba ɗaya daga rubutun.

<ul class = "pager" > 
  <li class = "an kashe a baya" > 
    <a href = "#" > ← Tsoho </a> 
  </li>
  ...
</ul>

Lakabi

Baji

Mai sauƙin rugujewa

Don aiwatarwa cikin sauƙi, alamomi da baji za su ruguje kawai (ta hanyar :emptyzaɓin CSS) lokacin da babu abun ciki a ciki.

Jarumi naúrar

Abu mai sauƙi, sassauƙa don nuna mahimman abun ciki akan rukunin yanar gizonku. Yana aiki da kyau akan tallace-tallace da shafuka masu nauyi.

<div class = "jarumin jarumta" > 
  <h1> Jagora </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Ƙara koyo
    </a>
  </p>
</div>

taken shafi

Sauƙaƙan harsashi don h1fitar da sarari yadda ya kamata da yanki sassan abun ciki a shafi. Yana iya amfani da h1tsohowar small, element da sauran sauran abubuwan haɗin gwiwa (tare da ƙarin salo).

<div class = "shafi-header" > 
  <h1> Misalin taken shafi <karamin> Rubutu don kai </small></h1>
</div>

Tsoffin hotuna

Ta hanyar tsoho, an tsara thumbnails na Bootstrap don nuna hotunan da aka haɗe tare da ƙarancin alamar da ake buƙata.

Mai iya daidaitawa sosai

Tare da ɗan ƙarin alamar alama, yana yiwuwa a ƙara kowane nau'in abun ciki na HTML kamar kanun labarai, sakin layi, ko maɓalli a cikin ƙananan hotuna.

Me yasa ake amfani da thumbnails

Tambayoyi (a baya .media-gridhar zuwa v1.4) suna da kyau don grid na hotuna ko bidiyo, sakamakon binciken hoto, samfuran tallace-tallace, fayiloli, da ƙari mai yawa. Suna iya zama mahaɗi ko abun ciki na tsaye.

Sauƙaƙe, alama mai sassauƙa

Alamar thumbnail abu ne mai sauƙi - ultare da kowane adadin liabubuwa shine duk abin da ake buƙata. Hakanan yana da sauƙin sassauƙa, yana ba da damar kowane nau'in abun ciki tare da ɗan ƙara alama don naɗe abubuwan ku.

Yana amfani da girman ginshiƙin grid

A ƙarshe, ɓangaren takaitaccen siffofi yana amfani da azuzuwan tsarin grid-kamar .span2ko.span3 -don sarrafa girman ɗan yatsa.

Alamar alama

Kamar yadda aka ambata a baya, alamar da ake buƙata don thumbnails yana da haske kuma mai sauƙi. Anan kalli saitunan tsoho don hotuna masu alaƙa :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "mai riƙe.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Don abun ciki na HTML na al'ada a cikin ƙananan hotuna, alamar tana canzawa kaɗan. Don ba da izinin toshe abun ciki a ko'ina, muna musanya shi <a>don <div>kamar haka:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "mai riƙe.js/300x200" alt = "" >  
      <h3> Alamar ɗan yatsa </h3>
      <p> Takardun yatsa... </p>
    </div>
  </li>
  ...
</ul>

Karin misalai

Bincika duk zaɓuɓɓukanku tare da nau'ikan grid iri-iri da ke akwai a gare ku. Hakanan zaka iya haɗawa da daidaita girma dabam dabam.

Tsohuwar faɗakarwa

Rufe kowane rubutu da maɓallin korar zaɓi .alertdon ainihin saƙon faɗakarwar faɗakarwa.

<div class = "jijjiga" > 
  < nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>   
  <strong> Gargadi! Mafi kyawun duba yo kai, ba ka da kyau sosai.
</div>

Korar maɓallan

Mobile Safari da Mobile Opera browsers, ban da data-dismiss="alert"sifa, suna buƙatar href="#"korar faɗakarwa yayin amfani da <a>alamar.

<a href = "#" class = "kusa" data-dismiss = "jijjiga" > × </a>   

A madadin, zaku iya amfani da wani <button>abu mai sifa na bayanai, wanda muka zaɓi yi don takaddun mu. Lokacin amfani da <button>, dole ne ku haɗa type="button"ko fom ɗin ku bazai ƙaddamar ba.

< nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>   

Korar faɗakarwa ta JavaScript

Yi amfani da kayan aikin jQuery faɗakarwa don saurin korar faɗakarwa.

Zabuka

Don tsayin saƙonni, ƙara madaidaicin saman da kasan abin rufewar faɗakarwa ta ƙara .alert-block.

<div class = "jijjiga-block" > 
  < nau'in maballin = "button" class = "rufe" data-dismiss = "jijjiga" > × </button>   
  <h4> Gargadi! </h4> ku
  Mafi kyawun bincika kan ku, ba ku ...
</div>

Madadin yanayi

Ƙara azuzuwan zaɓi don canza ma'anar faɗakarwa.

Kuskure ko haɗari

<div class = "kuskuren faɗakarwa" > 
  ...
</div>

Nasara

<div class = "jijjiga faɗakarwa-nasara" > 
  ...
</div>

Bayani

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

Misalai da alama

Na asali

Tsohuwar mashaya ci gaba tare da gradient a tsaye.

<div class = "ci gaba" > 
  <div class = "bar" style = " nisa : 60 %; " ></ div>   
</div>

Tatsi

Yana amfani da gradient don ƙirƙirar tasirin tsiri. Babu a cikin IE7-8.

<div class = "ci gaban ci gaba-raguwa" > 
  <div class = "bar" style = " nisa : 20 %; " ></ div>   
</div>

Mai rairayi

Ƙara .activezuwa .progress-stripeddon raya ratsi dama zuwa hagu. Babu samuwa a cikin duk nau'ikan IE.

<div class = "ci gaba-gaba mai aiki" > 
  <div class = "bar" style = " nisa : 40 %; " ></ div>   
</div>

Tari

Sanya sanduna da yawa cikin guda ɗaya .progressdon tara su.

<div class = "ci gaba" > 
  <div class = "bar bar-success" style = " nisa : 35 %; " > </div>   
  <div class = "bar-gargadi" style = " nisa : 20 %; " > </div>   
  <div class = "bar-danger" style = " nisa : 10 %; " > </div>   
</div>

Zabuka

Ƙarin launuka

Sandunan ci gaba suna amfani da wasu maɓalli iri ɗaya da azuzuwan faɗakarwa don daidaitattun salo.

<div class = "ci gaban-info" > 
  <div class = "bar" style = " nisa : 20 % " ></ div>   
</div>
<div class = "ci gaban ci gaba-nasara" > 
  <div class = "bar" style = " nisa : 40 % " ></ div>   
</div>
<div class = "gargadin ci gaba-gaba" > 
  <div class = "bar" style = " nisa : 60 % " ></ div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " nisa : 80 % " ></ div>   
</div>

Sanduna masu tsiri

Kama da m launuka, muna da bambance bambancen sanduna ci gaba.

<div class = "ci gaban cigaba-info progress-striped" > 
  <div class = "bar" style = " nisa : 20 % " ></ div>   
</div>
<div class = "ci gaba-ci gaba-nasara-ci gaba" > 
  <div class = "bar" style = " nisa : 40 % " ></ div>   
</div>
<div class = "ci gaba-gaba-gargadi-ci gaba-raguwa" > 
  <div class = "bar" style = " nisa : 60 % " ></ div>   
</div>
<div class = "ci gaban ci gaba-danger progress-striped" > 
  <div class = "bar" style = " nisa : 80 % " ></ div>   
</div>

Tallafin mai lilo

Sandunan ci gaba suna amfani da gradients CSS3, canji, da rayarwa don cimma duk tasirin su. Ba a tallafawa waɗannan fasalulluka a cikin IE7-9 ko tsofaffin nau'ikan Firefox.

Siffofin da suka wuce Internet Explorer 10 da Opera 12 ba sa goyan bayan rayarwa.

Salon abubuwa masu ƙima don gina nau'ikan abubuwa daban-daban (kamar sharhin blog, Tweets, da sauransu) waɗanda ke nuna hoton hagu ko dama tare da abun ciki na rubutu.

Misali na asali

Tsoffin kafofin watsa labarai suna ba da damar yawo wani abu mai jarida (hotuna, bidiyo, sauti) zuwa hagu ko dama na toshewar abun ciki.

Jagoran watsa labarai

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

Jagoran watsa labarai

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

Jagoran watsa labarai

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

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "mai riƙe.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "kadin-watsa labarai" > Taken mai jarida </h4> 
    ...
 
    <!-- Abun jarida mai gida -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Jerin watsa labarai

Tare da ɗan ƙarin alamar alama, zaku iya amfani da kafofin watsa labarai a cikin jeri (mai amfani ga zaren sharhi ko jerin labarai).

<ul class = "jerin watsa labarai" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "mai riƙe.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "kadin-watsa labarai" > Taken mai jarida </h4> 
      ...
 
      <!-- Abun jarida mai gida -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Yi amfani da rijiyar azaman tasiri mai sauƙi akan wani abu don ba shi tasirin sa.

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

Zabin azuzuwan

Sarrafa madaidaicin sasanninta da sasanninta tare da azuzuwan gyare-gyare na zaɓi biyu.

<div class = "babban girma" > 
  ...
</div>

<div class = "da kyau-kanana" > 
  ...
</div>

Rufe gumaka

Yi amfani da madaidaicin gunkin kusa don korar abun ciki kamar tsari da faɗakarwa.

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

Na'urorin iOS suna buƙatar href="#"abubuwan da suka faru don danna idan kun fi son amfani da anga.

<a class = "close" href = "#" > & lokuta; </a>  

Azuzuwan masu taimako

Sauƙaƙe, azuzuwan mayar da hankali don ƙaramin nuni ko tweaks ɗabi'a.

.ja-hagu

Taso kan wani kashi hagu

class = "ja-hagu"

. ja - hagu {
  yawo : hagu ;
}

.ja-dama

Taso kan wani abu dama

class = "ja-dama"

. ja - dama {
  yawo : dama ;
}

.an yi shiru

Canja launin kashi zuwa#999

class = "batattu"

. shiru {
  launi : #999; 
}

.bayyanai

Share floatkan kowane kashi

class = "clearfix"

. share gyara {
  * zuƙowa : 1 ; 
  &: kafin ,
  &: bayan {
    nuni : tebur ;
    abun ciki : "" ; 
  }
  &: bayan {
    bayyananne : biyu ;
  }
}