Bootstrap

CSS ea motheo

Lintlha tsa mantlha tsa HTML li entsoe le ho ntlafatsoa ka litlelase tse atolositsoeng.

Tlhaloso ea litlhaku

Lihlooho

Lihlooho tsohle tsa HTML, <h1>ka har'a <h6>tsona lia fumaneha.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5
h6. Sehlooho sa 6

Kopi ea 'mele

Boemo ba lefatše ka bophara ba Bootstrap font-sizeke 14px , e nang line-heightle 20px . Sena se sebetsa <body>lirapeng tsohle. Ho feta moo, <p>(lirapa) li fumana moeli o tlase oa halofo ea bophahamo ba line-ea tsona (10px ka ho sa feleng).

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

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. E entse hore ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. E entse hore ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopi ea 'mele oa moetapele

Etsa hore serapa se hlahelle ka ho eketsa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Ke mollis, e seng commodo luctus.

<p class = "etapele" > ... </p>

E hahiloe ka Ho Nyane

Sekala sa typographic se ipapisitse le mefuta e 'meli ea LESS ka mefuta-futa.ka tlase : @baseFontSizele @baseLineHeight. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala. Re sebelisa mefuta eo le lipalo tse bonolo ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling. Iketsetse tsona 'me u ikamahanye le Bootstrap.

Khatello

Sebelisa li-tag tsa khatiso tsa HTML tse nang le mekhoa e bobebe.

<small>

Bakeng sa ho nyenyefatsa ka har'a mola kapa li-block tsa mongolo, sebelisa theke e nyane.

Mola ona oa mongolo o reretsoe ho nkoa e le mongolo o motle.

<p> <e nyenyane> Mola ona oa mongolo o reretsoe ho nkoa e le mongolo o motle. </ nyenyane> </p>

Sebete

Bakeng sa ho totobatsa sekhechana sa mongolo ka boima bo boima ba fonte.

Sekhechana se latelang sa mongolo se ngotsoe joalo ka mongolo o motenya .

<strong> e ngotsoe joalo ka mongolo o motenya </strong>

Mongolo o tšekaletseng

Bakeng sa ho totobatsa sekhechana sa mongolo ka mongolo o tšekaletseng.

Sekhechana se latelang sa mongolo se ngotsoe joalo ka mongolo o tšekaletseng .

<em> e ngotsoe joalo ka mongolo o ngotsoeng ka mongolo o tšekaletseng </em>

Hlokomela!Ikutloe u lokolohile ho sebelisa <b>le <i>ho HTML5. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Lihlopha tsa khatiso

Hlahisa moelelo ka mebala ka lihlopha tse 'maloa tsa lisebelisoa tsa khatiso.

Fusce dapibus, tellus ac cursus commodo, tor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

E entse hore ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tor mauris nibh. </p> 
  2. <p class = "temoso ya mongolo" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Likgutsufatso

Tšebeliso e hlophisitsoeng ea HTML's <abbr>element bakeng sa khutsufatso le li-acronyms ho bontša mofuta o atolositsoeng ho hover. Likgutsufatso tse nang le titletšobotsi li na le moeli o ka tlase o nang le matheba a bobebe le sekhesa sa thuso ho hover, e fanang ka moelelo o eketsehileng ho hover.

<abbr>

Bakeng sa mongolo o atolositsoeng hover e telele ea khutsufatso, kenyelletsa titletšobotsi.

Kgutsufatso ya lentsoe tšobotsi ke attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Eketsa .initialismho khutsufatso ea boholo ba fonte e nyane hanyane.

HTML ke ntho e ntle ka ho fetisisa ho tloha ha bohobe bo sehiloeng.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Liaterese

Hlahisa lintlha tsa ho ikopanya le moholo-holo ea haufi kapa sehlopha sohle sa mosebetsi.

<address>

Boloka fomete ka ho qetella mela eohle ka <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Lebitso le
felletseng [email protected] 
  1. <aterese>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Mohala" > P: </abbr> (123) 456-7890 
  6. </aterese>
  7.  
  8. <aterese>
  9.   <strong> Lebitso le Feletseng </strong><br>
  10.   <a href = "mailto:#"> [email protected] </a> _ 
  11. </aterese>

Mantsoe a thibelang

Bakeng sa ho qotsa li-block tsa litaba tse tsoang mohloling o mong ka har'a tokomane ea hau.

Blockquote ea kamehla

Qetella HTML<blockquote> efe kapa efe joalo ka qotso. Bakeng sa mantsoe a qotsitsoeng ka kotloloho re khothaletsa a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo. </p>
  3. </blockquote>

Likhetho tsa blockquote

Setaele le litaba li fetoha bakeng sa mefuta e bonolo ea blockquote e tloaelehileng.

Ho reha mohloli

Kenya <small>tag bakeng sa ho tseba mohloli. Qetella lebitso la mosebetsi oa mohloli ka <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo. </p>
  3.   <e nyenyane> Motho ea tummeng <cite title = "Mohloli oa Sehlooho" > Sehlooho sa Mohloli </cite></small> 
  4. </blockquote>

Lipontšo tse ling

Sebelisa .pull-rightbakeng sa blockquote e phaphametseng, e lebang ka ho le letona.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli Title 
  1. <blockquote class = "hula-ho le letona" > 
  2.   ...
  3. </blockquote>

Manane

Ha ea laeloa

Lethathamo la lintho tseo tatellano e sa tsotelleng ka ho hlaka.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem le massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Likokoana-hloko tsa Purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

E laetsoe

Lethathamo la lintho tseo tatellano e bohlokoa ka ho hlaka.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem le 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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Unstyled

Lethathamo la lintho tse se nang list-stylekapa tse ling tse ka letsohong le letšehali.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem le massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Likokoana-hloko tsa Purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Tlhaloso

Lethathamo la mantsoe a nang le litlhaloso tse amanang le ona.

Manane a tlhaloso
Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Tlhaloso e tshekaletseng

Etsa mantsoe le litlhaloso ka ho <dl>latellana.

Manane a tlhaloso
Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl sehlopha = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Hlokomela!Manane a litlhaloso a tšekaletseng a tla fokotsa mantsoe a malelele haholo hore a ka kena kholeng e ka ho le letšehali text-overflow. Libopong tsa pono tse tšesaane, li tla fetohela ho sebopeho sa tlhophiso ea kamehla.

Khoutu

E mocheng

Qetella likotoana tse nyane tsa khoutu ka <code>.

Ka mohlala, <section>e lokela ho phutheloa joalo ka inline. 
  1. Mohlala , <code><section> < / code > e lokela ho phutheloa joalo ka inline .

Thibelo ea motheo

Sebelisa <pre>bakeng sa mela e mengata ea khoutu. Etsa bonnete ba hore u balehile masakaneng afe kapa afe a khouto bakeng sa phetolelo e nepahetseng.

<p>Mohlala oa mongolo mona...</p>
  1. <pele>
  2.   <p>Mohlala oa mongolo mona...</p>
  3. </ pre>

Hlokomela!Etsa bonnete ba hore u boloka khoutu ka har'a <pre>li-tag haufi le le letšehali kamoo ho ka khonehang; e tla fana ka li-tab tsohle.

O ka eketsa ka boikhethelo .pre-scrollablesehlopha se tla beha bophahamo bo boholo ba 350px le ho fana ka y-axis scrollbar.

Litafole

Mekhoa ea kamehla

Bakeng sa setaele sa mantlha - padding e bobebe le li-divider tse tšekaletseng feela - eketsa sehlopha sa mantlha .tableho eng kapa eng <table>.

# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter 
  1. < sehlopha sa tafole = "tafole" > 
  2.   …
  3. </tafole>

Lihlopha tsa boikhethelo

Kenya leha e le efe ea lihlopha tse latelang ho sehlopha .tablesa basebetsi.

.table-striped

E eketsa liqoaha moleng ofe kapa ofe oa tafole ka har'a khetho <tbody>ea :nth-childCSS (ha e fumanehe ho IE7-IE8).

# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter 
  1. < sehlopha sa tafole = "table-striped table" > 
  2.   …
  3. </tafole>

.table-bordered

Kenya meeli le likhutlo tse chitja tafoleng.

# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
Tšoaea Otto @getbootstrap
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter 
  1. < sehlopha sa tafole = "tafole e moeling oa tafole" > 
  2.   …
  3. </tafole>

.table-hover

Lumella boemo ba hover holim'a mela ea tafole ka har'a <tbody>.

# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter 
  1. < sehlopha sa tafole = "table table-hover" > 
  2.   …
  3. </tafole>

.table-condensed

E etsa hore litafole li kopane ho feta ka ho seha padding ea lisele ka halofo.

# Lebitso la pele Fane Username
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter 
  1. < sehlopha sa tafole = "table table-condensed" > 
  2.   …
  3. </tafole>

Lihlopha tsa mela e ikhethelang

Sebelisa litlelase tsa maemo ho mebala methalong ea litafole.

Sehlopha Tlhaloso
.success E bontsha ketso e atlehileng kapa e ntle.
.error E supa ketso e kotsi kapa e ka bang mpe.
.warning E bontša temoso e ka 'nang ea hloka ho eloa hloko.
.info E sebelisoa e le mokhoa o mong oa mefuta e sa tšoaneng.
# Sehlahisoa Tefo e Nkiloeng Boemo
1 TB - Khoeli le khoeli 01/04/2012 E amohetsoe
2 TB - Khoeli le khoeli 02/04/2012 Hanne
3 TB - Khoeli le khoeli 03/04/2012 E emetse
4 TB - Khoeli le khoeli 04/04/2012 Letsa ho netefatsa 
  1. ...
  2.   < tr class = "katleho" >
  3.     <td> 1 < /td>
  4.     <td>TB - Khoeli le Khoeli</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>E amohetswe</ td >
  7.   </ tr >
  8. ...

Theknoloji ea tafole e tšehetsoeng

Lethathamo la likarolo tsa HTML tse tšehetsoeng le hore na li lokela ho sebelisoa joang.

Tag Tlhaloso
<table> Karolo ea ho phuthela bakeng sa ho hlahisa data ka mokhoa oa tabular
<thead> Karolo ea setshelo bakeng sa mela ea lihlooho tsa tafole ( <tr>) ho tšoaea litšiea tsa tafole
<tbody> Karolo ea setshelo bakeng sa mela ea tafole ( <tr>) 'meleng oa tafole
<tr> Karolo ea nkho bakeng sa sete ea lisele tsa tafole ( <td>kapa <th>) tse hlahang moleng o le mong
<td> Tafole ea kamehla
<th> Sele ea tafole e khethehileng bakeng sa kholomo (kapa mola, ho latela boholo le sebaka
)<thead>
<caption> Tlhaloso kapa kakaretso ea seo tafole e se tšoereng, haholo-holo ho babali ba skrineng 
  1. <tafole>
  2.   <caption> ... </caption>
  3.   <hlooho>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </ hlooho>
  9.   <botho>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tafole>

Mefuta

Mekhoa ea kamehla

Litaolo tsa liforomo tsa motho ka mong li fumana setaele, empa ntle le maemo a hlokahalang ho <form>li-markup kapa liphetoho tse kholo. Liphetho ka li-labels tse behiloeng ka ho le letšehali holim'a litaelo tsa foromo.

Tšōmo Mohlala oa mongolo oa thuso oa boemo ba block mona. 
  1. <foromo>
  2.   <setsi sa masimo>
  3.     <tšōmo> Tšōmo < /legend>
  4.     <label> Lebitso la label </label>
  5.     <input type = "text" placeholder = "Ngola ntho e itseng..." >  
  6.     <span class = "help-block" > Mohlala oa mongolo oa thuso oa boemo ba block mona. </span> 
  7.     <label class = "checkbox" > 
  8.       < mofuta oa ho kenya = "checkbox" > Nchebe 
  9.     </ label>
  10.     < mofuta oa konopo = "submit" class = "btn" > Kenya </button>  
  11.   </ fieldset>
  12. </ form>

Litlhophiso tsa boikhethelo

E kenyellelitsoe le Bootstrap ho na le mefuta e meraro ea boikhethelo bakeng sa linyeoe tsa tšebeliso e tloaelehileng.

Batla foromo

Eketsa .form-searchforomong le .search-queryho <input>bakeng sa ho kenya mongolo ka botlalo.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Batla </button>  
  4. </ form>

Foromo ea moleng

Eketsa .form-inlinebakeng sa lileibole tse tsepameng le lets'ehali le li-control tsa inline-block bakeng sa sebopeho se kopaneng.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Imeile" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Nkgopole 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > Kena </button>  
  8. </ form>

Sebopeho se otlolohileng

Hlophisa li-label ka ho le letona 'me u li phaphamele ka ho le letšehali ho etsa hore li hlahe moleng o tšoanang le oa li-control. E hloka liphetoho tse ngata ho tsoa ho foromo ea kamehla:

  • Eketsa .form-horizontalka foromo
  • Qetella lileibole le li-control ka hare.control-group
  • Eketsa .control-labelho label
  • Qetella litsamaiso life kapa life tse amanang le tsona .controlsbakeng sa tlhophiso e nepahetseng
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" bakeng sa = "inputEmail" > Imeile </label>  
  4.     <div class = "taolo" > 
  5.       <input type = "text" id = "inputEmail" placeholder = " Imeile" >   
  6.     </ div>
  7.   </ div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" bakeng sa = "inputPassword" > Password </label>  
  10.     <div class = "taolo" > 
  11.       <input type = "password" id = "inputPassword" placeholder = " Password" >   
  12.     </ div>
  13.   </ div>
  14.   <div class = "control-group" > 
  15.     <div class = "taolo" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Nkgopole 
  18.       </ label>
  19.       <button type = "submit" class = "btn" > Kena </button>  
  20.     </ div>
  21.   </ div>
  22. </ form>

Litaolo tsa liforomo tse tšehelitsoeng

Mehlala ea li-control tse tloaelehileng tsa liforomo tse tšehetsoeng ka sebopeho sa sebopeho sa mohlala.

Lintho tse kenang

Taolo ea liforomo tse atileng haholo, likarolo tsa mongolo tse thehiloeng ho mongolo. E kenyelletsa ts'ehetso ea mefuta eohle ea HTML5: mongolo, password, nako, nako ea lehae, letsatsi, khoeli, nako, beke, nomoro, lengolo-tsoibila, url, batla, mohala le mmala.

E hloka ho sebelisa sesebelisoa se khethehileng typeka linako tsohle.

  1. <input type = "text" placeholder = "Mongolo oa mongolo" >

Textarea

Taolo ea foromo e ts'ehetsang mela e mengata ea mongolo. Fetola rowstšobotsi ha ho hlokahala.

  1. <textarea rows = " 3" ></textarea>

Li-checkbox le liea-le-moea

Li-checkbox ke tsa ho khetha khetho e le 'ngoe kapa tse' maloa lethathamong ha liea-le-moea e le tsa ho khetha khetho e le 'ngoe ho tse ngata.

Ea kamehla (e phuthetsoe)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
  4. </ label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" e hlahlobilwe >     
  8.   Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
  9. </ label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Khetho ea bobeli e ka ba ntho e 'ngoe' me ho e khetha ho tla tlosa khetho ea pele
  13. </ label>

Mabokose a marang-rang

Eketsa .inlinesehlopha ho letoto la li-checkbox kapa liea-le-moea bakeng sa li-control tse hlahang moleng o le mong.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </ label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </ label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </ label>

Khetha

Sebelisa khetho ea kamehla kapa u hlalose a multiple="multiple"ho bontša likhetho tse ngata ka nako e le 'ngoe.


  1. <khetha>
  2.   <khetho> 1 </ kgetho>
  3.   <khetho> 2 </ kgetho>
  4.   <khetho> 3 </ kgetho>
  5.   <khetho> 4 </ kgetho>
  6.   < kgetho> 5 </ kgetho>
  7. </ khetha>
  8.  
  9. <khetha multiple = "multiple" > 
  10.   <khetho> 1 </ kgetho>
  11.   <khetho> 2 </ kgetho>
  12.   <khetho> 3 </ kgetho>
  13.   <khetho> 4 </ kgetho>
  14.   < kgetho> 5 </ kgetho>
  15. </ khetha>

Ho eketsa taolo ea liforomo

E eketsa ka holim'a li-control tse teng tsa sebatli, Bootstrap e kenyelletsa likarolo tse ling tsa bohlokoa tsa foromo.

Lintlha tse reriloeng le tse kentsoeng

Kenya mongolo kapa likonopo pele kapa ka mor'a tlhahiso efe kapa efe e thehiloeng ho mongolo. Hlokomela hore selectlikarolo ha li tšehetsoe mona.

Likhetho tsa kamehla

Qetella ka .add-onle e input'ngoe ea lihlopha tse peli ho lokisetsa kapa ho hlomathisa mongolo ho kenyeletso.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "eketsa-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" setshwari sa sebaka = "Username" >    
  4. </ div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "eketsa-on" > .00 </span> 
  8. </ div>

Kopantswe

Sebelisa litlelase ka bobeli le mehlala e 'meli ea .add-onho lokisetsa le ho eketsa tlhahiso.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "eketsa-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "eketsa-on" > .00 </span> 
  5. </ div>

Likonopo sebakeng sa mongolo

Sebakeng sa a <span>nang le mongolo, sebelisa a .btnho hokela konopo (kapa tse peli) ho kenyeletso.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   < sehlopha sa konopo = "btn" type = "button" > Eya! </ konopo>  
  4. </ div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Batla </button>  
  4.   < sehlopha sa konopo = "btn" type = "button" > Dikgetho </button>  
  5. </ div>

Likonopo tse theohang

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Ketso
  6.       <span class = "caret" > </span> 
  7.     </ konopo>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </ div>
  12. </ div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Ketso
  5.       <span class = "caret" > </span> 
  6.     </ konopo>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </ div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </ div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Ketso
  5.       <span class = "caret" > </span> 
  6.     </ konopo>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </ div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Ketso
  15.       <span class = "caret" > </span> 
  16.     </ konopo>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </ div>
  21. </ div>

Batla foromo

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Batla </button>  
  5.   </ div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Batla </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </ div>
  10. </ form>

Laola boholo

Sebelisa lihlopha tsa boholo bo lekanyelitsoeng joaloka .input-largekapa u bapise lintho tseo u li kentseng le boholo ba kholomo ea grid u sebelisa .span*lihlopha.

Thibela lintho tse kenang

Etsa hore eng kapa eng <input>kapa <textarea>ntho e itšoare joalo ka karolo ea block level.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Boholo bo lekanang

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Hlokomela!Liphetolelong tse tlang, re tla be re fetola ts'ebeliso ea litlelase tsena tse amanang ho tsamaisana le boholo ba likonopo tsa rona. Ka mohlala, .input-largee tla eketsa palo le boholo ba fonte ea ho kenya.

Sekhahla sa grid

Sebelisa .span1ho .span12bakeng sa lintho tse kenang tse tsamaellanang le likholomo tsa grid.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <khetha sehlopha = "span1" > 
  5.   ...
  6. </ khetha>
  7. <khetha sehlopha = "span2" > 
  8.   ...
  9. </ khetha>
  10. <khetha sehlopha = "span3" > 
  11.   ...
  12. </ khetha>

Bakeng sa lisebelisoa tse ngata tsa grid moleng o mong le o mong, sebelisa .controls-rowsehlopha sa mofetoleli bakeng sa sebaka se nepahetseng . E phaphametsa lintho tse kenang ho senya sebaka se sesoeu, e beha mecheng e nepahetseng, 'me e hlakola phaphametse.

  1. <div class = "taolo" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </ div>
  4. <div class = "controls-rows-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </ div>
  8. ...

Litlhahiso tse ke keng tsa fetoloa

Hlahisa lintlha ka mokhoa o ke keng oa lokisoa ntle le ho sebelisa limmapa tsa 'nete.

Boleng bo bong mona 
  1. <span class = "input-xlarge e ke keng ea hlophisoa" > Boleng bo itseng mona </span>

Liketso tsa foromo

Qetella foromo ka sehlopha sa liketso (likonopo). Ha e behiloe ka har'a .form-horizontal, likonopo li tla ikemela ka bo eona ho tsamaisana le li-control tsa foromo.

  1. <div class = "liketso tsa sebopeho" > 
  2.   < mofuta oa konopo = "submit" class = "btn btn-primary" > Boloka liphetoho </button>  
  3.   < mofuta oa konopo = "button" class = "btn" > Hlakola </button>  
  4. </ div>

Mongolo oa thuso

Ts'ehetso ea boemo ba inline le block bakeng sa mongolo oa thuso o hlahang haufi le taolo ea liforomo.

Thuso ea inthaneteng

Mongolo oa thuso o ka hare 
  1. <input type = "text" ><span class = "help-inline" > Mongolo wa thuso ka hara </span>

Thibela thuso

Mantsoe a malelele a thusang a phunyeletsang moleng o mocha 'me a ka fetela ka nģ'ane ho mola o le mong. 
  1. <input type = "text" ><span class = "help-block" > Sengoloa se selelele sa thuso se phunyeletsang moleng o mocha mme se ka fetela ka nģ'ane ho mola o le mong. </span>

Foromo ea taolo e bolela

Fana ka maikutlo ho basebelisi kapa baeti ka maikutlo a mantlha mabapi le taolo ea liforomo le lileibole.

Tsepamiso ea maikutlo

Re tlosa outlinelitaele tsa kamehla litaolong tsa mefuta e meng ebe re sebelisa a box-shadowsebakeng sa eona bakeng sa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Sena se tsepamisitswe..." >

Maikutlo a holofetseng

Kenya disabledtšobotsi ho kenyelletso ho thibela tlhahiso ea mosebelisi le ho tsosa chebahalo e fapaneng hanyane.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" setshwari sa sebaka = "Kentswe e holofetseng mona..." e koalehile >

E bolela ho netefatsa

Bootstrap e kenyelletsa mekhoa ea ho netefatsa liphoso, temoso, lintlha le melaetsa ea katleho. Ho sebelisa, eketsa sehlopha se loketseng ho tse potolohileng .control-group.

Ho ka etsahala hore ebe ho na le phoso
Ka kopo, lokisa phoso
Username e nkiloe
Woohoo! 
  1. <div class = "temoso ea sehlopha sa taolo" > 
  2.   <label class = "control-label" for = "inputWarning" > Kena ka temoso </label>  
  3.   <div class = "taolo" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Ho ka etsahala hore ebe ho na le phoso </span> 
  6.   </ div>
  7. </ div>
  8. <div class = "phoso ea sehlopha sa taolo" > 
  9.   <label class = "control-label" for = "inputError" > Kena ka phoso </label>  
  10.   <div class = "taolo" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Ka kopo, lokisa phoso </span> 
  13.   </ div>
  14. </ div>
  15. <div class = "katleho ea sehlopha sa taolo" > 
  16.   <label class = "control-label" for = "inputSuccess" > Kenyo e atlehile </label>  
  17.   <div class = "taolo" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </ div>
  21. </ div>

Likonopo

Likonopo tsa kamehla

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e nang le .btnsehlopha se sebelisitsoeng. Leha ho le joalo, ka tloaelo u tla batla ho sebelisa tsena feela <a>le <button>likarolo bakeng sa phetolelo e ntle ka ho fetisisa.

Konopo sehlopha="" Tlhaloso
btn Konopo e tloaelehileng ea bohlooho e nang le gradient
btn btn-primary E fana ka boima bo eketsehileng ba pono mme e supa ketso ea mantlha ka har'a sete ea likonopo
btn btn-info E sebelisoa e le mokhoa o mong oa mefuta e sa tšoaneng
btn btn-success E bontsha ketso e atlehileng kapa e ntle
btn btn-warning E supa tlhokomeliso e lokelang ho nkuoa ka ketso ena
btn btn-danger E supa ketso e kotsi kapa e ka bang mpe
btn btn-inverse Konopo e 'ngoe e bohlooho bo lefifi, e sa tlamelletsoeng ketsong ea semantic kapa tšebeliso
btn btn-link Hatisa konopo ka ho etsa hore e shebahale joaloka sehokelo ha u ntse u boloka boitšoaro ba konopo

Sebapali se lumellanang

IE9 ha e jale li-gradients tsa bokamorao likhutlong tse chitja, kahoo rea li tlosa. E amanang, IE9 e jankifies buttonlikarolo tse holofetseng, e fetolela mongolo o moputsoa ka moriti o mobe oa mongolo oo re ke keng ra o lokisa.

Boholo ba likonopo

U batla likonopo tse kholoanyane kapa tse nyane? Kenya .btn-large, .btn-small, kapa .btn-minibakeng sa boholo bo eketsehileng.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Konopo e kgolo </button>  
  3.   <button class = "btn btn-large" type = "button" > Konopo e kholo </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > konopo ea kamehla </button>  
  7.   < sehlopha sa konopo = "btn" type = "button" > konopo ea kamehla </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Konopo e nyane </button>  
  11.   <button class = "btn btn-small" type = "button" > Konopo e nyane </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > konopo e nyane </button>  
  15.   <button class = "btn btn-mini" type = "button" > konopo e nyane </button>  
  16. </p>

Etsa likonopo tsa "block level" - tse fetang bophara ba motsoali - ka ho eketsa .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > konopo ea boemo ba thibela </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > konopo ea boemo ba thibela </button>

Boemo ba bokooa

Etsa hore likonopo li shebahale li sa totobale ka ho li khutlisa 50%.

Anchor element

Kenya .disabledsehlopha ho <a>likonopo.

Sehokelo sa mantlha Sehokelo 

  1. <a href = "#" class = "btn btn-large btn-primary disabled"> Sehokelo sa mantlha </a>  
  2. <a href = "#" class = "btn btn-large disabled"> Sehokelo </a>

Hlokomela!Re sebelisa .disablede le sehlopha sa lisebelisoa mona, se ts'oanang le .activesehlopha se tloaelehileng, kahoo ha ho hlokahale prefix. Hape, sehlopha sena ke sa bokhabane feela; o tlameha ho sebelisa JavaScript e tloaelehileng ho tima lihokelo mona.

Karolo ea konopo

Kenya disabledtšobotsi ho <button>likonopo.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "e holofetse " > Konopo ea mantlha </button>   
  2. < mofuta oa konopo = "button" class = "btn btn-large" e holofetse > Konopo </button>

Sehlopha se le seng, li-tag tse ngata

Sebelisa .btntlelase ho <a>, <button>, kapa <input>element.

Sehokelo 
  1. <a class = "btn" href = ""> Sehokelo </a> _  
  2. <button class = "btn" type = "submit" > Konopo </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

E le mokhoa o motle ka ho fetisisa, leka ho tsamaisana le moelelo oa taba ea hau ho netefatsa hore o tsamaisana le phetolelo ea sebatli. Haeba u na le input, sebelisa <input type="submit">konopo ea hau.

Litšoantšo

Kenya litlelase ho <img>element ho seta litšoantšo habonolo morerong ofe kapa ofe.

  1. <img src = "..." sehlopha = "img-rounded" >  
  2. <img src = "..." sehlopha = "img-circle" >  
  3. <img src = "..." sehlopha = "img-polaroid" >

Hlokomela! .img-rounded'me .img-circleu se ke ua sebetsa ho IE7-8 ka lebaka la ho hloka border-radiustšehetso.

Litšoantšo tsa Glyphicons

Litšoantšo tsa litšoantšo

Litšoantšo tse 140 ka sebopeho sa sprite, tse fumanehang ka bohlooho bo lefifi (kamehla) le bosoeu, bo fanoeng ke Glyphicons .

  • khalase ea setšoantšo
  • letšoao-mmino
  • ho batla litšoantšo
  • letšoao-enfelopo
  • icon-pelo
  • letšoao-naleli
  • aekhone-naledi e se nang letho
  • mosebelisi oa setšoantšo
  • setšoantšo-filimi
  • icon-th-kholo
  • letšoao-th
  • letšoao-th-lethathamo
  • icon-ok
  • aekhone-tlosa
  • aekhone-atometsa
  • aekhone-tsoom-out
  • letšoao la ho tima
  • letšoao-lets'oao
  • icon-cog
  • letšoao-litšila
  • letšoao-lehae
  • icon-file
  • nako ea letšoao
  • setšoantšo-tsela
  • icon-download-alt
  • icon-jarolla
  • aekhone-upload
  • letšoao-inbox
  • sedikadikwe sa diaekhone
  • letšoao-pheta
  • aekhone-ntlafaletsa
  • letšoao-lethathamo-alt
  • letšoao-lock
  • letšoao-folakha
  • li-icon-headphones
  • aekhone-bolumo-theoha
  • letšoao-bolumo-theoha
  • ho phahamisa molumo oa setšoantšo
  • icon-qrcode
  • letšoao-barcode
  • letšoao-tag
  • li-icon-tag
  • buka ea litšoantšo
  • letšoao-bookmark
  • letšoao-khatiso
  • khamera ea setšoantšo
  • letšoao-fonte
  • letšoao-botenya
  • letšoao-italic
  • bophahamo ba setšoantšo
  • aekhone-sengoloa-bophara
  • aekhone-lekanya-ka ho le letshehadi
  • letšoao-align-bohareng
  • aekhone-lekanya-ka ho le letona
  • icon-align-justify
  • lethathamo la litšoantšo
  • letšoao-indent-le letšehali
  • letšoao-indent-le letona
  • icon-facetime-video
  • setšoantšo-setšoantšo
  • letšoao-pentšele
  • letšoao-mapa-lesupa
  • aekhone-fetola
  • letšoao-tint
  • icon-edit
  • letšoao-karolelano
  • lekola-aekhone
  • letšoao-tsamaiso
  • letšoao-mohato-morao
  • letšoao-kapele-morao
  • letšoao-morao
  • papali ea litšoantšo
  • aekhone-khefutso
  • letšoao-emisa
  • letšoao-pele
  • letšoao-pele-pele
  • letšoao-ho ea pele
  • aekhone-eject
  • letšoao-chevron-le letšehali
  • icon-chevron-ka ho le letona
  • letšoao-plus-letšoao
  • letšoao-tlosa-letshwao
  • letšoao-tlosa-letshwao
  • letšoao-ok-sign
  • letšoao-potso-letšoao
  • letšoao-info-letšoao
  • icon-screenshot
  • lesakana-tlosa-letshwao
  • sedikadikwe sa icon-ok
  • sedikadikwe-thibelo ya letshwao
  • letšoao-motsu-le letšehali
  • letšoao-motsu-le letona
  • letšoao-motsu-up
  • letšoao-motsu-tlase
  • letšoao-share-alt
  • aekhone-resize-tlale
  • icon-resize-e nyane
  • icon-plus
  • aekhone-tlosa
  • letšoao la linaleli
  • letshwao-mokgotso-letshwao
  • letšoao-mpho
  • letšoao-lekhasi
  • letšoao-mollo
  • lets'oao-le-hlo-le-hlare
  • icon-ehlo-close
  • letšoao-temoso-ts'oao
  • letšoao-sefofane
  • letšoao-khalendara
  • letšoao-random
  • letšoao-maikutlo
  • letšoao-magnet
  • letšoao-chevron-up
  • letšoao-chevron-down
  • letšoao-retweet
  • kariki-kariki ya ho reka
  • icon-folder-koala
  • foldareng-e butsoe
  • aekhone-resize-thetical
  • aekhone-resize-ka-rapama
  • aekhone-hdd
  • letšoao-bullhorn
  • letšoao-bell
  • letšoao-setifikeiti
  • letshwao-thumb-up
  • letšoao-thomb-down
  • letšoao-letsoho-le letona
  • letšoao-letsoho-le letšehali
  • letšoao-letsoho
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-le letšehali
  • lets'oao-sakana-le-motsu-holimo
  • letšoao-sedikadikwe-motsu-tlase
  • icon-globe
  • sekoahelo sa setšoantšo
  • icon-mesebetsi
  • setlhoa-tshwantsho
  • letšoao-briefcase
  • icon-sekrineng se felletseng

Tlhahiso ea li-Glyphicons

Li-Glyphicons Halflings hangata ha li fumanehe mahala, empa tlhophiso lipakeng tsa Bootstrap le baetsi ba Glyphicons e entse hore sena se khonehe ntle ho tefo ho uena joalo ka bahlahisi. Rea leboha, re u kopa ho kenyelletsa sehokelo sa boikhethelo ho khutlela ho Glyphicons neng kapa neng ha ho khoneha.

Mokhoa oa ho sebelisa

Litšoantšo tsohle li hloka <i>tag e nang le sehlopha se ikhethileng, se kentsoeng pele ka icon-. Ho e sebelisa, beha khoutu e latelang hoo e ka bang kae kapa kae:

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

Ho boetse ho na le mefuta e fumanehang bakeng sa litšoantšo tse inverted (tse tšoeu), tse lokiselitsoeng ka sehlopha se le seng. Re tla qobella sehlopha sena ka ho khetheha ho hover le linaha tse sebetsang bakeng sa lihokelo tsa nav le dropdown.

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

Hlokomela!Ha u sebelisa ka thoko ho likhoele tsa mongolo, joalo ka likonopo kapa lihokelo tsa nav, etsa bonnete ba hore u siea sebaka ka mor'a <i>tag bakeng sa sebaka se nepahetseng.

Mehlala ea li-icon

Li sebelise ka likonopo, lihlopha tsa likonopo bakeng sa toolbar, navigation, kapa ho kenya liforomo tse reriloeng esale pele.

Likonopo

Sehlopha sa likonopo ka har'a konopo ea toolbar
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </ div>
  9. </ div>
Ho theoha ka sehlopha sa likonopo
Mosebedisi 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> User </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Fetola </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Hlakola </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Thibela </a></li>  
  8.     <li class = "divider" > </li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Etsa admin </a></li>  
  10.   </ul>
  11. </ div>
Konopo e nyane
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Navigation

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-leecon-white icon" ></i> Lehae </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Lisebelisoa </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Mabala a foromo

  1. <div class = "control-group" > 
  2.   <label class = "control-label" bakeng sa = "inputIcon" > Aterese ea lengolo-tsoibila </label>  
  3.   <div class = "taolo" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "eketsa-on" ><i class = "icon-enfelopo" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </ div>
  8.   </ div>
  9. </ div>