Xiseketelo xa CSS

Ehenhla ka xikafodi, swiaki swa xisekelo swa HTML swi endliwile switayele no ndlandlamuxiwa hi titlilasi leti andlariwaka ku nyika ku languteka lokuntshwa, loku nga cincekiki na ku titwa.

Tinhlokomhaka & khopi ya miri

Xikalo xa ku thayipa

Gridi hinkwayo ya ku thayipa yi sekeriwe eka swilo swimbirhi leswi cinca-cincaka swa Less eka fayili ya hina ya swilo leswi cinca-cincaka.less: @baseFontSizena @baseLineHeight. Xo sungula i base font-size leyi tirhisiweke hinkwako kasi xa vumbirhi i base line-height.

Hi tirhisa swilo sweswo leswi cinca-cincaka, ni tinhlayo tin’wana, ku endla ti- margin, ti-padding, ni ti-line-height ta muxaka wa hina hinkwawo ni swin’wana.

Xikombiso xa tsalwa ra miri

Nullam quis risus eget xitombo xa xirhendzevutani lexi khavisiweke vel eu leo. Cum sociis natoque penatibus na magnis leyi nga na ku veleka, nascetur ridiculus mus. Nullam id dolor id nibh mimovha ya switsongwatsongwana.

Khopi ya miri leyi rhangelaka

Endla leswaku ndzimana yi va leyi hambaneke hi ku engetela .lead.

Vivamus sagittis lacus vel augue laoreet xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Duis mollis, est leyi nga riki ya xiyimo xa le henhla.

h1. Nhlokomhaka ya 1

h2. Nhlokomhaka ya 2

h3. Nhlokomhaka ya 3

h4. Nhlokomhaka ya 4

h5. Nhlokomhaka ya 5
h6. Nhlokomhaka ya 6

Ku kandziyisa, adirese ni ku pfuxeta

Nchumu Matirhiselo Hlawula
<strong> Ku kandziyisa xiphemu xa tsalwa hi nkoka Hava
<em> Ku kandziyisa xiphemu xa tsalwa hi ntshikilelo Hava
<abbr> Pfuxeta swipfuxeto na swihlamusela-marito ku kombisa vuhundzuluxeri lebyi andlariweke eka hover

Katsa titlexihlawulekisi xa ku hlawula xa tsalwa leri andlariweke

Tirhisa .initialismtlilasi eka swipfuxeto leswikulu.
<address> Ku kuma vuxokoxoko byo tihlanganisa bya kokwa wa yona wa le kusuhi kumbe miri hinkwawo wa ntirho Hlayisa ku fometa hi ku heta milayeni hinkwayo hi<br>

Ku tirhisa ku kandziyisa

Fusce dapibus , tellus ac cursus commodo , tortor mauris xitombo xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani. Maecenas faucibus mollis leyi nga exikarhi ka yona. Nulla vitae elit libero, ku nga pharetra augue.

Xiya: Titwele u ntshunxekile ku tirhisa <b>na <i>hi HTML5, kambe matirhiselo ya tona ya cincile nyana. <b>yi endleriwe ku kombisa marito kumbe swivulwa handle ko hundzisela nkoka lowu engetelekeke kasi <i>ngopfungopfu i ya rito, marito ya xithekiniki, na swin’wana.

Swikombiso swa tiadirese

Hi leswi swikombiso swimbirhi swa ndlela leyi <address>thegi yi nga tirhisiwaka ha yona:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Xihlamusela
-marito xa Xitsonga
Vito leri heleleke
[email protected]

Swikombiso swa swifunengeto

Swipfuxeto leswi nga na titlexihlawulekisi swi na ndzilakano wa le hansi lowu nga na mathonsi yo vonikela na xikombiso xa mpfuneto eka hover. Leswi swi nyika vatirhisi xikombiso xo engetela lexi nga ta kombisiwa eka hover.

Engetelani initialismtlilasi eka xifunengeto leswaku u engetela ku twanana ka ku thayipa hi ku yi nyika mpimo wa tsalwa lowutsongonyana.

HTML i nchumu lowunene ngopfu ku sukela eka xinkwa lexi tsemiweke.

Xifunengeto xa rito attribute i attr .

Switlhokovetselo swa swibokisana

Nchumu Matirhiselo Hlawula
<blockquote> Xiaki xa xiyimo xa xibokisana xo tshaha nhundzu ku suka eka xihlovo xin’wana

Engetela citexihlawulekisi xa URL ya xihlovo

Tirhisa .pull-leftna .pull-righttitlilasi ta swihlawulekisi leswi papamalaka
<small> Xiphemu xo hlawula xo engetela xikombo lexi langutaneke na mutirhisi, hi ntolovelo mutsari loyi a nga na nhlokomhaka ya ntirho Veka the <cite>around the xihloko kumbe vito ra xihlovo

Ku katsa xikombo xa xibokisana, phutsela HTML<blockquote> yihi na yihi tanihi xitlhokovetselo. Eka switlhokovetselo swo kongoma hi ringanyeta a .<p>

Katsa <small>elemente yo hlawula ku tshaha xihlovo xa wena naswona u ta kuma em dash &mdash;emahlweni ka yona for styling purposes.

  1. <xihlawulekisi xa xibokisana>
  2. <p> Lorem ipsum dolor tshama amet, ku hlawuriwa ka mati ya xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante venenatis. </p>
  3. <small> Munhu wa ndhuma </small>
  4. </blockquote ya xitsonga

Xikombiso xa swikombo swa swibokisana

Ti blockquotes ta ntolovelo ti endliwe hi ndlela leyi:

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante venenatis.

Munhu wo duma eka Miri wa ntirho

Ku papamala blockquote ya wena exineneni, engetela class="pull-right":

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante venenatis.

Munhu wo duma eka Miri wa ntirho

Minxaxamelo ya swilo

A swi odariwanga

<ul>

  • Lorem ipsum dolor tshama amet
  • Consectetur leyi nga ni mafurha yo tala
  • Nhlayo leyi heleleke ya molestie lorem eka massa
  • Facilisis eka xirhendzevutani xa pretium nisl aliquet
  • Nulla volutpat xitsonga xitsonga xitsonga xitsonga
    • Xiphemu xa xirhendzevutani xa iaculis neque
    • Purus sodales ya switsongwatsongwana swa ultricies
    • Vestibulum laoreet xirho xa xirhendzevutani sem
    • Ac tristique libero xitsonga xitsonga xitsonga xitsonga
  • Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
  • Aenean tshama amet erat nunc
  • Eget porttitor xitsonga xitsonga

Ku nga ri na xitayili

<ul class="unstyled">

  • Lorem ipsum dolor tshama amet
  • Consectetur leyi nga ni mafurha yo tala
  • Nhlayo leyi heleleke ya molestie lorem eka massa
  • Facilisis eka xirhendzevutani xa pretium nisl aliquet
  • Nulla volutpat xitsonga xitsonga xitsonga xitsonga
    • Xiphemu xa xirhendzevutani xa iaculis neque
    • Purus sodales ya switsongwatsongwana swa ultricies
    • Vestibulum laoreet xirho xa xirhendzevutani sem
    • Ac tristique libero xitsonga xitsonga xitsonga xitsonga
  • Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
  • Aenean tshama amet erat nunc
  • Eget porttitor xitsonga xitsonga

Ku odariwile

<ol>

  1. Lorem ipsum dolor tshama amet
  2. Consectetur leyi nga ni mafurha yo tala
  3. Nhlayo leyi heleleke ya molestie lorem eka massa
  4. Facilisis eka xirhendzevutani xa pretium nisl aliquet
  5. Nulla volutpat xitsonga xitsonga xitsonga xitsonga
  6. Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
  7. Aenean tshama amet erat nunc
  8. Eget porttitor xitsonga xitsonga

Nhlamuselo

<dl>

Minxaxamelo ya tinhlamuselo
Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Euismod
Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.
Donec id elit leyi nga riki na mi porta gravida eka eget metus.
Malesuada ya xitsonga
Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Nhlamuselo ya horizontal

<dl class="dl-horizontal">

Minxaxamelo ya tinhlamuselo
Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Euismod
Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.
Donec id elit leyi nga riki na mi porta gravida eka eget metus.
Malesuada ya xitsonga
Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.
Felis euismod xitombo xa xitombo
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum masa justo tshama amet risus.

Tinhloko ta le henhla! Minxaxamelo ya tinhlamuselo ta horizontal yi ta tsema marito lama leheke ngopfu ku nghena eka ku lulamisiwa ka kholomo ya ximatsi text-overflow. Eka swivono leswitsongo, swi ta cinca eka xivumbeko xa ntolovelo lexi hlanganisiweke.

Inline

Pfuxeta swiphemu swa khodi ya le ndzeni ka layini hi <code>.

  1. Xikombiso , xiyenge xa ​​< khodi> </ khodi > xi fanele ku phutseriwe tanihi inline .

Xibokisana xa xisekelo

Tirhisa <pre>eka milayeni yo tala ya khodi. Tiyiseka leswaku u balekela swikhomela-ndhawu swihi na swihi swa angle eka khodi leswaku u ta hundzuluxela kahle.

<p>Xikombiso xa tsalwa laha...</p>
  1. <pre>
  2. <p>Xikombiso xa tsalwa laha...</p>
  3. </pre>

Xiya: Tiyiseka leswaku u hlayisa khodi endzeni ka <pre>tithegi ekusuhi ni tlhelo ra ximatsi hilaha swi nga kotekaka hakona; yi ta hundzuluxela tithebhu hinkwato.

U nga ha engetela .pre-scrollabletlilasi hi ku hlawula leyi nga ta veka max-height ya 350px na ku nyika y-axis scrollbar.

Google Xifaniso xa ku saseka

Teka <pre>elemente leyi fanaka ivi u engetela titlilasi timbirhi to hlawula ta ku hundzuluxela loku antswisiweke.

  1. <p> Xikombiso xa tsalwa laha... </p>
  1. <pre class = "xifaniso xo saseka."
  2. ti linenums" >
  3. <p>Xikombiso xa tsalwa laha...</p>
  4. </pre>

Download google-code-prettify u languta readme ku kuma ndlela yo tirhisa.

Ku fungha tafula

Thege Nhlamuselo
<table> Xiaki xo phutsela xo kombisa datha hi xivumbeko xa thebulu
<thead> Xiaki xa xikhomela xa tilayini ta nhloko ya tafula ( <tr>) ku lebula tikholomu ta tafula
<tbody> Xiaki xa xikhomela xa tilayini ta tafula ( <tr>) emirini wa tafula
<tr> Xiaki xa xikhomela xa sete ya tisele ta tafula ( <td>kumbe <th>) leyi humelelaka eka layini yin’we
<td> Sele ya tafula ya ntolovelo
<th> Sele yo hlawuleka ya tafula ya malebvu ya kholomo (kumbe layini, ku ya hi xikalo na ku vekiwa)
Yi fanele ku tirhisiwa endzeni ka a<thead>
<caption> Nhlamuselo kumbe nkatsakanyo wa leswi tafula ri swi khomeke, ngopfungopfu leswi pfunaka eka vahlayi va xikirini
  1. <tafula>
  2. <nhloko>
  3. <tr>
  4. <th> ... </th> hi ku tirhisa
  5. <th> ... </th> hi ku tirhisa
  6. </tr>
  7. </thead>
  8. <miri>
  9. <tr>
  10. <td> ... </td>
  11. <td> ... </td>
  12. </tr>
  13. </tbody>
  14. </tafula>

Swihlawulekisi swa tafula

Vito Tlilasi Nhlamuselo
Ku tlula Hava Ku hava switayele, ntsena tikholomu ni tilayini
Ntolovelo .table Ntsena milayeni leyi nga etlhelo exikarhi ka tilayini
Ku ni ndzilakano .table-bordered Ku rhendzeleka ka tikhoneni naswona u engetela ndzilakano wa le handle
Xirhendzevutana xa zebra .table-striped Ku engetela muvala wa le ndzhaku wa grey yo vonikela eka tilayini leti nga tolovelekangiki (1, 3, 5, na swin’wana) .
Ku hlanganisiwa .table-condensed Ku tsema vertical padding hi le xikarhi, ku suka eka 8px ku ya eka 4px, endzeni ka hinkwaswo tdna thswiaki

Swikombiso swa matafula

1. Switayili swa tafula swa ntolovelo

Matafula ya endliwa hi ku tisungulela hi ku tisungulela hi mindzilakano yi nga ri yingani ntsena ku tiyisisa ku hlayeka na ku hlayisa xivumbeko. Hi 2.0, .tabletlilasi ya laveka.

  1. < tlilasi ya tafula = "tafula" >
  2. ...
  3. </tafula>
# . Vito rosungula Xivongo Vito ra mutirhisi
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @twitter

2. Tafula ra mitila

Endla ku sasekanyana hi matafula ya wena hi ku engetela zebra-striping—engetela ntsena .table-stripedtlilasi.

Xiya: Matafula ya mitila ma tirhisa :nth-childxihlawulekisi xa CSS naswona a ma kumeki eka IE7-IE8.

  1. < tlilasi ya tafula = "tafula ra tafula-striped" >
  2. ...
  3. </tafula>
# . Vito rosungula Xivongo Vito ra mutirhisi
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @twitter

3. Tafula leri nga ni ndzilakano

Engeta mindzilakano ku rhendzela tafula hinkwaro na makhon’wa ya xirhendzevutani hi xikongomelo xo saseka.

  1. <table class = "tafula leri nga na ndzilakano wa tafula" >
  2. ...
  3. </tafula>
# . Vito rosungula Xivongo Vito ra mutirhisi
1. Marka Otto @mdo
Marka Otto @getbootstrap ya xitsonga
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @twitter

4. Tafula leri hlanganisiweke

Endla leswaku matafula ya wena ya va ya hlangana swinene hi ku engetela .table-condensedtlilasi ku tsema padding ya tisele ta tafula hi le xikarhi (ku suka eka 8px ku ya eka 4px).

  1. <table class = "tafula ra tafula leri hlanganisiweke" >
  2. ...
  3. </tafula>
# . Vito rosungula Xivongo Vito ra mutirhisi
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @twitter

5. Swi hlanganise hinkwaswo!

Titwele u ntshunxekile ku hlanganisa yin’wana na yin’wana ya titlilasi ta tafula ku fikelela ku languteka ko hambana hi ku tirhisa yin’wana na yin’wana ya titlilasi leti nga kona.

  1. <table class = "tafula ra tafula-striped tafula-ndzilakana tafula-condensed" >
  2. ...
  3. </tafula>
Vito leri heleleke
# . Vito rosungula Xivongo Vito ra mutirhisi
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @twitter

HTML na CSS leyi cinca-cincaka

Xiphemu lexinene ngopfu mayelana na tifomo eka Bootstrap hileswaku swingheniso swa wena hinkwaswo na swilawuri swi languteka kahle ku nga khathariseki leswaku u swi aka njhani eka markup ya wena. Ku hava HTML leyi nga pfuniki nchumu leyi lavekaka, kambe hi nyika swifaniso eka lava va yi lavaka.

Tilayout leti rharhanganeke swinene ti ta na titlilasi to koma na leti ringaniseriwaka ku olova ku endla switayili na ku boha swiendlakalo, kutani u funengetiwile eka goza rin’wana na rin’wana.

Ti layout ta mune ti katsiwile

Bootstrap yi ta na nseketelo wa tinxaka ta mune ta swivumbeko swa swivumbeko:

  • Xi yimile (xihlawulekisi) .
  • Secha
  • Inline
  • Ololoka

Tinxaka to hambana ta swivumbeko swa tifomo ti lava ku cinca ko karhi eka ku fungha, kambe swilawuri hi swoxe swi tshama swi ri tano naswona swi tikhoma swi ri tano.

Swiyimo swa vulawuri na swin’wana

Tifomo ta Bootstrap ti katsa switayele swa vulawuri hinkwabyo bya fomo ya le hansi ku fana na ku nghenisa, textarea, na ku hlawula loku u nga ku langutelaka. Kambe yi tlhela yi ta na nhlayo ya swiphemu swa ntolovelo swo fana na swingheniso leswi engeteriweke na leswi pendiweke ka ha ri emahlweni na nseketelo wa minxaxamelo ya mabokisi yo kambela.

Swiyimo swo fana na xihoxo, xilemukiso, na ku humelela swi katsiwile eka muxaka wun’wana na wun’wana wa vulawuri bya xivumbeko. Nakambe ku katsiwile switayele swa vulawuri lebyi lamaleke.

Tinxaka ta mune ta swivumbeko

Bootstrap yi nyika ku fungha ko olova na switayele swa switayele swa mune swa tifomo ta webu leti tolovelekeke.

Vito Tlilasi Nhlamuselo
Xi yimile (xihlawulekisi) . .form-vertical (a swi laveki) . Tilebhele leti hlanganisiweke, leti ringanisiweke hi tlhelo ra ximatsi ehenhla ka swilawuri
Inline .form-inline Lebula leyi ringanisiweke hi ximatsi na swilawuri swa inline-block swa xitayili xo koma
Secha .form-search Ku nghenisiwa ka tsalwa leri engetelekeke ra xirhendzevutani xa vuxongi bya ku lavisisa lebyi tolovelekeke
Ololoka .form-horizontal Papamala malebvu ya ximatsi, lama ringanisiweke hi tlhelo ra xinene eka layini yin’we na swilawuri

Xikombiso xa tifomo hi ku tirhisa ntsena vulawuri bya tifomo, ku hava ku fungha loku engetelekeke

Xivumbeko xa xisekelo

Smart na lightweight defaults handle ka markup yo engetela.

Xikombiso xa tsalwa ra mpfuneto wa xiyimo xa xibokisana laha.

  1. <xivumbeko xa tlilasi = "kahle" >
  2. <label> Vito ra lebula </label>
  3. < muxaka wa ngheniso = "tsalwa" tlilasi = "span3" xikhomela-ndhawu = "Thayipha swo karhi..." >
  4. <span class = "help-block" > Xikombiso xa tsalwa ra mpfuneto wa xiyimo xa xibokisana laha. </span>
  5. < tlilasi ya lebula = "bokisi ro kambela" >
  6. <input type = "checkbox" > Ndzi languta
  7. </label>
  8. < muxaka wa buti = "rhumela" class = "btn" > Rhumela </button>
  9. </form>

Fomo yo lavisisa

Engetelani .form-searcheka fomo ni .search-queryle ka input.

  1. <fomo class = "kahle xivumbeko-ku lavisisa" >
  2. < muxaka wa ku nghenisa = "text" class = "xivutiso xa ku lavisisa-xikarhi-ku nghenisa" >
  3. < muxaka wa buti = "rhumela" class = "btn" > Ku lavisisa </button>
  4. </form>

Fomo ya le ndzeni ka layini

Engetela .form-inlineku finesse vertical alignment na spacing ya vulawuri bya xivumbeko.

  1. <xivumbeko xa tlilasi = "kahle xivumbeko-inline" >
  2. < muxaka wa ngheniso = "tsalwa" tlilasi = "nyingiso-leswitsongo" xikhomela-ndhawu = "Imeyili" >
  3. < muxaka wa ngheniso = "phasiwedi" tlilasi = "nhlamuselo-ntsongo" xikhomela-ndhawu = "Phasiwedi" >
  4. < tlilasi ya lebula = "bokisi ro kambela" >
  5. <input type = "checkbox" > Ndzi tsundzukeni
  6. </label>
  7. < muxaka wa buti = "rhumela" tlilasi = "btn" > Nghena </button>
  8. </form>

Swivumbeko leswi nga etlhelo

Ku kombisiwile exineneni i swilawuri hinkwaswo swa xivumbeko xa ntolovelo leswi hi swi seketelaka. Hi lowu nxaxamelo wa swibalesa:

  • swingheniso swa matsalwa (tsalwa, phaswedi, imeyili, na swin’wana) .
  • bokisi ro kambela
  • xiya-ni-moya
  • hlawula
  • ku hlawula ko tala
  • ku nghenisa fayili
  • ndhawu ya matsalwa

Ku engetela eka tsalwa ra xivumbeko xa mahala, ku nghenisa kwihi na kwihi loku sekeriweke eka tsalwa ra HTML5 ku vonaka ku ri tano.

Xikombiso xa ku fungha

Hi ku nyikiwa xivumbeko xa xivumbeko xa xikombiso lexi nga laha henhla, hi lexi xikombiso lexi fambelanaka na ntlawa wo sungula wa ku nghenisa na vulawuri. Titlilasi ta .control-group, .control-label, na .controlshinkwato ta laveka eka ku endla switayili.

  1. <xivumbeko xa tlilasi = "xivumbeko-xirhendzevutani" >
  2. <xiyenge xa ​​nsimu>
  3. <legend> Tsalwa ra ntsheketo </legend>
  4. <div class = "ntlawa-vulawuri" >
  5. <label class = "control-label" for = "ku nghenisa01" > Ku nghenisa tsalwa </label>
  6. <div class = "swilawuri" >
  7. < muxaka wa ngheniso = "tsalwa" tlilasi = "nyingiso-xlarge" id = "nyingiso01" >
  8. <p class = "help-block" > Tsalwa ra mpfuneto leri seketelaka </p>
  9. </div>
  10. </div>
  11. </sete ya nsimu>
  12. </form>

Swivumbeko swa vulawuri bya xivumbeko

Bootstrap yi kombisa switayele swa browser-supported focused na disabledswiyimo. Hi susa Webkit ya ntolovelo outlineivi hi tirhisa a box-shadowematshan’weni ya yona ya :focus.


Ku tiyisisiwa ka fomo

Yi tlhela yi katsa switayele swo tiyisisa swihoxo, switsundzuxo, na ku humelela. Ku tirhisa, engetela tlilasi ya xihoxo eka leyi rhendzeleke .control-group.

  1. <xiyenge xa ​​nsimu
  2. class = "xihoxo xa ntlawa wa vulawuri" >
  3. ...
  4. </sete ya nsimu>
Van’wana va ri va nkoka laha
Swi nga ha endleka ku ri ni leswi nga famba kahle
Hi kombela u lulamisa xihoxo
Woohoo!
Woohoo!

Ku andlala vulawuri bya xivumbeko

Prepend & engetela swingheniso

Mintlawa ya swingheniso—leyi nga ni tsalwa leri engeteriweke kumbe leri pfaleriweke ka ha ri emahlweni—yi nyikela ndlela yo olova yo nyika mongo lowu engetelekeke wa swingheniso swa wena. Swikombiso leswikulu swi katsa mfungho wa @ wa mavito ya vatirhisi ya Twitter kumbe $ ya timali.


Mabokisi yo kambela ni swiya-ni-moya

Ku fika eka v1.4, Bootstrap a yi lava markup yo engetela ku rhendzela mabokisi yo kambela na swiya-ni-moya ku swi stack. Sweswi, i mhaka yo olova yo phindha-phindha <label class="checkbox">leswi phutselaka <input type="checkbox">.

Mabokisi yo kambela ya le ndzeni ka layini ni swiya-ni-moya na swona swa seketeriwa. Ntsena engetela .inlineeka yin'wana na yin'wana .checkboxkumbe .radiou hetile.


Inline tifomo na ku engetela/prepend

Ku tirhisa prepend kumbe append inputs eka xivumbeko xa inline, tiyisisa leswaku u veka .add-onna inputeka layini yin’we, handle ka swivandla.


Vumba tsalwa ra mpfuneto

Ku engetela tsalwa ra mpfuneto eka swingheniso swa wena swa fomo, katsa tsalwa ra mpfuneto ra le ndzeni ka layini na <span class="help-inline">kumbe xibokisana xa tsalwa ra mpfuneto na <p class="help-block">endzhaku ka xiaki xa ku nghenisa.

Tirhisa .span*titlilasi leti fanaka ku suka eka sisiteme ya gridi eka vukulu bya swingheniso.

U nga ha tlhela u tirhisa titlilasi leti nga cinciki leti nga mepeki eka giridi, ti pfumelelana na switayele swa CSS leswi hlamulaka, kumbe ku hlamusela tinxaka to hambana ta vulawuri (xikombiso, inputvs. select).

@

Hi leri tsalwa ro pfuna

.00
Hi leri tsalwa ra mpfuneto wun'wana
$ .00

Xiya: Tilebhele ti rhendzela swihlawulekisi hinkwaswo swa tindhawu letikulu swinene to tsindziyela ni fomo leyi tirhisiwaka swinene.

Konopa class="" Nhlamuselo
btn Standard grey button na gradient
btn btn-primary Yi nyika ntiko lowu engetelekeke wa xivono naswona yi kombisa xiendlo xo sungula eka sete ya swikomba-nkarhi
btn btn-info Ku tirhisiwa tanihi ndlela yin’wana eka switayele swa ntolovelo
btn btn-success Swi kombisa goza leri humeleleke kumbe lerinene
btn btn-warning Swi kombisa leswaku vuxiyaxiya byi fanele ku tekiwa eka goza leri
btn btn-danger Swi kombisa goza leri nga ni khombo kumbe leri nga ha vaka ro biha
btn btn-inverse Alternate dark grey button, ku nga ri ku bohiwa eka xiendlo xa semantiki kumbe ku tirhisa

Swikomba-nkarhi swa swiendlo

Tanihi ntwanano, swikomba-nkarhi swi fanele ku tirhisiwa ntsena eka swiendlo kasi swihlanganisi swa le henhla swi fanele ku tirhisiwa eka swilo. Xikombiso, "Download" yi fanele ku va button kasi "recent activity" yi fanele ku va link.

Switayili swa swikomba-nkarhi swi nga tirhisiwa eka xin’wana ni xin’wana hi .btntlilasi leyi tirhisiweke. Kambe, hi ntolovelo u ta lava ku tirhisa leswi eka ntsena <a>na <button>swiaki.

Ku fambisana ka browser yo tsemakanya

IE9 a yi crop ti background gradients eka ti rounded corners, kutani hi yi susa. Related, IE9 jankifies disabled buttonelements, yi hundzuluxela tsalwa ra grey hi nasty text-shadow leyi hi nga ta ka hi nga yi lulamisi.

Tisayizi to tala

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Engetela .btn-large, .btn-small, kumbe .btn-minieka tisayizi timbirhi leti engetelekeke.


Xiyimo xa vulema

Eka swikomba-nkarhi leswi nga tirhiki, engetela .disabledtlilasi eka swihlanganisi na disabledxihlawulekisi xa <button>swiaki.

Xihlanganisi xa le henhla Hlanganisa

Tinhloko ta le henhla! Hi tirhisa .disabledtanihi tlilasi ya vukorhokeri laha, ku fana na .activetlilasi leyi tolovelekeke, hikwalaho ku hava xirhangi lexi lavekaka.

Tlilasi yin’we, tithegi to tala

Tirhisa .btntlilasi eka <a>, <button>, kumbe <input>elemente.

Hlanganisa
  1. <a class = "btn" href = "" > Xihlanganisi </a>
  2. < tlilasi ya buti = "btn" muxaka = "rhumela" >
  3. Konopa
  4. </button>
  5. < tlilasi yo nghenisa = "btn" muxaka = "button".
  6. value = "Nyingiso" >
  7. < tlilasi yo nghenisa = "btn" muxaka = "rhumela".
  8. value = "Rhumela" >

Tanihi endlelo lerinene, ringeta ku fambisana na elemente ya wena mongo ku tiyisisa ku fambisana ka ku hundzuluxela ka cross-browser. Loko u ri na input, tirhisa <input type="submit">eka buti ya wena.

  • xifaniso-nghilazi
  • xifaniso-vuyimbeleri
  • ku lavisisa swifaniso
  • xifaniso-mvhilopho
  • xifaniso-mbilu
  • xifaniso-nyeleti
  • xifaniso-nyeleti-empty
  • xifaniso-mutirhisi
  • xifaniso-filimi
  • xifaniso-xa-vukulu
  • xifaniso-th
  • icon-th-nxaxamelo wa swifaniso
  • xifaniso-ok
  • xifaniso-ku susa
  • icon-zoom-in xifaniso xa xirhendzevutani
  • xifaniso-ku-kumisa-ku-hunguta
  • xifaniso-xiphemu
  • xifaniso-xikombiso
  • xifaniso-xifaniso
  • xifaniso xa thyaka
  • xifaniso-kaya
  • xifaniso-fayili
  • xifaniso-nkarhi
  • xifaniso-gondzo
  • xifaniso-ku-dawuniloda-alt
  • xifaniso-ku dawuniloda
  • xifaniso-ku layicha
  • icon-bokisi ra switiviso
  • xifaniso-ku tlanga-xirhendzevutana
  • xifaniso-phindha-phindha
  • xifaniso-ku pfuxeta
  • icon-list-alt
  • xifaniso-xilotlelo
  • xifaniso-mujeko
  • swifaniso-switwi swa le tindleveni
  • xifaniso-volume-ku-tima
  • icon-volume-ehansi
  • icon-volume-ku tlakuka
  • xifaniso-qrcode
  • xifaniso-barkhodi
  • xifaniso-xifaniso
  • swifaniso swa swifaniso
  • buku ya swifaniso
  • xifaniso-xikombiso xa buku
  • xifaniso-ku gandlisa
  • xifaniso-khamera
  • xifaniso-fonto
  • xifaniso xa xirhendzevutani
  • xifaniso xa xifaniso
  • xifaniso-tsalwa-ku leha
  • xifaniso-tsalwa-ku anama
  • icon-align-ximatsi
  • icon-align-xikarhi
  • xifaniso-ku ringanisa-exineneni
  • xifaniso-ku ringanisa-ku lulamisa
  • icon-list
  • xifaniso-xiphemu-ximatsi
  • xifaniso-xiphemu-xinene
  • xifaniso-xikandza-nkarhi-vhidiyo
  • xifaniso-xifaniso
  • xifaniso-pensele
  • xifaniso-ximaki-mepe
  • xifaniso-lunghiselela
  • xifaniso-tint
  • xifaniso-hlela
  • xifaniso-xi avelana
  • xifaniso-xikambelo
  • xifaniso-ku famba
  • xifaniso-goza-ku tlhelela endzhaku
  • icon-fast-endzhaku
  • xifaniso-xi tlhelela endzhaku
  • ku tlanga hi swifaniso
  • xifaniso-ku yimanyana
  • xifaniso-xiyima
  • xifaniso-xi ya emahlweni
  • xifaniso-xi hatlisa-ku-ya emahlweni
  • icon-goza-ku ya emahlweni
  • xifaniso-ku humesa
  • xifaniso-chevron-ximatsi
  • xifaniso-chevron-xinene
  • xifaniso-ku-plus-xikombiso
  • xifaniso-ku susa-xikombiso
  • xifaniso- susa-xikombiso
  • xifaniso-ok-xikombiso
  • xifaniso-xivutiso-xikombiso
  • icon-info-xikombiso
  • xifaniso-xifaniso xa xikirini
  • xifaniso-susa-xirhendzevutana
  • xifaniso-ok-xirhendzevutana
  • xifaniso-xirhendzevutana-xirhendzevutana
  • xifaniso-museve-ximatsi
  • xifaniso-museve-exineneni
  • xifaniso-museve-ehenhla
  • xifaniso-museve-ehansi
  • xifaniso-xi avelana-alt
  • xifaniso-xi cinca-vukulu-xi tele
  • xifaniso-xi cinca-vukulu-xitsongo
  • xifaniso-ku engetela
  • xifaniso-ku susa
  • xifaniso-xifaniso xa nyeleti
  • xifaniso-xikombiso-xihlamusela-marito
  • xifaniso-nyiko
  • xifaniso-tluka
  • xifaniso-ndzilo
  • xifaniso-xivula-tihlo
  • xifaniso-tihlo-pfala
  • xifaniso-xitsundzuxo-xikombiso
  • xifaniso-xihaha-mpfhuka
  • xifaniso-khalendara
  • xifaniso xa xitshuketa
  • xifaniso-xihlamusela-marito
  • xifaniso-maginete
  • xifaniso-xiphemu xa le henhla
  • xifaniso-chevron-ehansi
  • xifaniso-retweet
  • xifaniso-xigolonyana xo xava
  • xifaniso-folda-pfala
  • xifaniso-folda-vula
  • xifaniso-xi cinca-vukulu-xi yimile
  • xifaniso-xi cinca-vukulu-xi rhendzeleka
  • xifaniso-hdd
  • xifaniso xa bullhorn
  • xifaniso-bell
  • xifaniso-xitifikheti
  • xifaniso-swikunwana-ehenhla
  • xifaniso-swikunwana-ehansi
  • xifaniso-voko-exineneni
  • xifaniso-voko-ximatsi
  • xifaniso-voko-ehenhla
  • xifaniso-voko-ehansi
  • xifaniso-xirhendzevutana-nseve-exineneni
  • xifaniso-xirhendzevutana-nseve-ximatsi
  • xifaniso-xirhendzevutana-museve-ehenhla
  • xifaniso-xirhendzevutana-museve-ehansi
  • xifaniso xa misava
  • xifaniso-xilotlelo
  • swifaniso-mintirho
  • xifaniso-xisefo
  • xifaniso-xikhwama xa swilo
  • xifaniso-xikirini lexi heleleke

Yi akiwile tani hi sprite

Ematshan’weni yo endla xifaniso xin’wana ni xin’wana xi va xikombelo lexi engetelekeke, hi xi hlengeletile xi va sprite—ntlhambi wa swifaniso eka fayili yin’we leyi tirhisaka CSS ku veka swifaniso hi background-position. Leyi i ndlela leyi fanaka leyi hi yi tirhisaka eka Twitter.com naswona yi hi tirhile kahle.

Titlilasi hinkwato ta swifaniso ti rhangeleriwa hi .icon-ku kuma ndhawu leyi faneleke ya mavito ni ku pima mpimo, ku fana ni swiphemu swa hina swin’wana. Leswi swi ta pfuna ku papalata ku lwisana ni switirho swin’wana.

Glyphicons yi hi nyikile ku tirhisiwa ka Halflings leyi vekiweke eka xitirhisiwa xa hina xa xihlovo lexi pfulekeke ntsena loko hi nyika xihlanganisi na xikweleti laha eka ti-docs. Hi kombela u anakanya hi ku endla leswi fanaka eka tiphurojeke ta n’wina.

Ndlela yo tirhisa

Bootstrap yi tirhisa <i>thegi ya swifaniso hinkwaswo, kambe a swi na tlilasi ya xiyimo—ntsena xirhangi lexi avelaniwa. Leswaku u yi tirhisa, veka khodi leyi landzelaka kwalomu ka kun’wana ni kun’wana:

  1. <i class = "ku lavisisa-xifaniso" ></i>

Kutlhela kuva na switayele leswi kumekaka swa swifaniso leswi hundzuriweke ( swo basa), leswi endliweke swi lunghekile hi tlilasi yin’we yo engetela:

  1. <i class = "xifaniso-ku lavisisa xifaniso-xo basa" ></i>

Kuna 140 wa titlilasi leti unga hlawulaka eka tona eka swifaniso swa wena. Ntsena engetela <i>tag leyi nga na ti class leti faneleke ivi u set. U nga kuma nxaxamelo lowu heleleke eka sprites.less kumbe kwalahaya eka tsalwa leri.

Tinhloko ta le henhla! Loko u tirhisa etlhelo ka tintambhu ta matsalwa, tanihi le ka swikomba-nkarhi kumbe swihlanganisi swa nav, tiyiseka leswaku u siya xivandla endzhaku ka <i>thegi leswaku u kuma xivandla lexi faneleke.

Tirhisa swiyimo

Swifaniso i swikulu, kambe xana munhu a nga swi tirhisa kwihi? Hi leyi mianakanyo yi nga ri yingani:

  • Tanihi swifaniso swa ku famba-famba ka wena ka le tlhelo
  • Ku kuma ku famba-famba loku fambiwaka hi swifaniso ntsena
  • Leswaku swikomba-nkarhi swi pfuna ku hundzisela nhlamuselo ya xiendlo xo karhi
  • Hi swihlanganisi swo avelana mongo eka laha mutirhisi a yaka kona

Kahle-kahle, kun’wana ni kun’wana laha u nga vekaka <i>thegi kona, u nga veka xifaniso.

Swikombiso

Ti tirhise eka swikomba-nkarhi, mintlawa ya swikomba-nkarhi swa barhi ya switirhisiwa, ku famba-famba, kumbe ku nghenisa ka fomo loku yimisiweke ka ha ri emahlweni.