Kooxaha badhanka

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

Dhaqannada ugu fiican

Waxaan ku talinaynaa tilmaamaha soo socda ee isticmaalka kooxaha badhanka iyo aaladaha:

• Had iyo jeer isticmaal isla curiyaha hal badhan, <a>ama <button>.
• Ha isku darin badhamada midabo kala duwan oo isku koox ah.
• Isticmaal calaamadaha marka lagu daro ama halkii aad ka isticmaali lahayd qoraalka, laakiin hubso inaad kudarto alt iyo qoraalka ciwaanka halka ku habboon.

Kooxaha badhanka laxidhiidha ee leh hoos udhaca (eeg hoos) waa in si gooni ah loogu yeeraa oo had iyo jeer lagu daraa daryeel hoos u dhac si loo muujiyo habdhaqanka loogu talagalay.

Tusaale ahaan

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

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

Tusaalaha Toolbar

Isku-dubbarid isku-dar ah <div class="btn-group">qaybo <div class="btn-toolbar">aad u adag.

<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 uu shaqayn karo, ama sanduuqyada hubinta, halkaasoo tiro kasta oo badhammo ahi ay shaqayn karaan. U eeg dokumentiyada Javascript taas.

Hel javascript-ka

Hoos u dhigista kooxaha badhanka

Madaxa kor u qaad! Badhamada hoos-u-dhaca leh waa in si gaar ah loogu duuduubo iyaga .btn-groupoo .btn-toolbarsi habboon u samayn kara.

Dulmar iyo tusaaleyaal

Isticmaal badhan kasta si aad u kiciso liiska hoos u dhaca adiga oo gelinaya gudaha a .btn-groupoo bixisa calaamadaynta menu 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" > 
    <!-- Link-yada liiska hoos-u-dhaca -->
  </ul>
</div>

Wuxuu la shaqeeyaa dhammaan cabbirrada badhanka

Hoos-u-dhacyada badhanka waxay shaqeeyaan cabbir kasta. cabbirka badhankaagu waa .btn-large, .btn-small, ama .btn-mini.

Wuxuu u baahan yahay javascript

Hoos-u-dhaca badhanka wuxuu u baahan yahay Bootstrap dropdown plugin si uu u shaqeeyo.

Xaaladaha qaarkood-sida mobilada- menu-yada hoos u dhaca ayaa ku fidi doona meel ka baxsan goobta daawashada. Waxaad u baahan tahay inaad ku xalliso toosinta gacanta ama javascript-ka caadiga ah.

Dulmar iyo tusaaleyaal

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.

Cabbirrada

Ka faa'iidayso casharrada badhanka dheeraadka ah .btn-mini, .btn-small, ama .btn-largecabbiridda.

<div class = "btn-group" > 
  ...
  <ul class = "Dropdown-menu jiid-right" > 
    <!-- Link-yada liiska hoos-u-dhaca -->
  </ul>
</div>

Tusaale ahaan calaamadaynta

Waxaan ku balaadhineynaa hoos udhaca badhanka caadiga ah si aan u bixino ficilka badhanka labaad ee u shaqeeya sidii kiciye gooni ah.

<div class = "btn-group" > 
  <button class = "btn" > Ficil </button> 
  <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
    <span class = "daryeel" </span> 
  </button>
  <ul class = "Dropdown-menu" > 
    <!-- Link-yada liiska hoos-u-dhaca -->
  </ul>
</div>

menus tuur

Liiska hoos-u-dhaca sidoo kale waxaa laga rogi karaa hoosta kor iyadoo lagu darayo hal fasal waalidka dhow ee .dropdown-menu. Waxay rogi doontaa jihada .caretoo dib u dejin doonta menu laftiisa si ay uga dhaqaaqdo xagga hoose kor halkii ay ka ahayd sare hoos.

<div class = "btn-group dropup" > 
  <button class = "btn" > Burburinta < /button> 
  <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >  
    <span class = "daryeel" </span> 
  </button>
  <ul class = "Dropdown-menu" > 
    <!-- Link-yada liiska hoos-u-dhaca -->
  </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.

Marka la isticmaalo

Tabs iyo kaniiniyada waxay ku fiican yihiin qaybaha nuxurka ama dhex mara boggaga macluumaadka la xidhiidha.

Isku toosinta qaybaha

Si aad isku xidhidhiyaha nav, isticmaal fasalada utility .pull-leftama . .pull-rightLabada fasalba waxay ku dari doonaan sabayn CSS jihada la cayimay.

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
• I caawi
• 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
• I caawi
• 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 sahlan oo lagu dhiso kooxo xiriiriye nav ah oo leh madax ikhtiyaari ah. Waxay si fiican ugu isticmaalaan dhinacyada sida Finder ee OS X.

Dhisme ahaan, waxay ku dhisan yihiin isla qaababka nav-ga muhiimka 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.

Qaybiyayaal toosan

Ku dar qaybiye toosan adiga oo fasalka la samaynaya liis madhan .divider, sida:

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

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.

Ku libdhi tabs

Si aad tabsku u libdhaan, ku dar .fademid kasta .tab-pane.

Wuxuu u baahan yahay plugin jQuery

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 dukumentiyada Javascript .

Hel javascript →

Tusaalaha la taaban karo

Si loo sameeyo tabs tab, samee .tab-paneaqoonsi u gaar ah tab kasta oo ku duub .tab-content.

Tabaha midig ama bidix ee toosan, ku duub .nav-tabsoo .tab-contentgudaha .tabbable.

Calaamadayn toosan

Isticmaalka tabsiyada la taaban karo waxay u baahan tahay div duuban, tab tabs, iyo muraayado la taaban karo oo nuxur ah.

<div class = "tabbable" > <!-- Kaliya waxaa looga baahan yahay tabs bidix/midig -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Qaybta 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Qaybta 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Waxaan ku jiraa Qaybta 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, waxaan ku jiraa Qaybta 2. </p>
    </div>
  </div>
</div>

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>

Navbar go'an

Ku hagaaji navbar xagga sare ama hoose ee goobta daawashada oo leh fasal dheeraad ah oo ku yaal div-ka ugu dambeeya, .navbar.

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

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

Markaad ku dhejiso navbar, xasuuso inaad ku xisaabtanto meesha qarsoon ee hoose. Ku dar 40px ama in ka badan oo suuf ah <body>. Hubi inaad tan ku darto ka dib Bootstrap-ka CSS ee xudunta u ah iyo ka hor CSS-ga jawaabta ikhtiyaariga ah.

Magaca astaanta

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

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

Foomamka ku yaal navbar

Si aad si habboon u qaabayso oo aad foom ugu dhejiso gudaha navbar, ku dar fasallada ku habboon sida hoos ku cad. Foomka caadiga ah, ku dar .navbar-formoo midkood .pull-leftama .pull-rightsi sax ah u waafajiyo.

< class form = "navbar-form jiid-bidix" > 
  <input type = "text" class = "span2" >  
</form>

Si aad u hesho foom goobid oo aad loo habeeyey, ku dar .navbar-searchgelinta formiyo .search-querygelinta qaababka gaarka ah ee navbar-ka.

< 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 nuxurka ku jira bar kaaga sare, waxa laga yaabaa inaad rabto inaad 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>

Waxaad si fudud ugu dari kartaa qaybiyayaal isku xidhkaaga nav oo wata shay liis maran iyo fasal fudud. Kaliya ku dar tan inta u dhaxaysa xiriiriyeyaasha:

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

Isku toosinta qaybaha

Si aad u toosiso nav, foomka raadinta, ama qoraalka, isticmaal fasallada utility .pull-leftama fasalka. .pull-rightLabada fasalba waxay ku dari doonaan sabayn CSS jihada la cayimay.

Ku darida liiska hoos u dhaca

Ku darida hoos u dhaca iyo hoos u dhigista 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 →

Qoraalka ku dhex jira navbar

Ku duub xargaha qoraalka a <.navbar-text>, badiyaa <p>summada summada si loo helo hoggaan habboon iyo midab.

Waa maxay sababta loo isticmaalo

Burburinta rootiga waxaa loo istcimaalaa hab lagu tuso isticmaalayaasha halka ay ku dhex jiraan abka ama goobta, laakiin looma isticmaalo hagidda aasaasiga ah. Isticmaalkooda ha ahaado 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" > Xog </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-xirayaal loogu talagalay hirgelinta pagination fudud oo leh calaamad iftiin iyo xitaa qaabab fudud. Waxay u fiican tahay bogagga fudud sida blogyada ama majaladaha.

Xaalad naafada ah

Xiriirinta Pager sidoo kale waxay isticmaalaan .disabledfasalka guud ee bogga.

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>

Ku saabsan

Calaamaduhu waa qaybo yaryar, fudud oo muujinaya tilmaame ama tiro nooc ka mid ah. Waxaa badanaa laga helaa macaamiisha iimaylka sida Mail.app ama abka moobaylka ee ogeysiisyada riixitaanka.

Fasallada la heli karo

Bootstrap waxay ku siinaysaa qayb dabacsan oo fudud oo loo yaqaan unugga geesiga si ay u soo bandhigto waxa ku jira boggaaga. Waxay si fiican uga shaqeysaa suuq-geynta iyo boggaga culculus.

Calaamadayn

Ku duub macluumaadkaaga divsida:

<div class = "hero-unit" > 
  <h1> Ciwaanka </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Wax dheeri ah baro
    </a>
  </p>
</div>

Qolf fudud oo loogu talagalay in h1si habboon loo baneeyo oo u qaybiyo qaybaha nuxurka bogga. Waxay ka faa'iidaysan kartaa h1' default' small, element iyo sidoo kale inta badan qaybaha kale (oo leh qaabab dheeraad ah).

<div class = "page-header" > 
  <h1> Tusaalaha madaxa bogga </h1>
</div>

Sawir gacmeedyada asalka ah

Sida caadiga ah, Bootstrap's thumbnails waxaa loogu talagalay in lagu soo bandhigo sawirro ku xiran oo leh calaamad u yar oo loo baahan yahay.

Aad loo habeyn karo

Waxoogaa calaamad ah oo dheeri ah, waxaa suurtagal 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 shabakadaha 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.

Wuxuu adeegsadaa cabbirrada tiirarka grid

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

Calaamadaynta

Sidii hore loo sheegay, calaamadaynta loo baahan yahay ee thumbnails waa iftiin iyo toosan. Waa kan eega habaynta asalka 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 ah ee ku jira thumbnails, calaamadayntu wax yar ayay isbedeshaa. Si loo oggolaado nuxurka xannibaadda meel kasta, waxaanu ku beddelannaa <a>sidan <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 salka 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.

Si fiican ula socda javascript

Bootstrap waxay la socotaa jQuery plugin 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 ikhtiyaarka ah ee div leh fasal fudud.

<div class = " feejignaan " > 
  <button class = "close" data-dismiss = " digniin" > × </button>  
  Digniin ! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
</div>

Madaxa kor u qaad! Aaladaha iOS waxay u baahan yihiin href="#"ka saarida digniinaha Hubi inaad ku darto iyada iyo xogta sifada summada xidhidhiyaha Haddii kale, waxa aad isticmaali kartaa shay <button>leh sifada xogta, kaas oo aanu u dooranay in aanu u samayno docsyadayada. Markaad isticmaalayso <button>, waa inaad ku dartaatype="button" ama foomamkaagu ma soo gudbin karaan.

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

<div class = "digniinta digniin-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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 (IE maya).

<div class = "horumar-horumar-ku-soo-bax" > 
  <div class = "bar" 
       style = " ballac : 20 %; " </div> 
</div>

Animation

Qaado tusaalaha xariijimaha ah oo ku nooleeya (maya IE).

<div class = "horumar-ku-socod 
     firfircoon" >
  <div class = "bar" 
       style = " ballac : 40 %; " </div> 
</div>

Midabada dheeriga ah

Baararka horusocodku waxay isticmaalaan qaar ka mid ah badhanka isku midka ah iyo xiisadaha digniinta ee qaababka joogtada ah.

baararka xadhkaha goostay

Si la mid ah midabada adag, waxaan leenahay baararka horumarka xariijimaha kala duwan.

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-9 ama noocyadii hore ee Firefox.

Opera iyo IE ma taageeraan animations wakhtigan.

Ceelasha

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

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

Xir astaanta

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

×

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

Aaladaha iOS waxay u baahan yihiin href="#" dhacdooyinka gujinta haddii aad doorbidi lahayd inaad isticmaasho barroosin.

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