Ƙungiyoyin maɓalli

Yi amfani da ƙungiyoyin maɓalli don haɗa maɓallan maɓalli da yawa tare azaman abun haɗaɗɗiya ɗaya. Gina su da jerin abubuwa <a>ko <button>abubuwa.

Mafi kyawun ayyuka

Muna ba da shawarar jagororin masu zuwa don amfani da ƙungiyoyin maɓalli da sanduna:

• Yi amfani da kashi ɗaya koyaushe a cikin rukunin maɓalli ɗaya, <a>ko <button>.
• Kar a haxa maɓallan launuka daban-daban a cikin rukunin maɓalli ɗaya.
• Yi amfani da gumaka baya ga ko maimakon rubutu, amma tabbas sun haɗa da alt da rubutun take a inda ya dace.

Ƙungiyoyin maɓalli masu alaƙa tare da zazzagewa (duba ƙasa) yakamata a kira su daban kuma koyaushe suna haɗa da zazzagewa don nuna halayen da aka yi niyya.

Misali na asali

Ga yadda HTML ke neman daidaitaccen rukunin maɓalli da aka gina tare da maɓallan alamar anga:

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

Misalin Toolbar

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>

Akwatin ajiya 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.

Samu javascript »

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.

Misali alama

Hakazalika da ƙungiyar maɓalli, alamar mu tana amfani da alamar maɓalli na yau da kullun, amma tare da ɗimbin ƙari don daidaita salo da goyan bayan jigon jQuery plugin na Bootstrap.

<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. Girman maɓallin ku zuwa .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.

Overview da misalai

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.

Girman girma

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

<div class = "btn-group" > 
  ...
  <ul class = "zaɓi-menu pull-right" > 
    <!-- menu na zazzage mahaɗan -->
  </ul>
</div>

Misali alama

Muna faɗaɗa maɓalli na al'ada don samar da aikin maɓalli na biyu wanda ke aiki azaman faɗakarwa daban.

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

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>

Ajin tushe mai ƙarfi

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

Lokacin amfani

Shafuna da kwayoyi suna da kyau don sassan abun ciki ko kewayawa tsakanin shafukan abubuwan da ke da alaƙa.

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.

Shafukan asali

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

• Gida
• Bayanan martaba
• Saƙonni

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

• Gida
• Bayanan martaba
• Saƙonni

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

Yadda ake tara su

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

• Gida
• Bayanan martaba
• Saƙonni

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

Kwayoyin da aka tara

• Gida
• Bayanan martaba
• Saƙonni

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

Abubuwan menu masu wadata sun yi sauƙi

Menu na saukarwa a cikin shafuka na Bootstrap da kwayoyi suna da sauƙin gaske kuma suna buƙatar ƙarin HTML kaɗan da plugin jQuery mara nauyi.

Jeka zuwa shafin Javascript don karanta takaddun akan fara zazzagewa a Bootstrap.

Shafukan da zazzagewa

• Gida
• Taimako
• Zazzagewa
  • Aiki
  • Wani mataki
  • Wani abu kuma a nan
  • Rabuwar hanyar haɗin gwiwa

<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

• Gida
• Taimako
• Zazzagewa
  • Aiki
  • Wani mataki
  • Wani abu kuma a nan
  • Rabuwar hanyar haɗin gwiwa

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

kewayawa irin aikace-aikace

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

A tsari, an gina su akan sifofin nav iri ɗaya kamar shafuka da kwayoyi, don haka amfani da gyare-gyare suna da sauƙi.

Tare da gumaka

Lissafin Nav kuma suna da sauƙin shirya tare da gumaka. Ƙara alamar da ta dace <i>tare da aji kuma an saita ku.

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>

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 = "aiki" > 
    <a href = "#" > Gida </a> 
  </li>
  <li>
    <a href = "#" > Laburare </a> 
  </li>
  ...
</ul>

Misali tare da gumaka

Misali iri ɗaya, amma tare da <i>alamun alamun gumaka.

<ul class = "nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" >> 
      Laburare
    </a>
  </li>
  ...
</ul>

Me ya hada

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.

Canzawa tsakanin su abu ne mai sauƙi kuma yana buƙatar canza alamar ƙima kaɗan.

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 tabbbable shafuka zuwa rayuwa a shafin javascript docs .

Samu javascript →

Tabbataccen misali

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

Don shafuka masu layi na dama ko hagu, kunsa .nav-tabskuma .tab-contenta cikin .tabbable.

Madaidaicin alama

Yin amfani da shafuka masu ɗaiɗai yana buƙatar naɗa div, saitin shafuka, da saitin fafuna na abun ciki.

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

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 scaffolding

Navbar yana buƙatar ƴan divs kawai don tsara shi da kyau don a tsaye ko tsayayyen nuni.

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

Kafaffen navbar

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

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

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

Lokacin da kuka saka navbar, tuna don yin lissafin wurin ɓoye a ƙasa. Ƙara 40px ko fiye na padding zuwa <body>. Tabbatar ƙara wannan bayan ainihin Bootstrap CSS kuma kafin zaɓin CSS mai amsawa.

Sunan alama

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

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

Forms a cikin navbar

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

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>

Bambancin amsa na zaɓi

Dangane da adadin abun ciki a saman mashin ɗin ku, kuna iya aiwatar da zaɓuɓɓukan da suka dace. Don yin haka, kunsa abun cikin nav ɗinku a cikin wani abu mai ɗauke da div, .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" > 
        <!-- .nav, .navbar-search, .navbar-form, da sauransu -->
      </div>
 
    </div>
  </div>
</div>

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>

Daidaita bangaren

Don daidaita hanyar 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.

Ƙara menu na zazzagewa

Haɓaka zazzagewa da saukarwa zuwa nav abu ne mai sauƙi, amma yana buƙatar amfani da plugin ɗin mu na javascript .

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

Samu javascript →

Rubutu a cikin navbar

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

Me yasa amfani da su

Ana amfani da kewayawar biredi a matsayin hanya don nuna masu amfani inda suke cikin manhaja ko wani shafi, amma ba don kewayawa na farko ba. Ci gaba da amfani da su ya zama kaɗan kuma a takaice don zama mafi inganci.

Misalai

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

• Gida

• Gida /
• Laburare

• Gida /
• Laburare /
• Bayanai

Alamar alama

HTML shine daidaitattun jerin ku marasa tsari tare da hanyoyin haɗin gwiwa.

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

Lokacin amfani

Mafi sauƙaƙa da ƙaramin salo mai salo wanda aka yi wahayi daga Rdio, mai girma ga ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

Hanyoyin haɗin yanar gizo na jihohi

Ana iya daidaita hanyoyin haɗin gwiwa kuma suna aiki a cikin yanayi da yawa tare da ajin da ya dace. .disableddon hanyoyin haɗin da ba za a iya dannawa ba kuma .activedon shafin na yanzu.

daidaitawa mai sassauƙa

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

Misalai

Sashin rubutun tsoho yana da sassauƙa kuma yana aiki cikin bambance-bambance masu yawa.

Alamar alama

An nade a cikin wani <div>, pagination ne kawai <ul>.

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

Game da pager

Bangaren pager shine saitin hanyoyin haɗin gwiwa don aiwatar da fage mai sauƙi tare da alamar haske har ma da salo masu sauƙi. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.

Yanayin naƙasasshen zaɓi

Hanyoyin haɗin yanar gizon Pager kuma suna amfani da .disabledaji na gaba ɗaya daga pagination.

Misali na asali

Ta hanyar tsoho, shafukan yanar gizo suna haɗin haɗin kai.

• A baya
• Na gaba

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

• ← Tsofaffi
• Sabo →

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

Game da

Baji ƙanana ne, sassauƙan abubuwa don nuna alama ko ƙidaya wani nau'i. Ana yawan samun su a cikin abokan cinikin imel kamar Mail.app ko akan aikace-aikacen hannu don sanarwar turawa.

Akwai azuzuwan

Bootstrap yana ba da sassauƙa mai sauƙi, sassauƙa da ake kira rukunin jaruma don nuna abun ciki akan rukunin yanar gizon ku. Yana aiki da kyau akan tallace-tallace da shafuka masu nauyi.

Alamar alama

Kunna abubuwan ku divkamar haka:

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

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

• 

  Alamar thumbnail

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

  Aiki Aiki

• 

  Alamar thumbnail

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

  Aiki Aiki

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

A ƙarshe, ɓangaren thumbnails yana amfani da azuzuwan tsarin grid na yanzu-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 = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Alamar ɗan yatsa </h5>
      <p> Takardun yatsa a nan... </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.

Ajin da aka sake rubutawa

Tare da Bootstrap 2, mun sauƙaƙe ajin tushe: .alertmaimakon .alert-message. Mun kuma rage mafi ƙarancin alamar da ake buƙata — ba <p>a buƙata ta tsohuwa, kawai na waje <div>.

Saƙon faɗakarwa guda ɗaya

Don ƙarin abin ɗorewa tare da ƙasan lamba, mun cire bambance-bambancen neman faɗakarwar toshewa, saƙonnin da suka zo tare da ƙarin padding da yawanci ƙarin rubutu. Ajin kuma ya canza zuwa .alert-block.

Yana da kyau tare da javascript

Bootstrap ya zo tare da babban kayan aikin jQuery wanda ke goyan bayan saƙonnin faɗakarwa, yin watsi da su cikin sauri da sauƙi.

Sami plugin ɗin »

Misali faɗakarwa

Rufe saƙon ku da gunkin kusa na zaɓi a cikin div tare da aji mai sauƙi.

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

A kula! Na'urorin iOS suna buƙatar wani href="#"don korar faɗakarwa. Tabbatar kun haɗa shi da sifa na bayanai don gumakan anka kusa. A madadin, zaku iya amfani da wani buttonabu mai sifa na bayanai, wanda muka zaɓi yi don takaddun mu.

Sauƙaƙe miƙe daidaitaccen saƙon faɗakarwa tare da azuzuwan zaɓi biyu: .alert-blockdon ƙarin fakiti da sarrafa rubutu da kuma .alert-headingtaken da ya dace.

<div class = "jijjiga-block" > 
  <a class = "close" data-dismiss = "jijjiga" href = "#" > × </a>   
  <h4 class = "jigon faɗakarwa" > Gargadi! </h4> ku 
  Mafi kyawun bincika kan ku, ba ku ...
</div>

Kuskure ko haɗari

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

Nasara

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

Bayani

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

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 IE).

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

Mai rairayi

Ɗauki misali mai laushi kuma yana raye shi (ba IE).

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

Ƙarin launuka

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

Sanduna masu tsiri

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

Hali

Sandunan ci gaba suna amfani da sauye-sauye na CSS3, don haka idan kun daidaita faɗin ta hanyar javascript, zai sake girma cikin sauƙi.

Idan kuna amfani da .activeajin, .progress-stripedsandunan ci gaban ku za su rayar da ratsi daga hagu zuwa dama.

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.

Opera da IE basa goyan bayan rayarwa a wannan lokacin.

Wells

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

<div class = "lafiya" > 
  ...
</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 = "#" don danna abubuwan da suka faru idan kuna amfani da anga.

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