Kooxaha badhanka

Isticmaal kooxaha badhanka si aad isugu xidho badhamada badan sida hal qayb oo isku dhafan. Ku dhis taxane <a>ama <button>curiye.

Waxa kale oo aad isku dari kartaa <div class="btn-group">qaybo <div class="btn-toolbar">ka mid ah mashruucyo aad u adag.

Tusaale ahaan calaamadaynta

Waa kan sida HTML-ku u eego koox badhan caadi ah oo lagu dhisay badhamada summada barroosinka:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Oo leh qalab kooxeedyo badan:

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

Sanduuqa hubinta iyo dhadhanka raadiyaha

Kooxaha badhanka waxay sidoo kale u shaqayn karaan raadiyayaal, halkaas oo hal badhan oo keliya uu shaqayn karo, ama sanduuqyada hubinta, halkaasoo tiro kasta oo badhammo ahi ay shaqayn karaan. Eeg dokumentiyada Javascript taas.

Hel javascript-ka

Madaxa kor u kaca

CSS ee kooxaha badhanka waxay ku jiraan fayl gaar ah, button-groups.less.

Hoos u dhaca badhanka

Isticmaal badhan kasta si aad u kiciso liiska hoos u dhaca adiga oo gelinaya gudaha a .btn-groupoo bixisa calaamadaynta liiska saxda ah.

Tusaale ahaan calaamadaynta

Si la mid ah kooxda badhanka, calaamadaynteena waxay isticmaashaa calaamadaynta badhanka caadiga ah, laakiin iyada oo ay weheliso wax yar oo lagu daro si loo nadiifiyo qaabka iyo taageerada Bootstrap's dropdown jQuery plugin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Ficil
    <span class = "daryeel" </span> 
  </a>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

Hoos udhaca badhanka

Ku dhisidda qaababka kooxda badhanka iyo calaamadaynta, waxaan si fudud u abuuri karnaa badhanka kala qaybsan. Badhamada kala qaybsan waxay ka kooban yihiin fal caadi ah oo bidixda ah iyo hoos u rogid dhanka midig ah oo leh xidhiidhin guud.

Tusaale ahaan calaamadaynta

Waxaan ku balaadhineynaa hoos u dhaca badhanka caadiga ah si aan u bixino ficilka badhanka labaad ee u shaqeeya sidii kiciyeyaasha hoos u dhaca ee goonida ah.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Ficil </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "daryeel" </span> 
  </a>
  <ul class = "Dropdown-menu" > 
    <!-- liiska hoos-u-dhaca links-->
  </ul>
</div>

Fasalka aasaasiga ah ee xoogga leh

Dhammaan qaybaha nav-ga halkan-tabaha, kiniiniyada, iyo liisaska- waxay wadaagaan isla calaamadaynta saldhigga iyo qaababka fasalka .navdhexdiisa.

Waa maxay sababta tabs iyo kaniiniyada

Tabs iyo kaniiniyada ku jira Bootstrap waxay ku dhisan yihiin <ul>HTML xudunta u ah isku mid ah, liiska xiriiriyeyaasha. Isku beddesho tab ama kiniiniyada oo leh fasal kaliya.

Labada ikhtiyaarba aad bay ugu fiican yihiin qaybo-hoosaadka nuxurka ama dhex mara boggaga macluumaadka la xidhiidha.

tabs aasaasiga ah

Si joogto <ul>ah u qaado xiriiriyeyaasha oo ku dar .nav-tabs:

• Guriga
• Profile
• Fariimaha

<ul class = "nav nav-tabs" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kiniinnada aasaasiga ah

Qaado HTML isku mid ah, laakiin isticmaal .nav-pillsbeddelka:

• Guriga
• Profile
• Fariimaha

<ul class = "nav nav-pills" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Sida loo raro

Sida tabs iyo kaniiniyadu ay siman yihiin, kaliya ku dar fasal labaad, .nav-stacked, si ay ugu muuqdaan kuwo toosan.

tabs is dulsaaran

• Guriga
• Profile
• Fariimaha

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

Kiniinno is dulsaaran

• Guriga
• Profile
• Fariimaha

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

Liiska cuntooyinka hodanka ah waa la fududeeyey

Liiska hoos-u-dhaca ee tabaha Bootstrap iyo kaniiniyada aad bay u fudud yihiin waxayna u baahan yihiin HTML yar oo dheeri ah iyo plugin jQuery ah oo fudud.

U gudub bogga Javascript si aad u akhrido dukumeentiyada bilowga ah ee hoos u dhaca Bootstrap.

Tabs leh hoos u dhac

• Guriga
• Profile
• Hoos u dhigid
  • Ficil
  • Ficil kale
  • Wax kale halkan
  • Xiriirinta kala go'an

<ul class = "nav nav-tabs" > 
  <li class = "hoos u dhac" > 
    <a class = "Dropdown-Toggle" 
       data-toggle = "hoos u dhac"
       href = "#" >
        Hoos u dhigid
        <b class = "daryeel" </b> 
      </a>
    <ul class = "Dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Kiniinnada hoos u dhaca

• Guriga
• Profile
• Hoos u dhigid
  • Ficil
  • Ficil kale
  • Wax kale halkan
  • Xiriirinta kala go'an

<ul class = "nav nav-pills" > 
  <li class = "hoos u dhac" > 
    <a class = "Dropdown-Toggle" 
       data-toggle = "hoos u dhac"
       href = "#" >
        Hoos u dhigid
        <b class = "daryeel" </b> 
      </a>
    <ul class = "Dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Habka codsiga

Liisaska Nav waxay bixiyaan hab fudud oo fudud oo lagu dhiso kooxo xiriiriye nav ah oo leh madax ikhtiyaari ah. Waxay si fiican ugu isticmaalaan dhinacyada sida Finder ee OS X.

Qaab dhismeed ahaan, waxay ku dhisan yihiin isla qaababka nav-ga xudunta u ah sida tabs iyo kaniiniyada, markaa isticmaalka iyo habaynta ayaa toos ah.

Astaamo leh

Liisaska Nav sidoo kale way fududahay in lagu qalabeeyo calaamadaha. Ku dar summada ku habboon <i>fasalka oo waad dejisay.

Tusaalaha liiska nav

Qaado liiska xiriiriyeyaasha oo ku dar class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Liiska madaxa
  </li>
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li>
    <a href = "#" > Library </a> 
  </li>
  ...
</ul>

Tusaale leh astaamo

Tusaale la mid ah, laakiin leh <i>summada calaamadaha.

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

Maxaa ka mid ah

Keen tabahaaga nolosha adoo wata plugin fudud si aad ugu dhex rogto waxa ku jira tabs Bootstrap wuxuu isku daraa tabs tabs oo afar nooc ah: sare (default), midig, hoose, iyo bidix.

Isbeddelka dhexdooda waa sahlan yahay oo kaliya waxay u baahan tahay beddelka calaamad aad u yar.

Tusaalaha la taaban karo

Si aad u samayso tabs, .nav-tabsku duub div kale oo leh fasalka .tabbable.

Qalabka jQuery ee gaarka ah

Dhammaan tabsiyada tababbarka ah waxaa ku shaqeeya pluginkeena jQuery ee fudud. Ka akhri wax badan oo ku saabsan sida loo keeno tabs tabs nolosha bogga dukumeenti Javascript.

Hel javascript →

Tabs xagga hoose

U rogo nidaamka HTML oo ku dar fasal si aad tabs ugu dhejiso xagga hoose.

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

Tabaha bidixda

Ku beddel fasalka si aad tabs ugu dhejiso bidixda.

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

Tabaha dhanka midig

Ku beddel fasalka si aad tabs ugu dhejiso midigta.

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

Navbar scaffolding

Navbar-ku wuxuu u baahan yahay oo kaliya dhowr divs si uu si fiican ugu habeeyo muuqaal taagan ama go'an.

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

Si aad navbarka uga dhigto mid go'an xagga sare ee daawashada, ku dar .navbar-fixed-topdiv-ga ugu dambeeya, .navbar. CSS-gaaga, waxa kale oo aad u baahan doontaa in aad ku xisaabtanto isku-xidhka ay keento adiga oo ku daraya padding-top: 40px;kaaga <body>.

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

Magaca astaanta

Xiriirinta fudud ee lagu tuso astaantaada ama magaca mashruuca waxay u baahan tahay summada barroosinka.

<a class = "brand" href = "#" >  
  Magaca mashruuca
</a>

Foomka raadinta

Foomamka raadinta waxay helayaan qaababka gaarka ah ee navbar ee .navbar-searchfasalka. Ku dar .pull-leftama .pull-rightdusha formsi aad u toosiso.

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

Kala duwanaansho ka jawaab celin ikhtiyaari ah

Iyada oo ku xidhan inta ay le'eg tahay waxa ku jira bar kaaga sare, waxa laga yaabaa in aad rabto in aad hirgeliso xulashooyinka ka jawaabaya. Si aad sidaas u samayso, ku duub macluumaadkaaga nav-ga ku jira div, .nav-collapse.collapse, oo ku dar badhanka toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteenar" > 
 
      <!-- .btn-navbar waxa loo istcimaalaa beddelka nuxurka navbar burburay -->
      <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>
 
      <!-- Hubi inaad ka tagto summada halkaas haddii aad rabto in la muujiyo -->
      <a class = "brand" href = "#" > Magaca mashruuca </a>  
 
      <!-- Wax kasta oo aad rabto in lagu qariyo 940px ama ka yar, dhig halkan -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, iwm -->
      </div>
 
    </div>
  </div>
</div>

Xiriirinta Nav

Alaabta Nav way fududahay in lagu daro liisaska aan la dalban.

<ul class = "nav" > 
  <li class = "firfircoon" > 
    <a href = "#" > Guriga </a> 
  </li>
  <li><a href = "#" > Isku xidhka </a></li> 
  <li><a href = "#" > Isku xidhka </a></li> 
</ul>

Ku darida hoos u dhaca

Ku darista hoos u dhacyada nav waa mid aad u fudud, laakiin waxay u baahan tahay isticmaalka pluginkeena javascript .

<ul class = "nav" > 
  <li class = "hoos u dhac" > 
    <a href = "#" 
          class = "Dropdown-Toggle"
          data-toggle = "hoos u dhac" >
          Xisaab
          <b class = "daryeel" </b> 
    </a>
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Hel javascript →

Waa maxay sababta loo isticmaalo

Burburinta rootiga waxaa loo istcimaalaa si loo tuso isticmaalayaasha halka ay ku dhex jiraan abka ama goobta, laakiin looma isticmaalo marinka aasaasiga ah. Isticmaalkooda ka dhig mid kooban oo kooban si uu u noqdo mid waxtar leh.

Tusaalooyinka

Tusaalaha kaliya ee muujinaya sida laga yaabo in lagu soo bandhigo bogag badan.

• Guriga

• Guriga /
• Maktabadda

• Guriga /
• Maktabadda /
• Xogta

Calaamadayn

HTML waa liiskaaga caadiga ah ee aan la dalban ee leh links.

<ul class = "Qalabka rootiga" > 
  <li>
    <a href = "#" > Guriga </a> <span class = "qaybiye" > / </span>   
  </li>
  <li>
    <a href = "#" > Library </a> <span class = "qaybi" > / </span>   
  </li>
  <li class = "firfircoon" > 
    <a href = "#" > Xog </a> 
  </li>
</ul>

Marka la isticmaalo

Bogga aad u fudud oo qaab yar loo qaabeeyey oo ay dhiirigelisay Rdio, ku fiican abka iyo natiijooyinka raadinta. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

Xiriirinta boggaga sharafta leh

Xiriirinta waa la habeyn karo waxayna ku shaqeeyaan xaalado dhowr ah oo leh fasalka saxda ah. .disabledXiriirinta aan la gujin karin iyo .activebogga hadda jira.

Isku toosin dabacsan

Ku dar mid ka mid ah laba fasal oo ikhtiyaari ah si aad u bedesho isku xidhka boggaga: .pagination-centerediyo .pagination-right.

Tusaalooyinka

Qaybta pagination-ka caadiga ah waa dabacsanaan waxayna ku shaqeysaa tiro kala duwanaansho ah.

Calaamadayn

Ku duudduubay a <div>, pagination waa uun a <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Horay </a></li> 
    <li class = "firfircoon" > 
      <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 = "#" > Xiga </a></li> 
  </ul>
</div>

Ku saabsan pager

Qaybta bogaggu waa isku-xidhayaal loogu talagalay hirgelinta pagination fudud oo leh calaamad iftiin iyo xitaa qaabab fudud. Waxay u fiican tahay bogagga fudud sida blogyada ama majaladaha.

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

• Hore
• Xiga

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

Xiriirinta toosan

Haddii kale, waxaad isku toosin kartaa xiriiriye kasta dhinacyada:

• ← Ka weyn
• Ka cusub →

<ul class = "pager" > 
  <li class = "kii hore" > 
    <a href = "#" > ← Ka weyn </a> 
  </li>
  <li class = "ku xiga" > 
    <a href = "#" > Ka cusub → </a> 
  </li>
</ul>

Sawir gacmeedyada asalka ah

Sida caadiga ah, Bootstrap's thumbnails waxaa loogu talagalay inay soo bandhigaan sawirro ku xiran oo leh calaamado loo baahan yahay ugu yar.

Aad loo habeyn karo

Waxoogaa calaamad ah oo dheeri ah, waxaa suurtogal ah in lagu daro nooc kasta oo ka mid ah waxyaabaha HTML sida cinwaannada, cutubyada, ama badhamada thumbnails.

• 

  Calaamadda thumbnail

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

  Ficil Ficil

• 

  Calaamadda thumbnail

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

  Ficil Ficil

Waa maxay sababta loo isticmaalo thumbnails

Sawir-gacmeedka (horay .media-gridu ahaa ilaa v1.4) waxay ku fiican yihiin xadhkaha sawirada ama fiidyaha, natiijooyinka raadinta sawirka, alaabta tafaariiqda, faylalka, iyo wax ka badan. Waxay noqon karaan xiriirin ama nuxur taagan.

Calaamad fudud, dabacsan

Calaamadaynta thumbnail waa mid fudud - oo ulleh tiro kasta oo liwalxood ayaa ah waxa loo baahan yahay oo dhan. Waxa kale oo aad u dabacsan, oo u oggolaanaysa nooc kasta oo ka mid ah nuxurka leh wax yar oo dheeraad ah si loo duubo waxa ku jira.

Waxay isticmaashaa cabbirrada tiirarka grid

Ugu dambayntii, qaybta thumbnails-ka waxay isticmaashaa fasallada nidaamka grid-ka-sida .span2ama - .span3si loo xakameeyo cabbirrada thumbnail-ka.

Calaamadaynta

Sidii hore loo sheegay, calaamadaynta loo baahan yahay ee thumbnails waa mid fudud oo toosan. Waa kan eega habaynta caadiga ah ee sawirada ku xidhan :

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

Wixii HTML ka kooban ee thumbnails, calaamadeyntu wax yar ayey isu beddeshaa. Si loo oggolaado nuxurka heerka xannibaadda meel kasta, waxaanu ku beddelannaa sidan <a>oo kale:<div>

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Calaamadda thumbnail </h5>
      <p> Qoraalka thumbnail halkan... </p>
    </div>
  </li>
  ...
</ul>

Tusaalayaal badan

Ku sahamin dhammaan xulashooyinkaaga fasallada kala duwan ee kala duwan ee aad diyaar u tahay. Waxa kale oo aad isku dari kartaa oo aad isku dari kartaa cabbirro kala duwan.

Fasalka saldhiga dib loo qoray

Bootstrap 2, waxaanu fududaynay fasalka aasaasiga ah: .alerthalkii .alert-message. Waxaan sidoo kale yareynay calaamadeynta ugu yar ee loo baahan yahay-maya <p>ayaa loo baahan yahay default, kaliya dibadda <div>.

Farriinta digniinta kali ah

Qayb aad u waara oo leh kood ka yar, waxaanu ka saarnay kala soocida eegno digniinta xannibaadda, fariimaha la socda suuf badan iyo qoraalo badan. Fasalka sidoo kale wuxuu isu beddelay .alert-block.

Wuxuu si fiican ula socdaa javascript

Bootstrap waxay la socotaa plugin jQuery weyn oo taageera fariimaha digniinta ah, taasoo ka dhigaysa inay si dhakhso ah oo fudud u eryaan.

Hel plugin-ka

Tusaale ahaan digniinaha

Ku duub fariintaada iyo summada dhow ee ikhtiyaariga ah ee div leh fasal fudud.

<div class = " feejignaan " > 
  <a class = "xir" > × </a> 
  Digniin ! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
</div>

Si fudud u fidi fariinta digniinta caadiga ah oo leh laba qaybood oo ikhtiyaari ah: .alert-blocksi aad u hesho suuf badan iyo kontaroolada qoraalka iyo .alert-headingciwaanka u dhigma.

<div class = "digniinta digniin-block" > 
  <a class = "xir" > × </a> 
  <h4 class = "ciwaanka digniinta" > Digniin! </h4> 
  Is hubinta ugu fiican, ma tihid...
</div>

Khalad ama khatar

<div class = "wargelinta digniinta- khalad" > 
  ...
</div>

Guul

<div class = " feejignaan-guul" > 
  ...
</div>

Xog

<div class = "wargelinta digniin-info" > 
  ...
</div>

Aasaaska

Bar horumarka caadiga ah oo leh jaangooyo toosan.

<div class = "horumar" > 
  <div class = "bar" 
       style = " ballac : 60 %; " </div> 
</div>

Xariifnimo

Wuxuu isticmaalaa gradient si uu u abuuro saamayn xariijimo ah.

<div class = "horumar-info 
     horusocod-xariif ah" >
  <div class = "bar" 
       style = " ballac : 20 %; " </div> 
</div>

Animation

Qaado tusaalaha xariijimaha ah oo ku nooleeya.

<div class = "horumarka horumarka-khatarta 
     horusocod-xariif firfircoon firfircoon" >
  <div class = "bar" 
       style = " ballac : 40 %; " </div> 
</div>

Midabada dheeriga ah

Baararka horusocodku waxay isticmaalaan magacyo isku mid ah sida badhamada iyo digniinaha habaynta la midka ah.

• .progress-info
• .progress-success
• .progress-danger

Haddii kale, waxaad habayn kartaa faylasha YAR oo aad rogrogi kartaa midabadaada iyo cabbirradaada.

Dhaqanka

Baararka horusocodku waxay adeegsadaan kala-guurka CSS3, markaa haddii aad si firfircoon u hagaajisid ballaca Javascript, waxay si habsami leh u cabbiri doontaa.

Haddii aad isticmaasho .activefasalka, .progress-stripedbaararka horumarkaagu waxay soo jiidan doonaan xariijimaha bidix ilaa midig.

Taageerada browserka

Baararka horusocodku waxay isticmaalaan gradients CSS3, kala-guurka, iyo animations si ay u gaaraan dhammaan saameyntooda. Tilmaamahan laguma taageero IE7-8 ama noocyadii ka sii weynaa ee Firefox.

Opera ma taageerto animations wakhtigan.

Ceelasha

Isticmaal ceelka si sahlan oo saameyn ku leh curiyaha si aad u siiso saameyn gelinta.

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

Calaamadaha

Isticmaal calaamada curiyaha si aad u tiriyo tirinta aan la akhriyin ama tilmaame fudud.

<span class = "calaamadaha" > 3 </div> 

Xir astaanta

U isticmaal astaanta guud ee u dhow si aad meesha uga saarto waxyaabaha sida moodalka iyo digniinaha.

×

<a class = "xir" > × </a>