ehenhla
ximatsi
mfanelo
ehansi

Bootstrap, ku suka eka Twitter

Bootstrap i xitirhisiwa lexi humaka eka Twitter lexi endleriweke ku sungula nhluvukiso wa ti-webapp na tisayiti.
Yi katsa CSS ya xisekelo na HTML ya ku thayipa, tifomo, swikomba-nkarhi, matafula, tigridi, ku famba-famba ni swin’wana.

Nerd alert: Bootstrap yi akiwile hi Less naswona yi endleriwe ku tirha ehandle ka gede hi ku tekela enhlokweni ti browser ta manguva lawa.

Hotlink ya CSS

Ku kuma ku sungula hi ku hatlisa no olova, kopa ntsena xiphemu lexi eka pheji ya wena ya webu.

Yi tirhise hi Less

Muyingiseri wa ku tirhisa Less? Akuna xiphiqo, ntsena clone repo u engetela milayeni leyi:

Fork eka GitHub

Download, fork, pull, timhaka ta fayili, na swin’wana na repo ya ximfumo ya Bootstrap eka Github.

Xitirhisiwa xo sungula eka GitHub »

Sweswi i v1.3.0

Matimu

Vanjhiniyara eka Twitter hi matimu va tirhise kwalomu ka layiburari yin’wana na yin’wana leyi a va yi toloverile ku fikelela swilaveko swa le mahlweni. Bootstrap yi sungurile tani hi nhlamulo ya mintlhontlho leyi a yi tisa. Hi ku pfuniwa hi vanhu vo tala vo hlamarisa, Bootstrap yi kurile swinene.

Hlaya swo tala eka dev.twitter.com ›

Nseketelo wa xihlamusela-marito

Bootstrap yi kamberiwile no seketeriwa eka swihlamusela-marito leswikulu swa manguva lawa swo fana na Chrome, Safari, Internet Explorer, na Firefox.

Yi kamberiwile no seketeriwa eka Chrome, Safari, Internet Explorer, na Firefox
  • Safari ya sweswinyana
  • Google Chrome ya sweswinyana
  • Firefox ya 4+
  • Xihlovo xa Internet xa 7+
  • Opera ya 11

Leswi swi katsiweke

Bootstrap yi ta yi helerile na CSS leyi hlengeletiweke, leyi nga hlengeletiwangiki, na tithempleyiti ta xikombiso.

Swikombiso swo sungula hi ku hatlisa

Xana u lava tithempleyiti to hatlisa? Languta swikombiso leswi swa xisekelo leswi hi swi hlanganeke:

  • Xivumbeko xo olova xa tikholomu tinharhu lexi nga ni yuniti ya nhenha
  • Xivumbeko xa mati lexi nga ni barhi ya le tlhelo leyi nga cinciki
  • Xigwitsirisi xo olova xo hayeka xa ti-app

Gridi ya xiviri

Sisiteme ya giridi ya xiviri leyi nyikiweke tanihi xiphemu xa Bootstrap i giridi yo anama ya 940px ya 16 wa tikholomu. I nantswo wa sisiteme ya grid ya 960 leyi dumeke, kambe handle ka margin/padding yo engetela eka tlhelo ra ximatsi na ra xinene.

Xikombiso xa ku fungha ka gridi

Hilaha swi kombisiweke hakona laha, xivumbeko xa xisekelo xi nga endliwa hi "tikholomu" timbirhi, yin'wana na yin'wana yi hlanganisa nhlayo ya tikholomu ta masungulo ta 16 leti hi ti hlamuseleke tanihi xiphemu xa sisiteme ya hina ya giridi. Vona swikombiso leswi nga laha hansi ku kuma ku hambana kun’wana.

  1. <div tlilasi = "layini" >
  2. < tlilasi ya div = "span6" >
  3. ...
  4. </div>
  5. < tlilasi ya div = "span10" >
  6. ...
  7. </div>
  8. </div>
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
2.
2.
2.
2.
2.
2.
2.
2.
3.
3.
3.
3.
3.
1.
4.
4.
4.
4.
1/3
1/3
1/3
1/3
2/3
4.
6.
6.
8.
8.
5.
11.
16.

Ku tlherisela endzhaku tikholomu

4.
8 ku tlheriseriwa endzhaku 4
1/3 wa xiphemu xa 2/3s
4 ku tlheriseriwa endzhaku 4
4 ku tlheriseriwa endzhaku 4
5 ku tlheriseriwa endzhaku 3
5 ku tlheriseriwa endzhaku 3
10 ku tlheriseriwa endzhaku 6

Tikholomu to endla swisaka

Nest nhundzu ya wena loko u fanele hi ku endla a .rowendzeni ka kholomo leyi nga kona.

Xikombiso xa tikholomu leti pfanganisiweke

Level 1 ya kholomo
Xiyimo xa 2
Xiyimo xa 2
  1. <div tlilasi = "layini" >
  2. < tlilasi ya div = "span12" >
  3. Level 1 ya kholomo
  4. <div tlilasi = "layini" >
  5. < tlilasi ya div = "span6" >
  6. Xiyimo xa 2
  7. </div>
  8. < tlilasi ya div = "span6" >
  9. Xiyimo xa 2
  10. </div>
  11. </div>
  12. </div>
  13. </div>

Pfuxeta gridi ya wena n’wini

Ku akiwile eka Bootstrap i swin’wana swa swilo leswi cinca-cincaka swo cinca-cinca sisiteme ya gridi ya 940px ya ntolovelo. Hi ku cinca-cinca nyana, u nga cinca mpimo wa tikholomu, ti- gutter ta tona ni xigwitsirisi lexi ti tshamaka eka xona.

Endzeni ka giridi

Swilo leswi cinca-cincaka leswi lavekaka ku cinca sisiteme ya giridi sweswi hinkwaswo swi tshama eka preboot.less.

Swilo leswi cinca-cincaka Nhlayo ya xiviri Nhlamuselo
@gridColumns 16. Nhlayo ya tikholomu endzeni ka giridi
@gridColumnWidth 40px Ku anama ka kholomo yin’wana na yin’wana endzeni ka giridi
@gridGutterWidth 20px Xivandla xo biha exikarhi ka kholomo yin’wana ni yin’wana
@siteWidth Nhlayo leyi hlayiweke ya tikholomu hinkwato ni ti- gutter Hi tirhisa swin’wana swa xisekelo swa match ku hlayela nhlayo ya tikholomu na ti gutters na ku veka ku anama ka .fixed-container()mixin.

Sweswi ku customize

Ku cinca gridi swi vula ku cinca swilo swinharhu @grid-*leswi cinca-cincaka na ku hlengeleta nakambe tifayela ta Less.

Bootstrap yi ta yi hlomisiwile ku khoma sisiteme ya gridi leyi nga na ku fika eka 24 wa tikholomu; default is just 16. Hi leyi ndlela leyi swilo leswi cinca-cincaka swa wena swa gridi swi nga langutekaka swi endleriwe ku tirhisiwa eka gridi ya tikholomu ta 24.

  1. @gridTikholomu : 24 ;
  2. @gridKu anama ka Kholomo : 20px ;
  3. @gridGutterKu anama : 20px ;

Loko se yi hlengeletiwile nakambe, u ta va u vekiwile!

Xivumbeko lexi nga cinciki

Xivumbeko xa xiviri ni xo olova xa 940px-wide, lexi nga exikarhi xa kwalomu ka webusayiti yin’wana ni yin’wana kumbe tluka leri nyikeriweke hi yin’we <div.container>.

  1. <miri>
  2. <div class = "xigwitsirisi" >
  3. ...
  4. </div>
  5. </body>

Xivumbeko xa mati

Xivumbeko xin’wana, lexi cinca-cincaka xa pheji ya fluid lexi nga na min- na max-widths na sidebar ya voko ra ximatsi. Swikahle swinene eka ti apps na ti docs.

  1. <miri>
  2. <div class = "xigwitsirisi-xigwitsirisi" >
  3. <div class = "xiphemu xa le tlhelo" >
  4. ...
  5. </div>
  6. <div class = "nhundzu" >
  7. ...
  8. </div>
  9. </div>
  10. </body>

Tinhlokomhaka & ku kopa

Xiyimo xa ntolovelo xa ku thayipa xo hlela matluka ya wena ya webu.

Gridi hinkwayo ya ku thayipa yi sekeriwe eka swilo swimbirhi leswi cinca-cincaka swa Less eka fayili ya hina ya preboot.less: @basefontna @baseline. 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.

h1. Nhlokomhaka ya 1

h2. Nhlokomhaka ya 2

h3. Nhlokomhaka ya 3

h4. Nhlokomhaka ya 4

h5. Nhlokomhaka ya 5
h6. Nhlokomhaka ya 6

Xikombiso xa ndzimana

Nullam quis risus eget xitombo xa xirhendzevutani lexi khavisiweke vel eu leo. Cum sociis natoque penatibus na magnis leyi nga velekiwaka, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mimovha ut id elit.

Xikombiso xa nhlokomhaka Xi na nhlokomhaka-ntsongo...

Misc. swiaki swa xiaki

Ku tirhisa ku kandziyisa, tiadirese, & swipfuxeto

<strong> <em> <address> <abbr>

Xana u fanele u tirhisa rini

Tithegi to kandziyisa ( <strong>na <em>) ti fanele ku tirhisiwa ku kombisa nkoka lowu engetelekeke kumbe ku kandziyisa ka rito kumbe xivulwa loko xi pimanisiwa ni kopi leyi ri rhendzeleke. Tirhisa <strong>hi nkoka ni <em>ku kandziyisa ntshikilelo .

Ku kandziyisiwa eka ndzimana

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: Swi ha ri kahle ku tirhisa <b>na <i>tithegi eka HTML5 naswona a swi bohi leswaku swi endliwa hi xitayili xa bold na italic, hi ku landzelelana (hambi leswi loko ku ri na elemente ya semantic swinene, yi tirhise). <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.

Tiadirese

Xiaki <address>lexi xi tirhisiwa eka vuxokoxoko bya vuhlanganisi bya kokwa wa xona wa le kusuhi, kumbe miri hinkwawo wa ntirho. Hi leswi swikombiso swimbirhi swa ndlela leyi a yi nga tirhisiwa ha yona:

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

Xiya: Layini yin’wana na yin’wana eka an <address>yi fanele ku hela hi line-break ( <br />) kutani yi phutseriwe hi thegi ya xiyimo xa xibokisana (xikombiso, <p>) ku hlela kahle leswi nga endzeni.

Swipfuxeto

Eka swipfuxeto na swihlamusela-marito, tirhisa <abbr>thegi ( <acronym>yi nga ha tirhisiwi eka HTML5 ). Veka fomo ya xitlhokovetselo endzeni ka thegi ivi u veka nhlokomhaka ya vito leri heleleke.

Switlhokovetselo swa swibokisana

<blockquote> <p> <small>

Ndlela yo tshaha

Ku katsa blockquote, phutsela <blockquote>etlhelo <p>na <small>tithegi. Tirhisa <small>element ku tshaha xihlovo xa wena u ta kuma em dash &mdash;emahlweni ka yona.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya xiyimo xa le mahlweni i ante venenatis dapibus posuere velit aliquet.

Dokodela Julius Hibbert
  1. <xihlawulekisi xa xibokisana>
  2. <p> Lorem ipsum dolor tshama amet, ku hlawuriwa ka mati ya xiyimo xa le henhla. Nhlayo leyi heleleke ya xiyimo xa le mahlweni i ante venenatis dapibus posuere velit aliquet. </p>
  3. <xitsongo> Dokodela Julius Hibbert </xitsongo>
  4. </blockquote ya xitsonga

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

Nhlamuselodl

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 xitsonga xitsonga
Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Khodi

<code> <pre>

Pimp khodi ya wena hi xitayili hi ti tag timbirhi to olova. Ku kuma ku hlamarisa swinene hi ku tirhisa javascript, hoxa eka khodi ya Google ya prettify layiburari naswona u vekiwile.

Ku nyikela khodi

Khodi, swibokisana swa kumbe ntsena swiphemu leswi nga endzeni ka layini, swi nga kombisiwa hi xitayili ntsena hi ku phutsela eka thegi leyi faneleke. Eka swibokisana swa khodi leswi hlanganisaka milayeni yo tala, tirhisa <pre>elemente. Eka khodi ya le ndzeni ka layini, tirhisa <code>elemente.

Nchumu Mbuyelo
<code> Eka layini ya tsalwa ro fana na leri, khodi ya wena leyi phutseriweke yi ta languteka ku fana na >html<elemente leyi.
<pre>
<div>
  <h1>Nhlokomhaka</h1>
  <p>Swin'wana kwalahaya...</p>
</div>

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

<pre class="prettyprint">

Hi ku tirhisa layiburari ya google-code-prettify, u swibokisana swa khodi swi kuma xitayili xa xivono lexi hambaneke nyana ni ku kandziyisa ka xivumbeko xa marito hi ku tisungulela.

<div> <h1> Nhlokomhaka </h1> <p> Xin'wana kwala... </p> </div>
  
  

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

Malebvu ya le ndzeni ka layini

<span class="label">

Kombela nyingiso kumbe u fungha xivulwa xihi na xihi eka tsalwa ra wena ra miri.

Lebula nchumu wun’wana ni wun’wana

Ever needed yin’wana ya tona to saseka New! kumbe Mijeko ya nkoka loko u tsala khodi? Kahle kahle, sweswi u na tona. Hi leswi swi katsiweke hi ku tiyimisela:

Lebulu Mbuyelo
<span class="label">Default</span> Ku tlula
<span class="label success">New</span> Xintshwa
<span class="label warning">Warning</span> Xilemukisi
<span class="label important">Important</span> Nkoka
<span class="label notice">Notice</span> Xitiviso

Gridi ya vuhangalasi bya mahungu

Kombisa swifaniso leswitsongo swa vukulu byo hambana-hambana eka matluka lama nga ni HTML ya le hansi ni switayele leswitsongo.

Xikombiso xa swifaniso leswitsongo

Swifaniso leswitsongo eka .media-gridswi nga va na sayizi yihi na yihi, kambe swi tirha kahle loko swi mepiwile hi ku kongoma eka sisiteme ya giridi ya Bootstrap leyi akiweke endzeni. Ku anama ka swifaniso swo fana na 90, 210, na 330 swi hlangana na tipikseli ti nga ri tingani ta ku padding ku ringana na vukulu bya .span2, .span4, na .span6kholomo.

Lexikulu

Xikarhi

Xitsongo

Ku va khoda

Tigridi ta midiya ta olova ku ti tirhisa naswona ti olovile swinene eka tlhelo ra ku fungha. Swipimelo swa tona swi sekeriwe ntsena eka vukulu bya swifaniso leswi katsekaka.

  1. <ul class = "gridi ya vuhangalasi bya mahungu" >
  2. <li>
  3. <a href = "#" >
  4. <img class = "xifaniso lexitsongo" src = "https://placehold.it/330x230" alt = "" >
  5. </a>
  6. </li>
  7. <li>
  8. <a href = "#" >
  9. <img class = "xifaniso lexitsongo" src = "https://placehold.it/330x230" alt = "" >
  10. </a>
  11. </li>
  12. </ul>

Ku aka matafula

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Matafula i makulu—eka swilo swo tala. Matafula lamakulu, hambiswiritano, ya lava rirhandzu nyana ra markup leswaku ya pfuna, ya ringaniseriwa, naswona ya hlayeka (eka xiyimo xa khodi). Hi leswi switsundzuxo swi nga ri swingani leswi u nga swi pfunaka.

Minkarhi hinkwayo phutsela tinhlokomhaka ta wena ta tikholomu hi ndlela leyi nga ta va <thead>leswaku xiyimo xa le henhla xi va <thead>> <tr>> <th>.

Ku fana na tinhlokomhaka ta tikholomu, hinkwaswo leswi nga endzeni ka miri wa tafula ra wena swi fanele ku phutseriwe hi a <tbody>so xiyimo xa wena xi va <tbody>> <tr>> <td>.

Xikombiso: Switayili swa tafula swa xiviri

Matafula hinkwawo ya ta endliwa hi ku tisungulela hi ku tisungulela hi mindzilakano ya nkoka ntsena ku tiyisisa ku hlayeka na ku hlayisa xivumbeko. A ku na xilaveko xo engetela titlilasi leti engetelekeke kumbe swihlawulekisi.

# . Vito rosungula Xivongo Ririmi
1. Xin'wana N'we Xinghezi
2. Joe Xipaci xa Sixpack Xinghezi
3. Stu Dent Khodi
  1. <tafula>
  2. ...
  3. </tafula>

Xikombiso: Zebra-striped

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

# . Vito rosungula Xivongo Ririmi
1. Xin'wana N'we Xinghezi
2. Joe Xipaci xa Sixpack Xinghezi
3. Stu Dent Khodi

Xiya: Zebra-striping i ku antswisiwa loku yaka emahlweni loku nga kumeki eka swihlamusela-marito swa khale swo fana na IE8 na le hansi.

  1. < tlilasi ya tafula = "zebra-striped" >
  2. ...
  3. </tafula>

Xikombiso: Xirhendzevutana xa Zebra w/ TableSorter.js

Hi ku teka xikombiso lexi hundzeke, hi antswisa ku pfuna ka matafula ya hina hi ku nyika ntirho wo hlela hi ku tirhisa jQuery na xiengetelo xa Tablesorter . Click nhlokomhaka ya kholomo yin’wana na yin’wana ku cinca ku hlela.

# . Vito rosungula Xivongo Ririmi
2. Joe Xipaci xa Sixpack Xinghezi
3. Stu Dent Khodi
1. Swa wena N'we Xinghezi
  1. <script src = "js/jquery/jquery.xihlawulekisi xa tafula.min.js" ></script>
  2. <tsalwa >
  3. $ ( ntirho () { .
  4. $ ( "tafula#xikombiso xa Tafula ro hlela" ). xihlawulekisi xa tafula ({ nxaxamelo wa nxaxamelo : [[ 1 , 0 ]] });
  5. });
  6. </script>
  7. < tlilasi ya tafula = "zebra-striped" >
  8. ...
  9. </tafula>

Switayili swa xiviri

Tifomo hinkwato ti nyikiwa switayele swa ntolovelo ku ti humesa hi ndlela leyi hlayekaka na ku ringaniseriwa. Switayili swi nyikiwile eka ku nghenisa matsalwa, minxaxamelo yo hlawula, tindhawu ta matsalwa, swikoweto swa xiya-ni-moya na mabokisi yo kambela, na swikomba-nkarhi.

Xikombiso xa xivumbeko xa ntsheketo
Van’wana va ri va nkoka laha
Xiphemu lexitsongo xa tsalwa ra mpfuneto
Xikombiso xa xivumbeko xa ntsheketo
@
Xikombiso xa xivumbeko xa ntsheketo
Xiya: Tilebhele ti rhendzela swihlawulekisi hinkwaswo swa tindhawu letikulu swinene to tsindziyela ni fomo leyi tirhisiwaka swinene.
eka Minkarhi hinkwayo yi kombisiwa tanihi Pacific Standard Time (GMT -08:00).
Block ya tsalwa ra mpfuneto ku hlamusela nsimu leyi nga laha henhla loko swi laveka.
 

Tifomo leti hlanganisiweke

Engetela .form-stackedeka HTML ya fomo ya wena kutani u ta va na malebvu ehenhla ka tinsimu ta vona ematshan’wini ya le tlhelo ra vona ra ximatsi. Leswi swi tirha kahle loko tifomo ta wena ti koma kumbe u ri na tikholomu timbirhi ta swingheniso swa tifomo to tika.

Xikombiso xa xivumbeko xa ntsheketo
Xikombiso xa xivumbeko xa ntsheketo
Xiphemu lexitsongo xa tsalwa ra mpfuneto
Xiya: Tilebhele ti rhendzela swihlawulekisi hinkwaswo swa tindhawu letikulu swinene to tsindziyela ni fomo leyi tirhisiwaka swinene.
 

Vumba vukulu bya nsimu

Endla xivumbeko xihi na xihi input, select, kumbe ku textareaanama hi ku engetela titlilasi ti nga ri tingani ntsena eka ximaki xa wena.

Ku sukela eka v1.3.0, hi engeterile titlilasi ta ku pima leti simekiweke eka giridi ta swiaki swa xivumbeko. Hi kombela u tirhisa leswi ehenhla ka titlilasi leti nga kona ta .mini, , etc..small

Swikomba-nkarhi

Tanihi ntwanano, swikomba-nkarhi swi tirhisiwa eka swiendlo kasi swihlanganisi swi tirhisiwa eka swilo. Xikombiso, "Download" yi nga va button naswona "recent activity" yi nga va link.

Tiboto hinkwato ti default eka xitayili xa grey yo vonikela, kambe nhlayo ya titlilasi ta ntirho ti nga tirhisiwa eka switayele swa mihlovo yo hambana. Titlilasi leti ti katsa tlilasi ya wasi .primary, tlilasi ya wasi wo vonikela .info, tlilasi ya rihlaza .successna tlilasi yo tshwuka .danger.

Xikombiso xa swikomba-nkarhi

Switayili swa button swinga tirhisiwa eka xin’wana na xin’wana na leswi .btntirhisiweke. Hi ntolovelo u ta lava ku tirhisa leswi eka ntsena <a>, <button>, na ku hlawula <input>swiaki. Hi leyi ndlela leyi swi langutekaka ha yona:

       

Ku cinca-cinca vukulu

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Vana na swona!

Xiyimo xa vulema

Eka swikomba-nkarhi leswi nga tirhiki kumbe leswi nga tirhisiwiki hi app hikwalaho ka xivangelo xin’wana kumbe xin’wana, tirhisa xiyimo lexi nga tirhiki. Sweswo i .disabledswa swihlanganisi na :disabledswa <button>swiaki.

Swihlanganisi

Swikomba-nkarhi

 

Switsundzuxo swa xisekelo

.alert-message

Mahungu ya layini yin’we yo kombisa ku tsandzeka, ku tsandzeka loku nga ha vaka kona kumbe ku humelela ka xiendlo. Ngopfu-ngopfu swi pfuna eka tifomo.

Kuma javascript ya xitsonga »

×

Guacamole yo kwetsima! Best check yo self, a wu languteki kahle ngopfu.

×

Oh snap!Cinca leswi na leswiya ivi u ringeta nakambe.

×

Tirhe kahle!U hlaye rungula leri ra xitsundzuxo hi ndlela leyi humelelaka.

×

Tinhloko ti tlakukile!Lexi i xitsundzuxo lexi lavaka nyingiso wa wena, kambe a hi nchumu lowukulu wa nkoka sweswi ntsena.

Xikombiso xa khodi

  1. <div class = "xitsundzuxo xa rungula ra xitsundzuxo" >
  2. <a tlilasi = "pfala" href = "#" > × </a>
  3. <p><strong> Guacamole yo kwetsima! </strong> Best check yo self, a wu languteki kahle ngopfu. </p>
  4. </div>

Ku sivela marungula

.alert-message.block-message

Eka marungula lama lavaka nhlamuselo nyana, hi na switsundzuxo swa xitayili xa ndzimana. Leswi swi hetisekile ku bubbling up marungula yo leha ya swihoxo, ku tsundzuxa mutirhisi hi goza leri yimeleke, kumbe ku humesa ntsena rungula leswaku u ta kandziyisa ngopfu eka tluka.

Kuma javascript ya xitsonga »

×

Guacamole yo kwetsima! Lexi i xitsundzuxo! Best check yo self, a wu languteki kahle ngopfu. Nulla vitae elit libero, ku nga pharetra augue. Praesent commodo cursus magna, xihlala xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani.

×

Oh snap! U kume xihoxo! Cinca leswi na leswiya ivi u ringeta nakambe.

  • Duis mollis est leyi nga riki ya xiyimo xa le henhla
  • Nisi erat xitsonga xitsonga xitsonga
  • Eget lacinia odio sem nec xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga
×

Tirhe kahle! U hlaye rungula leri ra xitsundzuxo hi ndlela leyi humelelaka. Cum sociis natoque penatibus na magnis leyi nga na ku veleka, nascetur ridiculus mus. Maecenas faucibus mollis leyi nga exikarhi ka yona.

×

Tinhloko ta le henhla! Lexi i xitsundzuxo lexi lavaka nyingiso wa wena, kambe a hi nchumu lowukulu wa nkoka sweswi ntsena.

Xikombiso xa khodi

  1. <div class = "xitsundzuxo xa xisirhelelo xa rungula-xitsundzuxo" >
  2. <a tlilasi = "pfala" href = "#" > × </a>
  3. <p><strong> Guacamole yo kwetsima! Lexi i xitsundzuxo! </strong> Best check yo self, a wu languteki kahle ngopfu. Nulla vitae elit libero, ku nga pharetra augue. Praesent commodo cursus magna, xihlala xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani. </p>
  4. <div class = "swiendlo swa xitsundzuxo" >
  5. <a class = "btn small" href = "#" > Teka goza leri </a> <a class = "btn small" href = "#" > Kumbe endla leswi </a>
  6. </div>
  7. </div>

Timodali

Timodali—ti-dialog kumbe ti-lightbox—i kahle swinene eka swiendlo swa xiyimo eka swiyimo laha swi nga swa nkoka leswaku xiyimo xa le ndzhaku xi hlayisiwa.

Kuma javascript ya xitsonga »

Switsundzuxo swa Switirhisiwa

Twipsies yi pfuna swinene eka ku pfuna mutirhisi loyi a pfilunganyekeke no va kombetela eka ndlela leyinene.

Kuma javascript ya xitsonga »

Lorem ipsum dolar sit amet illo xihoxo ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuuntur consequuuntur, munhu loyi a nga na vukanganyisi odit perspiciatis laudantium re doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explibo, voluptas quia odit fugit accusantium totam totam architecto explicabo tshama ku fana na ku baleka ku baleka, totam doloremque unde sunt sed dicta quae ku rhuketela ku baleka voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

Popovers

Tirhisa ti-popover ku nyika vuxokoxoko bya matsalwa ya le hansi eka tluka handle ko khumba layout.

Kuma javascript ya xitsonga »

Xihloko xa Popover

Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya. Maecenas faucibus mollis leyi nga exikarhi ka yona. Morbi leo risus, porta ac consectetur ac, xirho xa le ndzeni xa xirhendzevutani eka eros.

Ku sungula

Ku hlanganisa javascript na layiburari ya Bootstrap swi olova swinene. Laha hansi hi ya eka swilo swa xisekelo hi ku nyika ti-plugin tin’wana to hlamarisa ku ku sungula!

Vona matsalwa ya javascript »

Leswi swi katsiweke

Tisa swin’wana swa swiphemu swa nkoka swa Bootstrap evuton’wini hi ti-plugin letintshwa ta ntolovelo leti tirhaka na jQuery na Ender . Hi ku khutaza ku ti andlala no ti cinca leswaku ti fambisana na swilaveko swa wena swo karhi swa nhluvukiso.

Fayili Nhlamuselo
xirhendzevutani xa bootstrap-modal.js Plugin ya hina ya Modal i super slim take eka plugin ya ndhavuko ya modal js! Hi teke vukheta byo hlawuleka ku katsa ntsena ntirho lowu nga ambalangiki nchumu lowu hi wu lavaka eka twitter.
bootstrap-switsundzuxo.js Plugin ya xitsundzuxo i tlilasi leyitsongo swinene yo engetela ntirho wa le kusuhi eka switsundzuxo.
bootstrap-xihlamusela-marito.js Plugin leyi i ya ku engetela ku tirhisana ka dropdown eka bootstrap topbar kumbe ti tabbed navigations.
bootstrap-swiphepherhele swa swifaniso.js Plugin ya ScrollSpy i ya ku engetela auto updating nav leyi sekeriweke eka xiyimo xa scroll eka bootstrap topbar.
bootstrap-tithebhu.js Plugin leyi yi engetela ku hatlisa, ku cinca-cinca ka thebhu na ntirho wa philisi ku rhendzeleka hi ku tirhisa swilo swa laha kaya.
xirhendzevutani xa xirhendzevutani-twipsy.js Hi ku ya hi plugin ya kahle swinene ya jQuery.tipsy leyi tsariweke hi Jason Frame; twipsy i vuhundzuluxeri lebyi pfuxetiweke, lebyi nga titshegangiki hi swifaniso, byi tirhisa css3 eka swifaniso leswi hanyaka, na data-attributes eka vuhlayiselo bya swihloko swa laha kaya!
bootstrap-xitsonga.js Plugin ya popover yi nyika xitirhisiwa xo olova xo engetela ti-popover eka xitirhisiwa xa wena. Yi andlala boostrap-twipsy.js plugin, kutani tiyiseka leswaku u khoma fayili yoleyo na yona loko u katsa ti-popovers eka phurojeke ya wena!

Xana javascript ya laveka?

Hawa! Bootstrap yi endliwile ro sungula na ro hetelela ku va layiburari ya CSS. Javascript leyi yi nyika leyara ya xisekelo ya vuhlanganisi ehenhla ka switayele leswi katsekaka.

Kambe, eka lava va lavaka javascript, hi nyikile ti-plugin leti nga laha henhla ku ku pfuna ku twisisa ndlela yo hlanganisa Bootstrap na javascript na ku ku nyika nhlawulo wo hatlisa, wo vevuka wa ntirho wa xisekelo hi ku hatlisa.

Ku kuma vuxokoxoko byo tala na ku vona tidemo tin’wana leti hanyaka, hi kombela u languta eka tluka ra hina ra matsalwa ya plugin .

Bootstrap yi akiwile hi Preboot , phakiti ra xihlovo lexi pfulekeke xa mixins na swilo leswi cinca-cincaka leswi nga ta tirhisiwa swin’we na Less , preprocessor ya CSS ya nhluvukiso wa webu hi ku hatlisa no olova.

Languta ndlela leyi hi tirhiseke Preboot ha yona eka Bootstrap na ndlela leyi u nga yi tirhisaka ha yona loko u fanele u hlawula ku fambisa Less eka phurojeke ya wena leyi landzelaka.

Ndlela yo yi tirhisa

Tirhisa nhlawulo lowu ku tirhisa hi ku helela swilo leswi cinca-cincaka swa Less swa Bootstrap, mixins, na nesting eka CSS hi ku tirhisa javascript eka browser ya wena.

  1. <link rel = "xiphephana xa xitayili/le hansi" href = "leswi nga ehansi/bootstrap.less" media = "hinkwaswo" />
  2. <script src = "js/leswi nga ehansi-1.1.3.min.js" ></script>

A wu titwi u ri na xitshunxo xa .js? Ringeta app ya Less Mac kutani u tirhisa Node.js ku hlengeleta loko u tirhisa khodi ya wena.

Leswi swi katsiweke

Hi leswi swin’wana swa swilo leswikulu swa leswi katsekaka eka Twitter Bootstrap tanihi xiphemu xa Bootstrap. Nhloko eka webusayiti ya Bootstrap kumbe tluka ra phurojeke ya Github ku dawuniloda na ku dyondza swo tala.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka eka Less swi hetisekile ku hlayisa na ku pfuxeta CSS ya wena handle ka ku pandza ka nhloko. Loko u lava ku cinca ntikelo wa muvala kumbe ntikelo lowu tirhisiwaka ngopfu, wu pfuxete endhawini yin’we ivi u vekiwile.

  1. // Swihlanganisi
  2. @Muhlovo wa xihlanganisi : #8b59c2;
  3. @linkColorHover : munyama ( @Muvala wa xihlanganisi , 10 );
  4.  
  5. // Swivungu
  6. @ntima : #000;
  7. @grayDark : ku voninga ( @ntima , 25 %);
  8. @gray : ku voninga ( @ntima , 50 %);
  9. @grayLight : ku voninga ( @ntima , 70 %);
  10. @grayLighter : ku voninga ( @ntima , 90 %);
  11. @wo basa : #fff;
  12.  
  13. // Mihlovo ya Accent
  14. @xivunguvungu : #08b5fb;
  15. @rihlaza : #46a546;
  16. @yo tshwuka : #9d261d;
  17. @yo tshwuka : #ffc40d;
  18. @orange : #f89406, xihlangi xa xirhendzevutani;
  19. @xitshopana : #c3325f;
  20. @xivunguvungu : #7a43b6;
  21.  
  22. // Gridi ya masungulo
  23. @xivumbeko xa xisekelo : 13px ;
  24. @xisekelo : 18px ;

Ku nyika mavonelo

Less yi tlhela yi nyika xitayili xin’wana xo nyika mavonelo ku engetela eka /* ... */xivumbeko xa ntolovelo xa CSS.

  1. // Leyi i nhlamuselo
  2. /* Leyi na yona i comment */

Mixins ku ya ehenhla ka wazoo

Mixins hi xisekelo i swi katsa kumbe swiphemu swa CSS, leswi ku pfumelelaka ku hlanganisa xibokisana xa khodi xi va xin’we. Va kahle eka vendor prefixed properties ku fana nabox-shadow , swirhendzevutani swa xihlamusela-marito, switachi swa tifonto, na swin’wana. Laha hansi ku na xikombiso xa ti mixins leti katsekaka na Bootstrap.

Switachi swa tifonto

  1. #font ya { .
  2. . shorthand ( @ndzilo : ntolovelo , @vukulu : 14px , @lineHeight : 20px ) {
  3. fonto - vukulu : @sayizi ;
  4. font - ntiko : @ndzilo ;
  5. layini - ku tlakuka : @lineHeight ;
  6. } .
  7. . sans - serif ( @ndzilo : ntolovelo , @vukulu : 14px , @ku leha ka layini : 20px ) {
  8. font - ndyangu : "Helvetica Neue" , ​​Xihlamusela - marito xa Xitsonga , Arial , xitsonga ;
  9. fonto - vukulu : @sayizi ;
  10. font - ntiko : @ndzilo ;
  11. layini - ku tlakuka : @lineHeight ;
  12. } .
  13. ...
  14. } .

Ti-gradient

  1. #xirhendzevutani { .
  2. ...
  3. . vertical ( @Muhlovo wo sungula : #555, @Muhlovo wo hetelela: #333) {
  4. muvala wa le ndzhaku : @endColor ;
  5. background - ku phindha : ku phindha - x ;
  6. background - image : - khtml - gradient ( linear , ximatsi ehenhla , ximatsi ehansi , ku suka eka ( @startColor ), ku ya eka ( @endColor )); // Muendli wa swilo
  7. xifaniso xa le ndzhaku : - moz - linear - gradient ( @Muhlovo wo sungula , @Muhlovo wo hetelela ); // FF 3.6+
  8. xifaniso xa le ndzhaku : - ms - linear - gradient ( @Muhlovo wo sungula , @Muhlovo wo hetelela ); // IE10
  9. background - image : - webkit - gradient ( linear , ximatsi ehenhla , ximatsi ehansi , muvala - ku yima ( 0 %, @startColor ), muvala - ku yima ( 100 %, @endColor )); // Safari 4+, Xitirhisiwa xa chrome 2+
  10. xifaniso xa le ndzhaku : - webkit - linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Safari 5.1+, Chrome 10+
  11. xifaniso xa le ndzhaku : - o - linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Opera ya 11.10
  12. xifaniso xa le ndzhaku : linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Xiyimo xa le henhla
  13. } .
  14. ...
  15. } .

Matirhelo ya ntirho

Kuma fancy u endla math yo karhi ku humesa ti mixins leti cinca-cincaka na matimba ku fana na leyi nga laha hansi.

  1. // Griditude ya xiyimo xa le henhla
  2. @gridTikholomu : 16 ;
  3. @gridKu anama ka Kholomo : 40px ;
  4. @gridGutterKu anama : 20px ;
  5. @siteWidth : ( @Tikholomu ta gridi * @Ku anama ka Kholomo ya gridi ) + ( @Ku anama ka Gutter ya gridi * ( @Tikholomu ta gridi - 1 ));
  6.  
  7. // Endla tikholomu tin'wana
  8. . tikholomu ( @kholomuSpan : 1 ) { .
  9. width : ( @GridKu anama ka Kholomo * @Xiphemu xa kholomo ) + ( @GridGutterWidth * ( @Xiphemu xa kholomo - 1 ));
  10. } .

Ku Hlengeleta Switsongo

Endzhaku ko cinca .lesstifayela eka /lib/, u ta lava ku ti hlengeleta nakambe leswaku u ta pfuxeta tifayela ta bootstrap-*.*.*.css na bootstrap-*.*.*.min.css. Loko u rhumela xikombelo xo koka eka GitHub, u fanele ku tshama u ri karhi u hlengeleta nakambe.

Tindlela to hlengeleta

Ndlela Magoza ya kona
Node leyi nga na makefile

Nghenisa less command line compiler na npm hi ku tirhisa xileriso lexi landzelaka:

$ npm ku nghenisa lessc

Loko se u nghenisiwile ntsena tsutsuma makeku suka eka rimitsu ra bootstrap directory ya wena naswona u vekiwile hinkwenu.

Ku engetela kwalaho, loko u ri na watchr leyi nghenisiweke, u nga ha tsutsuma make watchleswaku bootstrap yi akiwa nakambe hi ku tisungulela nkarhi wun’wana ni wun’wana loko u hlela fayili eka bootstrap lib (leswi a swi laveki, i ndlela yo olova ntsena).

Javascript

Download Less.js ya sweswinyana ivi u katsa ndlela yo ya eka yona (na Bootstrap) eka head.

  1. <link rel = "xiphephana xa xitayili/le hansi" href = "/ndlela/ku ya eka/bootstrap.less" >
  2. <script src = "/ndlela/ku ya eka/leswi nga ehansi.js" ></script>

Ku tlhela u hlengeleta tifayela ta .less, ti hlayise ntsena ivi u tlhela u layicha tluka ra wena. Less.js yi ti hlengeleta no ti hlayisa eka vuhlayiselo bya laha kaya.

Layini ya swileriso

Loko se u ri na xitirhisiwa xa less command line lexi nghenisiweke, tirhisa ntsena xileriso lexi landzelaka:

$ lessc ./lib/xiphemu xa xirhendzevutani.less > xirhangiso xa xitsonga.css

Tiyiseka leswaku u katsa --compresseka xileriso xexo loko u ringeta ku hlayisa tibayiti tin’wana!

Less Mac ya app

App leyi nga riki ya ximfumo ya Mac yi hlalela tidayirekitara ta tifayela ta .less naswona yi hlengeleta khodi eka tifayela ta laha kaya endzhaku ka ku hlayisiwa kun’wana ni kun’wana ka fayili ya .less leyi hlaleriweke.

Loko u swi tsakela, u nga cinca-cinca leswi u swi tsakelaka eka app leswaku u ta hunguta hi ku tisungulela ni leswaku tifayela leti hlengeletiweke ti hetelelaka ti ri eka xikombo xihi.