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:

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

Tusaalaha Toolbar

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Hoos u dhaca badhanka

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Ficil
  4. <span class = "daryeel" </span>
  5. </a>
  6. <ul class = "Dropdown-menu" >
  7. <!-- Link-yada liiska hoos-u-dhaca -->
  8. </ul>
  9. </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.


Hoos udhaca badhanka

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "Dropdown-menu jiid-right" >
  4. <!-- Link-yada liiska hoos-u-dhaca -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ficil </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >
  4. <span class = "daryeel" </span>
  5. </button>
  6. <ul class = "Dropdown-menu" >
  7. <!-- Link-yada liiska hoos-u-dhaca -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Burburinta < /button>
  3. <button class = "btn dropdown-toggle" data-toggle = "hoos u dhac" >
  4. <span class = "daryeel" </span>
  5. </button>
  6. <ul class = "Dropdown-menu" >
  7. <!-- Link-yada liiska hoos-u-dhaca -->
  8. </ul>
  9. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Horay </a></li>
  4. <li class = "firfircoon" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Xiga </a></li>
  11. </ul>
  12. </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.

Xaalad naafada ah

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

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Hore </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Xiga </a>
  7. </li>
  8. </ul>

Xiriirinta toosan

Haddii kale, waxaad isku toosin kartaa xiriiriye kasta dhinacyada:

  1. <ul class = "pager" >
  2. <li class = "kii hore" >
  3. <a href = "#" > Ka weyn </a>
  4. </li>
  5. <li class = "ku xiga" >
  6. <a href = "#" > Ka cusub → </a>
  7. </li>
  8. </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>
rogan <span class="label label-inverse">Inverse</span>

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

Magaca Tusaale Calaamadayn
Asal ahaan 1 <span class="badge">1</span>
Guul 2 <span class="badge badge-success">2</span>
Digniin 4 <span class="badge badge-warning">4</span>
Muhiim 6 <span class="badge badge-important">6</span>
Xog 8 <span class="badge badge-info">8</span>
rogan 10 <span class="badge badge-inverse">10</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:

  1. <div class = "hero-unit" >
  2. <h1> Ciwaanka </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Wax dheeri ah baro
  7. </a>
  8. </p>
  9. </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).

  1. <div class = "page-header" >
  2. <h1> Tusaalaha madaxa bogga </h1>
  3. </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 :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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>:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Calaamadda thumbnail </h5>
  6. <p> Qoraalka thumbnail halkan... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = " feejignaan " >
  2. <button class = "close" data-dismiss = " digniin" > × </button>
  3. Digniin ! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.
  4. </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.

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.

  1. <div class = "digniinta digniin-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "ciwaanka digniinta" > Digniin! </h4>
  4. Is hubinta ugu fiican, ma tihid...
  5. </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.
  1. <div class = "wargelinta digniinta- khalad" >
  2. ...
  3. </div>

Guul

Si fiican ayaa loo sameeyay! Waxaad si guul leh u akhriday fariintan digniinta ah ee muhiimka ah.
  1. <div class = " feejignaan-guul" >
  2. ...
  3. </div>

Xog

Madaxa kor u qaad! Digniintan ayaa u baahan dareenkaaga, laakiin aad muhiim uma aha.
  1. <div class = "wargelinta digniin-info" >
  2. ...
  3. </div>

Tusaalooyinka iyo calaamadaynta

Aasaaska

Bar horumarka caadiga ah oo leh jaangooyo toosan.

  1. <div class = "horumar" >
  2. <div class = "bar"
  3. style = " ballac : 60 %; " </div>
  4. </div>

Xariifnimo

Wuxuu isticmaalaa gradient si uu u abuuro saamayn xariijimo ah (IE maya).

  1. <div class = "horumar-horumar-ku-soo-bax" >
  2. <div class = "bar"
  3. style = " ballac : 20 %; " </div>
  4. </div>

Animation

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

  1. <div class = "horumar-ku-socod
  2. firfircoon" >
  3. <div class = "bar"
  4. style = " ballac : 40 %; " </div>
  5. </div>

Ikhtiyaarada iyo taageerada browserka

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.

Bal eeg, ceel baan ku jiraa!
  1. <div class = "wanaagsan" >
  2. ...
  3. </div>

Xir astaanta

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

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

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

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