Bootstrap

Saldhigga CSS

Dusha sare ee xoqidda, walxaha HTML ee aasaasiga ah ayaa qaabaysan oo lagu xoojiyay fasallo la fidin karo si ay u bixiyaan muuqaal iyo dareen joogto ah.

Cinwaanka qoraalka, cutubyada, liisaska, iyo walxaha kale ee nooca khadka

Ciwaanka & nuqulka jirka

Miisaanka qoraalka

@baseFontSizeIsku-xidhka qoraalka oo dhan wuxuu ku salaysan yahay laba doorsoomayaal ka yar doorsoomayaalkeenna @baseLineHeight. Midka koowaad waa cabbirka font-saldhigga ee la isticmaalo oo dhan kan labaadna waa dhererka xarriiqda saldhigga.

Waxaan isticmaalnaa doorsoomayaashaas, iyo xisaabta qaar, si aan u abuurno xad-dhaafka, suufka, iyo dhererka-line ee dhammaan noocyadayada iyo in ka badan.

Tusaale qoraalka jirka

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor actor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Ciwaanka 1

h2. Ciwaanka 2

h3. Ciwaanka 3

h4. Ciwaanka 4

h5. Ciwaanka 5
h6. Ciwaanka 6

Xoog saarida, ciwaanka, iyo soo gaabinta

Curiyaha Isticmaalka Ikhtiyaar ah
<strong> Si aad xoogga u saarto qayb qoraal ah oo muhiim ah Midna
<em> Si aad xoogga u saarto qayb qoraal ah oo walaac leh Midna
<abbr> Wuxuu duubaa soo gaabinta iyo ereyada la soo gaabiyey si uu u muujiyo nooca la ballaariyey ee dul heehaabaya

Ku dar sifada ikhtiyaariga titleah ee qoraalka la ballaariyay

U isticmaal .initialismfasalka soo gaabinta xarfaha waaweyn.
<address> Wixii macluumaad ah ee xiriirka ee awoowaha ugu dhow ama dhammaan shaqada oo dhan Ilaali qaabaynta adiga oo ku soo afjaraya dhammaan khadadka<br>

Isticmaalka xoojinta

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Fiiro gaar ah: Dareen xor u ah isticmaalka <b>iyo <i>HTML5, laakiin isticmaalkooda ayaa isbeddelay. <b>waxaa loola jeedaa in lagu muujiyo ereyada ama odhaahyada iyada oo aan la gudbin muhiimad dheeraad ah halka <i>ay u badan tahay cod, ereyo farsamo, iwm.

Cinwaanada tusaale

Waa kuwan laba tusaale oo ku saabsan sida <address>loo isticmaali karo summada:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Magaca buuxa
[email protected]

Tusaale ahaan soo gaabinta

Soo gaabinta sifada leh titleayaa leh xudduud hoose oo dhibco khafiif ah iyo calaamad caawimo dul heehaabaysa. Tani waxay siinaysaa isticmaalayaasha tilmaan dheeraad ah oo wax lagu tusi doono dul heehaabeedka.

Ku dar initialismfasalka soo gaabinta si aad u kordhiso is-waafajinta qoraalka adiga oo siinaya cabbir yar oo qoraal ah.

HTML waa waxa ugu wanaagsan tan iyo rootiga la jarjaray.

Soo gaabinta ereyga sifo waa attr .

Xigashooyinka

Curiyaha Isticmaalka Ikhtiyaar ah
<blockquote> Cunsurka heerka xannibaadda ee xigashada macluumaadka meel kale

Ku dar citesifada isha URL

Isticmaal .pull-leftiyo .pull-rightfasallo ikhtiyaarrada sabeynaya
<small> Ikhtiyaarka ikhtiyaarka ah ee lagu daro xigashada u jeedda isticmaale, sida caadiga ah qoraa leh cinwaan shaqo Dhig <cite>agagaarka ciwaanka ama magaca isha

Si loogu daro blockquote, ku duub HTML<blockquote> kasta sida xigashada. Xigashooyinka tooska ah waxaan kugula talineynaa a .<p>

Ku dar shay ikhtiyaari <small>ah si aad u sheegto ishaada waxaadna ka heli doontaa em dash &mdash;ka hor ujeedooyin habayneed.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya ante venenatis. </p>
  3.   <small> Qof caan ah </small>
  4. </blockquote>

Tusaale blockquotes

Xigashooyinka caadiga ah waxaa loo qaabeeyey sidan:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya ante venenatis.

Qof caan ku ah Jidhka shaqada

Si aad u sabbayso blockquote dhanka midig, ku dar class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si xun u saameeya ante venenatis.

Qof caan ku ah Jidhka shaqada

Liisaska

Aan la dalban

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Aan habayn

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Dalbaday

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Sharaxaada

<dl>

Liiska sharraxaadda
Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida iyo eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Sharaxaad toosan

<dl class="dl-horizontal">

Liiska sharraxaadda
Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida iyo eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Madaxa kor u qaad! Liisaska sharraxaadda tooska ah waxay gooyn doonaan ereyada aad u dheer inay ku habboon yihiin hagaajinta tiirka bidix text-overflow. Goobaha daawashada ee dhuuban, waxay u bedeli doonaan qaabka la isku dhejiyay ee caadiga ah.

Inline-ka Koodhka oo xannib godadka koodka

Inline

Ku duub godadka koodka gudaha <code>.

  1. Tusaale ahaan , <code> qaybta </ ​​code > waa in lagu duuduubaa sidii khadka .

block aasaasiga ah

U isticmaal <pre>khadadka koodka badan. Hubi inaad ka baxsato xagal kasta oo ku jira koodka si sax ah loo sameeyo.

<p> Tusaalaha qoraalka halkan...</p>

  1. <pre>
  2.   <p> Tusaalaha qoraalka halkan...</p>
  3. </pre>

Fiiro gaar ah: Hubi inaad ku hayso koodka <pre>tagsyada sida ugu dhow bidixda intii suurtagal ah; waxay soo saari doontaa dhammaan tabsyada.

Waxaad si ikhtiyaari ah ugu dari kartaa .pre-scrollablefasalka dejin doona dhererka ugu badan ee 350px oo ku siin doona y-axis duub.

Google Prettify

Qaado <pre>walxo isku mid ah oo ku dar laba fasal oo ikhtiyaari ah si loo wanaajiyo samaynta.

  1. <p> Tusaalaha qoraalka halkan... </p>
  1. <pre class = "prettyprint 
  2.      linenums" >
  3.   <p> Tusaalaha qoraalka halkan...</p>
  4. </pre>

Soo deji google-code-prettify oo arag readme sida loo isticmaalo.

Jadwalka , waxaad qiyaastay, xogta shaxda ah

Calaamadaynta miiska

Tag Sharaxaada
<table> Cutubka duubista ee muujinta xogta qaab tabo ah
<thead> Cunsurka weelka ee safafka madaxa miiska ( <tr>) si loo calaamadiyo tiirarka miiska
<tbody> Walxaha weelka ee safafka miiska ( <tr>) ee jidhka miiska
<tr> Cunsurka weelka ee unugyada miiska ( <td>ama <th>) ee ka muuqda hal saf
<td> Unugga miiska caadiga ah
<th> Unugga miiska gaarka ah ee tiirka (ama safka, iyadoo ku xidhan baaxadda iyo meelaynta) sumadaha
waa in lagu dhex isticmaalo a<thead>
<caption> Sharaxaadda ama soo koobidda waxa miiska u yaal, gaar ahaan faa'iido u leh akhristayaasha shaashadda 
  1. <miiska>
  2.   <madaxa>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </text>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </miiska>

Doorashooyinka miiska

Magaca Fasalka Sharaxaada
Asal ahaan Midna No qaab, kaliya tiirar iyo saf
Aasaaska .table Kaliya xariiq toosan oo u dhexeeya safafka
Xuduud la leeyahay .table-bordered Wareega geesaha oo ku daraa soohdinta dibadda
Zebra-xariif .table-striped Wuxuu ku daraa midab asal cawl khafiif ah safafka khayaaliga ah (1, 3, 5, iwm)
Culays .table-condensed Waxay gooysaa suufka toosan kala badh, min 8px ilaa 4px, dhammaan tdiyo thwalxaha

Shaxda tusaale

1. Qaababka miiska caadiga ah

Miisaska si toos ah ayaa loo qaabeeyey iyadoo leh dhawr xuduudood si loo hubiyo in la akhriyi karo oo loo ilaaliyo qaabdhismeedka. Iyadoo 2.0, .tablefasalka ayaa loo baahan yahay.

  1. < class class = "miiska" > 
  2.   …
  3. </miiska>
# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter

2. Miis xariif ah

Wax yar ka hel miisaskaada adigoo ku daraya zebra-striping-kaliya ku dar .table-stripedfasalka.

Fiiro gaar ah: Miisaska xariifku wuxuu isticmaalaa :nth-childxulashada CSS oo kuma jiro IE7-IE8.

  1. < class class = " miis-xariif ah" > 
  2.   …
  3. </miiska>
# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter

3. Miis xuduudeed

Ku dar soohdimaha ku wareegsan miiska oo dhan iyo geesaha wareegsan ee ujeedooyinka qurxoon.

  1. < class class = "miis xuduudeed" > 
  2.   …
  3. </miiska>
# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
Calaamadee Otto @getbootstrap
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter

4. Miis cufan

Ka dhig miisaskaga kuwa is haysta adiga oo ku daraya .table-condensedfasalka si aad u gooyso suufka unugga miiska kala badh (laga bilaabo 8px ilaa 4px).

  1. < class class = "miiska-koondensed" > 
  2.   …
  3. </miiska>
# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter

5. Isku dar dhamaantood!

Dareen xor inaad isku darsato mid kasta oo ka mid ah fasallada miiska si aad u hesho muuqaalo kala duwan adiga oo isticmaalaya mid ka mid ah fasallada la heli karo.

  1. < class class = "miis-xariif ah oo miis-kooban" > 
  2.   ...
  3. </miiska>
Magaca buuxa
# Magaca koowaad Magaca Dambe Magaca isticmaale
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter

Foomamka

HTML iyo CSS dabacsan

Qaybta ugu fiican ee ku saabsan foomamka Bootstrap waa in dhammaan agabyadaada iyo kontarooladaada ay u muuqdaan kuwo aad u wanaagsan si kasta oo aad ugu dhisto calaamadayntaada. Looma baahna HTML xad dhaaf ah, laakiin waxaan siinaa qaababka kuwa u baahan.

Qaabab aad u adag ayaa la socda fasallo kooban oo la miisaami karo si ay u habeeyaan fudud iyo isku xidhka dhacdada, markaa waxaad daboolaysaa tallaabo kasta.

Afar habayn ayaa lagu daray

Bootstrap waxay la timaadaa taageero afar nooc oo qaab qaabayn ah:

  • Toosan (ugu tala galay)
  • Raadi
  • Inline
  • Horizontal

Noocyada kala duwan ee qaabka qaabaynta waxay u baahan yihiin isbeddelo si loo calaamadiyo, laakiin kontaroolada laftoodu way sii jiraan oo way u dhaqmaan si la mid ah.

Maamul goboleedyada iyo qaar kaloo badan

Foomamka Bootstrap waxaa ka mid ah qaabab loogu talagalay dhammaan kontaroolada foomka saldhigga sida gelinta, qoraalka, oo dooro waxaad filan lahayd. Laakin waxa kale oo ay la timaadaa qaybo badan oo caado ah sida agabka lifaaqan iyo kuwa la sii diyaariyay iyo taageerada liisaska sanduuqyada hubinta.

Dawladaha sida khaladka, digniinta, iyo guusha ayaa lagu daraa nooc kasta oo ah xakamaynta foomka. Waxa kale oo ku jira qaababka kontaroolada naafada.

Afar nooc oo foom ah

Bootstrap waxay bixisaa calaamadayn fudud iyo qaabab afar nooc oo foomamka shabakada caadiga ah.

Magaca Fasalka Sharaxaada
Toosan (ugu tala galay) .form-vertical (looma baahna) Summadaha is dulsaaran, ku toosan bidix ee kor ku xusan
Inline .form-inline Summada bidix ku toosan iyo kontaroolada xannibaadda khadka ee qaabka is haysta
Raadi .form-search Gelida qoraalka dheeriga ah ee qaabaynta raadinta caadiga ah
Horizontal .form-horizontal Sabbeyn bidix, sumadaha midig ku toosan ee isla xariiqda kontaroolada

Tusaalooyinka foomamka iyadoo la isticmaalayo kontaroolada foomamka, ma jiraan calaamado dheeraad ah

Qaabka aasaasiga ah

Khariidad fudud oo fudud oo aan lahayn calaamado dheeraad ah.

Tusaalaha qoraalka caawinta heerka xannibaadda halkan.

  1. < class form = "wanaagsan" > 
  2.   <label> Magaca summada </label>
  3.   <input type = "text" class = "span3" placeholder = " Qor wax..." >   
  4.   <span class = "help-block" > Tusaalaha qoraalka caawinta heerka block. </span> 
  5.   < class calaamad = "checkbox" > 
  6.     <input type = "checkbox" > I hubi 
  7.   </label>
  8.   <button type = "gudbi" class = "btn" > Gudbi </button>  
  9. </form>

Foomka raadinta

Ku dar .form-searchfoomka .search-queryiyo input.

  1. < class form = "si fiican qaab-raadinta" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Raadi </button>  
  4. </form>

Foomka khadka

Ku dar .form-inlinesi aad u hagaajiso toosinta toosan iyo kala dheeraynta kontaroolada foomka.

  1. < class form = "well form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" meeleeyaha = "Password" >   
  4.   < class calaamad = "checkbox" > 
  5.     <input type = "checkbox" > I xasuuso 
  6.   </label>
  7.   <button type = "gudbi" class = "btn" > Soo gal </button>  
  8. </form>

Foomamka toosan

Midigta ayaa lagu muujiyay dhammaan kontaroolada qaabka caadiga ah ee aan taageerno. Waa kuwan liiska la soo saaray:

  • gelinta qoraalka (qoraalka, erayga sirta ah, iimaylka, iwm)
  • sanduuqa hubinta
  • raadiyaha
  • dooro
  • dooro badan
  • galitaanka faylka
  • text area

Marka lagu daro qoraalka qaabka xorta ah, gelinta HTML5 kasta oo qoraalka ku saleysan ayaa sidaas u muuqata.

Tusaale ahaan calaamadaynta

Marka la eego qaabka qaabka sare ee tusaalaha, waa kan calaamadaynta la xidhiidha galinta iyo kooxda koontaroolka koowaad. The .control-group, .control-label, iyo .controlsfasalada dhamaantood waxa looga baahan yahay habaynta.

  1. < class form = "form-horizontal" > 
  2.   <fieldset>
  3.     <legend> Qoraalka halyeyga ah </legend>
  4.     <div class = "koontarool-koox" > 
  5.       <label class = "control-label" loogu talagalay = "input01" > gelinta qoraalka </label>  
  6.       <div class = "koontaroolada" > 
  7.         <input type = "text" class = "input-xlarge" id = "input01" >   
  8.         <p class = "help-block" > Taageerada qoraalka </p> 
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

Xakamaynta foomka

Bootstrap wuxuu leeyahay qaabab loogu talagalay biraawsarka taageerto diiradda iyo disabledgobolada. Waxaan meesha ka saarna Webkit-ka caadiga ah outlineoo aan ka codsanaa box-shadowmeesheeda :focus.

Xaqiijinta foomka

Waxa kale oo ku jira qaababka ansaxinta khaladaadka, digniinaha, iyo guusha. Si aad u isticmaasho, ku dar fasalka khaladka agagaarka .control-group.

  1. <fieldset
  2.   class = "khalad-koox-kooxeed" >
  3.   …
  4. </fieldset>
Qaar ayaa halkan ku qiimeeya
Waxaa laga yaabaa inay wax khaldameen
Fadlan sax qaladka
Woohoo!
Woohoo!

Kordhinta xakamaynta foomka

Diyaari oo ku dheji gelinta

Kooxaha wax gelinta-oo wata qoraal ku lifaaqan ama horay loo sii diyaariyay-waxay ku siinayaan hab fudud oo lagu bixin karo macnaha guud ee wax-soo-gelintaada. Tusaalooyinka waaweyn waxaa ka mid ah calaamadda @ ee magacyada isticmaaleyaasha Twitter ama $ dhaqaalaha.

Sanduuqyada hubinta iyo raadiyaha

Ilaa v1.4, Bootstrap wuxuu u baahday calaamadayn dheeri ah oo ku wareegsan sanduuqyada hubinta iyo raadiyaha si loo raro. Hadda, waa arrin fudud in lagu celiyo kii soo <label class="checkbox">duuduubay <input type="checkbox">.

Sanduuqyada jeeg-garaynta iyo raadiyaha ayaa sidoo kale la taageeraa. Kaliya ku dar .inlinemid kasta .checkboxama .radiowaad dhammaysay.

Foomamka khadka tooska ah oo lifaaq/hordhig

Si aad u isticmaasho prepend ama lifaaq galinta qaab khad toosan, hubi inaad dhigto .add-onisla inputxariiqda, bilaa boos

Foomka caawinta qoraalka

Si aad ugu darto qoraalka caawinta ee foomkaaga gelinta, ku dar qoraalka caawinta khadka tooska ah leh <span class="help-inline">ama xidhid qoraal ah <p class="help-block">ka dib curiyaha galinta.

Isticmaal .span*fasalo isku mid ah oo ka socda nidaamka grid cabbirka wax-gelinta.

Waxa kale oo aad isticmaali kartaa fasalo taagan oo aan khariidad ku samayn shabkada, la qabsanaya qaababka CSS ee ka jawaabaya, ama xisaabaadka noocyada kala duwan ee kontaroolada (tusaale, inputvs. select).

@

Halkan waxaa ah qoraal caawimo ah

.00
Halkan waxaa ah qoraal caawinaad dheeri ah
$ .00

Fiiro gaar ah: Calaamaduhu waxay ku wareegsan yihiin dhammaan xulashooyinka meelaha gujinta ka weyn iyo foom la isticmaali karo.

Badhamada

badhanka class="" Sharaxaada
btn Badhanka caadiga ah ee cawlan oo leh gradient
btn btn-primary Waxay bixisaa miisaan muuqaal oo dheeri ah oo tilmaamaya ficilka aasaasiga ah ee badhamada
btn btn-info Loo isticmaalo beddelka qaababka caadiga ah
btn btn-success Waxay tuseysaa fal guul ah ama mid togan
btn btn-warning Waxay tilmaamaysaa in taxaddar laga yeesho tallaabadan
btn btn-danger Waxay muujinaysaa fal xun ama khatar ah
btn btn-inverse Badhanka cawlan ee kale, oo aan ku xidhnayn fal macne ama isticmaal

Badhamada ficilada

Caadi ahaan, badhamada waa in loo isticmaalo oo kaliya ficilada halka hyperlinks loo isticmaali doono walxaha. Tusaale ahaan, "Download" waa inay noqotaa badhan halka "waxqabadyadii dhawaa" ay noqon lahaayeen iskuxir.

Hababka badhanka waxaa lagu dabaqi karaa wax kasta iyadoo .btnfasalka lagu dabaqay. Si kastaba ha ahaatee, sida caadiga ah waxaad u baahan doontaa inaad kuwan ku dabaqdo oo keliya <a>iyo <button>walxaha.

Iswaafajinta browserka

IE9 kuma gooyo jaangooyooyinka asalka ah ee geesaha wareegsan, markaa waanu ka saarnaa. La xidhiidha, IE9 waxay jank ka dhigtaa curiyayaasha naafada buttonah, iyagoo ka dhigaya qoraal cawl leh hadh-qoraal xun oo aynaan hagaajin karin.

Cabbirro badan

Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-large, .btn-small, ama .btn-minilaba cabbir oo dheeraad ah.


Gobolka naafada

Badhamada naafada ah, ku dar .disabledfasalka isku xirka iyo disabledsifada <button>curiyeyaasha.

Xiriirinta aasaasiga ah Xiriirinta

Madaxa kor u qaad! Waxaan u isticmaalnaa .disabledsida fasalka utility halkan, oo la mid ah .activefasalka caadiga ah, sidaas darteed horgale looma baahna.

Hal fasal, tagsyo badan

Isticmaal .btnfasalka <a>, <button>, ama <input>element.

Xiriirinta 
  1. <a class = "btn" href = "" > Linkiga </a>  
  2. <button class = "btn" type = "gudbi" >  
  3.   badhanka
  4. </button>
  5. < class class = "btn" type = "button"  
  6.          qiimaha = "Input" >
  7. < class input = "btn" type = "gudbi"  
  8.          qiimaha = " Gudbi " >

Sida dhaqanka ugu fiican, isku day inaad ku wajahdo cunsurka adiga macnaha guud si aad u hubiso isu dhigma samaynta browser-ka. Haddii aad leedahay input, isticmaal <input type="submit">badhanka.

Astaamo ay si naxariis leh u bixiyeen Glyphicons

  • icon-glaas
  • icon-music
  • icon-raadinta
  • icon-baqshad
  • icon-wadnaha
  • icon-xiddig
  • icon-xiddig-madhan
  • icon-user
  • icon-filim
  • icon-th-weyn
  • icon-th
  • icon-th-liiska
  • icon-ok
  • icon-saar
  • icon-soo-jiid-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-qashin
  • icon-guriga
  • icon-faylka
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-soo dejiso
  • icon-upload
  • icon-inbox
  • icon-ciyaar-goobo
  • icon-ku celi
  • icon-cusbooneysi
  • icon-liiska-alt
  • icon-quful
  • icon-calan
  • icon-madax-madaxeed
  • icon-mugga-off
  • icon-mugga-hoos
  • icon-mugga-sare
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-buug
  • icon-bookmark
  • icon-daabacan
  • icon-camera
  • icon-font
  • icon-dhirran
  • icon-italic
  • icon-qoraalka-dhererka
  • icon-qoraalka-ballaadhka
  • icon-align-bidix
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-liiska
  • icon-jid-bidix
  • icon-indent-midig
  • icon-facetime-video
  • icon-sawir
  • icon-qalin
  • icon-map-calaamadeeyaha
  • icon-hagaajin
  • icon-midab
  • icon-wax ka beddel
  • icon-wadaag
  • icon-jeeg
  • icon-dhaqdhaqaaq
  • icon-tallaabo-dib u dhac
  • icon-dhakhso-dib u dhac
  • icon-dib u dhac
  • icon-ciyaar
  • icon-hakin
  • icon-joojin
  • icon-hore
  • icon-dhakhso-hor-u-socod
  • icon-tallaabo-hore
  • icon-saar
  • icon-chevron-bidix
  • icon-chevron-midig
  • icon-plus-calaamad
  • icon-jaro-calaamad
  • calaamad-saar-calaamad
  • icon-ok-calaamad
  • icon-su'aal-calaamad
  • icon-info-calaamadaha
  • icon-screenshot
  • icon-saar-goobo
  • icon-ok-goobo
  • icon-ban-goobo
  • icon-falaar-bidix
  • icon-falaar-midig
  • icon-falaar-kor
  • icon-falaar-hoos
  • icon-share-alt
  • icon-cabbir-buuxa
  • icon-cabbir-yar
  • icon-plus
  • icon-laga jaray
  • icon-asterisk
  • icon-exclamation-calaamad
  • icon-hadiyad
  • icon-caleen
  • icon-dabka
  • icon-il-furan
  • icon-indho-dhow
  • icon-digniin-calaamad
  • icon-diyaarad
  • icon-kalandarka
  • icon- random
  • icon-faallo
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-kaartooyo
  • icon-folder-ku dhow
  • icon-folder-furan
  • icon-cabbir-toos ah
  • icon-cabbir-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-gambaleelka
  • icon-shahaadad
  • icon-suulka- kor
  • icon-suul-hoos
  • icon-gacan-midig
  • icon-gacan-bidix
  • icon-gacan-up
  • icon-gacan-hoos
  • icon-goobo- falaar-midig
  • icon-goobo- fallaadho-bidix
  • icon-goobo- falaarta-sare
  • icon-goobo- falaar-hoos
  • icon-globe
  • fur-fure
  • icon-hawlaha
  • icon-shaandhaynta
  • icon-koob yar
  • icon-shaashadda

Loo dhisay sida sprite

Halkii aan ka samayn lahayn calaamad kasta codsi dheeri ah, waxaanu ku soo ururinay sprite— farabadan oo sawirro ah oo ku jira hal fayl oo isticmaala CSS si uu u dhigo sawirada background-position. Kani waa isla habka aan ku isticmaalno Twitter.com si fiican ayuu nooga shaqeeyay.

Dhammaan fasallada summada waxa lagu .icon-horgaleyey magac-u-yeelid habboon, si la mid ah qaybahayada kale. Tani waxay kaa caawin doontaa inaad iska ilaaliso isku dhacyada qalabka kale.

Glyphicons waxa ay na siisay isticmaalka Halflings-ka lagu dejiyay agabkayaga isha furan ilaa inta aanu ku bixinayno isku xidhka iyo credit halkan dukumeentiyada. Fadlan tixgeli inaad sidaas oo kale ku sameyso mashaariicdaada.

Sida loo isticmaalo

Bootstrap waxay u isticmaashaa summada <i>dhammaan summada, laakiin ma haystaan ​​fasal kiis-kaliya horgale la wadaago. Si aad u isticmaasho, dhig koodka soo socda meel kasta:

  1. <i class = "icon-search" ></i>

Waxa kale oo jira habab diyaar u ah calaamadaha rogan (caddaan), oo lagu diyaariyey hal fasal oo dheeraad ah:

  1. <i class = "icon-search icon-white" ></i>

Waxaa jira 120 fasal oo aad ka dooran karto astaantaada. Kaliya ku dar <i>sumad leh fasalada saxda ah oo aad dejisay Waxaad ka heli kartaa liiska oo dhan sprites.less ama halkan dukumeentigan.

Madaxa kor u qaad! Markaad isticmaalayso xadhkaha qoraalka, sida badhamada ama isku xidhka nav, hubi inaad ka tagto meel bannaan ka dib <i>sumadda si aad u kala fogaato.

Isticmaal kiisaska

Astaamaha waa weyn yihiin, laakiin halkee laga isticmaali karaa? Halkan waxaa ah fikrado dhowr ah:

  • Sida muuqaallo loogu talagalay marin-haynta dhinacaaga
  • Si aad u hesho hagitaan sumadda wadata oo kali ah
  • Wixii badhamada kaa caawinaya gudbinta macnaha ficilka
  • Xiriirinta lala wadaagayo macnaha guud ee meesha isticmaaluhu u socdo

Asal ahaan, meel kasta oo aad ku dhejin karto <i>sumad, waxaad dhejin kartaa icon.

Tusaalooyinka

U isticmaal badhamada, kooxaha badhanka si aad u heshid bar, navigation, ama foomka la sii diyaariyay.

Isticmaale

Dib u cusboonaysii Baadhid Tirtir

Faallo Dejinta Macluumaad dheeraad ah