Qaybaha

Daraasiin qaybood oo dib loo isticmaali karo ayaa lagu dhisay Bootstrap si ay u bixiyaan hagidda, digniinaha, popovers, iyo wax ka badan.

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:

Bidix Dhexe Sax

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</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

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 menu saxda ah.

Madaxa kor u qaad! Hoos-u-dhaca badhanka wuxuu u baahan yahay Bootstrap dropdown plugin si uu u shaqeeyo.

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>

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 udhaca badhanka caadiga ah si aan u bixino ficilka badhanka labaad ee u shaqeeya sidii kiciye gooni 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" > 
    <!-- Link-yada liiska hoos-u-dhaca -->
  </ul>
</div>

Qalabyo fudud oo isku mid ah, fasallo kala duwan

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:

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

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

La fadhiisin karo Samee tab ama kaniiniyo toosan

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

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

Kiniinno is dulsaaran

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

Hoos-u-dhacyo loogu talagalay qaybaha nav ee horumarsan

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

<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

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

Liisaska Nav Dhis navs is dulsaaran oo fudud, oo u fiican dhinacyada

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.

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>

Tabbable nav Keen tabs nolosha adoo isticmaalaya Javascript

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.

Waxaan ku jiraa Qaybta 1.

Haye, waxaan ku jiraa Qaybta 2.

Ka warran gabar, tani waa Qeybta 3.

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 →

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" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Qaybta 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Qaybta 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Waxaan ku jiraa Qaybta 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Howdy, waxaan ku jiraa Qaybta 2. </p>
    </div>
  </div>
</div>

Jiho kasta loo tabcan karo

Tabs xagga hoose

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

Waxaan joogaa Qaybta A.

Haye, waxaan ku jiraa Qaybta B.

Ka warran gabadh, kani waa Qaybta C.

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

Waxaan joogaa Qaybta A.

Haye, waxaan ku jiraa Qaybta B.

Ka warran gabadh, kani waa Qaybta C.

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

Waxaan joogaa Qaybta A.

Haye, waxaan ku jiraa Qaybta B.

Ka warran gabadh, kani waa Qaybta C.

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

Tusaale navbar taagan

Tusaalaha navbar taagan (aan ku qotomin xagga sare) ee leh magaca mashruuca, navigation, iyo foomka raadinta.

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

Si aad navbarka uga dhigto mid go'an xagga sare ee daawashada, ku dar .navbar-fixed-topdiv-ga ugu dambeeya, .navbar.

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

CSS-gaaga, waxa kale oo aad u baahan doontaa in aad ku xisaabtanto isku-xidhka ay keento adiga oo ku daraya 40px ama wax ka badan oo suuf ah kaaga <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>

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>

Madaxa kor u qaad! Navbar ka jawaabaya waxay u baahan tahay plugin burburay .

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

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>

Boga-kooban ee badan

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>

Pager Si aad u hesho xiriiriyeyaasha degdega ah ee hore iyo kuwa xiga

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.

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

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

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

Calaamadaha	Calaamadayn
Asal ahaan	`<span class="label">Default</span>`
Guul	`<span class="label label-success">Success</span>`
Digniin	`<span class="label label-warning">Warning</span>`
Muhiim	`<span class="label label-important">Important</span>`
Xog	`<span class="label label-info">Info</span>`

Halyeyga unugga

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>

Hello, adduunyo!

Tani waa unug fudud oo halyey ah, qayb fudud oo qaabka jumbotron ah oo loogu yeedhayo feejignaan dheeri ah nuxurka ama macluumaadka.

Wax dheeri ah baro

Madaxa bogga

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-haeder" > 
  <h1> Tusaalaha madaxa bogga </h1>
</div>

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.

Wuxuu adeegsadaa 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 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.

Qalab khafiif ah

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.

× Digniin! Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.

<div class = " feejignaan " > 
  <a class = "close" data-dismiss = " digniin" > × </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-blocksuuf badan iyo kontaroolada qoraalka iyo .alert-headingciwaanka u dhigma.

Digniin!

Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan. Nulla vitae elit libero, a pharetra augue. Preesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Beddelka macnaha guud Ku dar xiisado ikhtiyaari ah si aad u bedesho macnaha digniinta

Khalad ama khatar

× Alla degdeg! Waxoogaa beddel oo isku day inaad mar kale soo gudbiso.

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

Guul

× Si fiican ayaa loo sameeyay! Waxaad si guul leh u akhriday fariintan digniinta ah ee muhiimka ah.

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

Xog

× Madaxa kor u qaad! Digniintan ayaa u baahan dareenkaaga, laakiin aad muhiim uma aha.

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

Tusaalooyinka iyo calaamadaynta

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>

Ikhtiyaarada iyo taageerada browserka

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

Bal eeg, ceel baan ku jiraa!

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

Kooxaha badhanka Ku biir badhamada si ay u shaqeeyaan bar-bar-barashada oo kale

Kooxaha badhanka

Dhaqannada ugu fiican

Tusaale ahaan

Tusaalaha Toolbar

Sanduuqa hubinta iyo dhadhanka raadiyaha

Madaxa kor u kaca

Hoos-u- dhigista badhamada Liiska hoos -u-dhaca macnaha ee lagu dhisay kooxaha badhanka

Hoos u dhaca badhanka

Tusaale ahaan calaamadaynta

Hoos udhaca badhanka

Tusaale ahaan calaamadaynta

Nav, tabs, iyo kaniiniyo si heer sare ah loo beddeli karo navigation-style

Qalabyo fudud oo isku mid ah, fasallo kala duwan

Fasalka aasaasiga ah ee xoogga leh

Marka la isticmaalo

Isku toosinta qaybaha

tabs aasaasiga ah

Kiniinnada aasaasiga ah

La fadhiisin karo Samee tab ama kaniiniyo toosan

Sida loo raro

tabs is dulsaaran

Kiniinno is dulsaaran

Hoos-u-dhacyo loogu talagalay qaybaha nav ee horumarsan

Liiska cuntooyinka hodanka ah waa la fududeeyey

Tabs leh hoos u dhac

Kiniinnada hoos u dhaca

Liisaska Nav Dhis navs is dulsaaran oo fudud, oo u fiican dhinacyada

Habka codsiga

Astaamo leh

Tusaalaha liiska nav

Tusaale leh astaamo

Tabbable nav Keen tabs nolosha adoo isticmaalaya Javascript

Maxaa ka mid ah

Tusaalaha la taaban karo

Qalabka jQuery ee gaarka ah

Calaamadayn toosan

Jiho kasta loo tabcan karo

Tabs xagga hoose

Tabaha bidixda

Tabaha dhanka midig

Navbar

Tusaale navbar taagan

Navbar scaffolding

Navbar go'an

Magaca astaanta

Foomka raadinta

Kala duwanaansho ka jawaab celin ikhtiyaari ah

Xiriirinta Nav

Isku toosinta qaybaha

Ku darida hoos u dhaca

Burburka rootiga

Waa maxay sababta loo isticmaalo

Tusaalooyinka

Calaamadayn

Pagination Laba ikhtiyaar oo loogu talagalay bog-goynta iyada oo la adeegsanayo nuxurka

Boga-kooban ee badan

Marka la isticmaalo

Xiriirinta boggaga sharafta leh

Isku toosin dabacsan

Tusaalooyinka

Calaamadayn

Pager Si aad u hesho xiriiriyeyaasha degdega ah ee hore iyo kuwa xiga

Ku saabsan pager

Tusaale ahaan

Xiriirinta toosan

Calaamadaha khad dhexda ah Summada iyo qoraalka annotate

Qaybaha qoraalka madaxa bogga iyo cutubka geesiga ah ee kala qaybinta macluumaadka

Halyeyga unugga

Calaamadayn

Hello, adduunyo!

Madaxa bogga

Tumbnails Grids ee sawirada, fiidyaha, qoraalka, iyo in ka badan

Sawir gacmeedyada asalka ah

Aad loo habeyn karo

Calaamadda thumbnail

Calaamadda thumbnail

Waa maxay sababta loo isticmaalo thumbnails

Calaamad fudud, dabacsan

Wuxuu adeegsadaa cabbirrada tiirarka grid