Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. I-Morbi leo risus, i-porta ac consectetur ac, i-vestibulum kunye ne-eros.
I-Bootstrap yi-toolkit evela kwi-Twitter eyenzelwe ukukhaba uphuhliso lwewebhu kunye neesayithi.
Ibandakanya isiseko se-CSS kunye ne-HTML ye-typography, iifom, amaqhosha, iitafile, iigridi, ukuhamba, kunye nokunye.
Isilumkiso se- Nerd: I-Bootstrap yakhiwe ngokuNcinci kwaye yenzelwe ukusebenza ngaphandle kwesango kunye neziphequluli zanamhlanje engqondweni.
Kwesona siqalo sikhawulezayo nesilula, khuphela nje esi siqwengana kwiphepha lakho lewebhu.
Umlandeli wokusebenzisa Okuncinci? Akukho ngxaki, yenza nje i-repo kwaye wongeze le migca:
Khuphela, ifolokhwe, tsala, imiba yefayile, kunye nokunye ngeBootstrap esemthethweni repo kwiGithub.
Ngoku v1.3.0
Iinjineli kwi-Twitter ngokwembali zasebenzisa phantse naliphi na ithala leencwadi ababeqhelene nalo ukuhlangabezana neemfuno zangaphambili. I-Bootstrap yaqala njengempendulo kwimingeni ekhoyo. Ngoncedo lwabantu abaninzi aboyikekayo, iBootstrap ikhule kakhulu.
Funda ngakumbi kwi-dev.twitter.com ›
I-Bootstrap iyavavanywa kwaye iyaxhaswa kwiziphequluli eziphambili zale mihla njengeChrome, Safari, Internet Explorer, kunye neFirefox.
I-Bootstrap iza iphelele kunye ne-CSS ehlanganisiweyo, engaqokelelwanga, kunye nemizekelo yeetemplates.
Inkqubo yegridi engagqibekanga enikezelweyo njengenxalenye yeBootstrap yi 940px ebanzi 16-kholamu yegridi. Yincasa yenkqubo yegridi edumileyo ye-960, kodwa ngaphandle komjikelo ongezelelweyo / ukupakisha kwicala lasekhohlo nasekunene.
Njengoko kubonisiwe apha, uyilo olusisiseko lunokwenziwa “ngeekholamu” ezimbini, nganye ithatha inani leekholamu ezili-16 ezisisiseko esizichaze njengenxalenye yenkqubo yethu yegridi. Jonga le mizekelo ingezantsi ukuze ufumane iinguqulelo ezininzi.
- <div class = "umqolo" >
- <div class = "span6" >
- ...
- </ div>
- <div class = "span10" >
- ...
- </ div>
- </ div>
Nest umxholo wakho ukuba kufuneka ngokwenza .row
ngaphakathi koluhlu olukhoyo.
- <div class = "umqolo" >
- <div class = "span12" >
- Inqanaba loku-1 lekholamu
- <div class = "umqolo" >
- <div class = "span6" >
- Inqanaba lesi-2
- </ div>
- <div class = "span6" >
- Inqanaba lesi-2
- </ div>
- </ div>
- </ div>
- </ div>
Yakhelwe kwiBootstrap zimbalwa zezinto eziguquguqukayo zokwenza ngokwezifiso inkqubo yegridi eyi-940px. Ngokwenza ngokwezifiso kancinci, unokuguqula ubungakanani beekholamu, iigutter zabo, kunye nesitya abahlala kuso.
Izinto eziguquguqukayo ezifunekayo ukulungisa inkqubo yegridi ngoku zonke zihlala kwi variables.less
.
Iyaguquguquka | Ixabiso elimiselweyo | Inkcazo |
---|---|---|
@gridColumns |
16 | Inani leekholomu ngaphakathi kwegridi |
@gridColumnWidth |
40px | Ububanzi bekholamu nganye ngaphakathi kwegridi |
@gridGutterWidth |
20px | Isithuba esilandulayo phakathi kwekholamu nganye |
@siteWidth |
Isimbuku esibaliweyo kuzo zonke iikholamu kunye neegutha | Sisebenzisa umdlalo osisiseko wokubala inani leekholomu kunye neegutter kwaye ubeke ububanzi .fixed-container() bomxube. |
Ukuguqula igridi kuthetha ukutshintsha izinto ezintathu @grid-*
eziguquguqukayo kunye nokubuyisela kwakhona iifayile eziNcinci.
I-Bootstrap iza ixhotyiswe ukuphatha inkqubo yegridi ukuya kuthi ga kwiikholamu ezingama-24; Ukungagqibeki ngu 16. Nantsi indlela iiguquguquki zegridi yakho eziya kujongeka zilungiselelwe igridi yekholamu engama-24.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Nje ukuba uqokelelwe, uya kusekwa!
Uyilo olungagqibekanga kunye olulula lwe-940px-ebanzi, oluphakathi nendawo malunga nayo nayiphi na iwebhusayithi okanye iphepha elinikezelweyo <div.container>
.
- <umzimba>
- <div class = "container" >
- ...
- </ div>
- </ umzimba>
Enye indlela, ulwakhiwo lwephepha oluguquguqukayo olunemin- kunye nobubanzi obukhulu kunye nebar yecala lasekhohlo. Ilungele usetyenziso kunye namaxwebhu.
- <umzimba>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </ div>
- <div class = "umxholo" >
- ...
- </ div>
- </ div>
- </ umzimba>
Uluhlu olusemgangathweni lwenkqubo yokuchwetheza yokulungisa amaphepha akho ewebhu.
Yonke igridi yokuchwetheza isekelwe kwiinguqu ezimbini ezincinci kwiinguqu zethu.ifayile engaphantsi: @basefont
kunye @baseline
. Eyokuqala sisiseko sobungakanani befonti esetyenziswa kuyo yonke indawo kwaye eyesibini bubude bomgca wesiseko.
Sisebenzisa ezo ziguquguqukayo, kunye nezibalo ezithile, ukwenza imida, iipadi, kunye nobude bomgca walo lonke uhlobo lwethu nokunye.
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 ut id elit.
Ukusebenzisa ugxininiso, iidilesi, & nezifinyezo
<strong>
<em>
<address>
<abbr>
Iithegi zogxininiso ( <strong>
kunye <em>
) mazisetyenziswe ukubonisa ukubaluleka okanye ugxininiso lwegama okanye ibinzana elinxulumene nekopi yalo elingqongileyo. Sebenzisa <strong>
ngokubaluleka kunye <em>
nogxininiso loxinzelelo .
Fusce dapibus , tellus ac cursus commodo , tor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. I-Nulla vitae elit libero, i-pharetra augue.
Qaphela: Kusalungile ukusebenzisa <b>
kunye <i>
neethegi kwi-HTML5 kwaye akufuneki ukuba zibhalwe ngqindilili kunye nekekeleyo, ngokulandelelanayo (nangona kukho enye into echazayo, yisebenzise). <b>
yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo, ngelixa <i>
ubukhulu becala iselizwi, amagama obugcisa, njl.
Isici <address>
sisetyenziselwa ulwazi loqhagamshelwano kukhokho walo okufutshane, okanye umzimba wonke womsebenzi. Nantsi imizekelo emibini yendlela enokusetyenziswa ngayo:
Qaphela: Umgca ngamnye <address>
kufuneka uphele ngokuqhawula umgca ( <br />
) okanye usongelwe kwithegi yomgangatho webhloko (umzekelo, <p>
) ukucwangcisa ngokufanelekileyo umxholo.
Ukwenzela izifinyezo kunye nee-akhronimi, sebenzisa i- <abbr>
tag ( <acronym>
ihoxisiwe kwi- HTML5 ). Beka ifom ye-shorthand ngaphakathi kwethegi kwaye usete isihloko segama elipheleleyo.
<blockquote>
<p>
<small>
Ukubandakanya i-blockquote, <blockquote>
jikeleza <p>
kunye <small>
neethegi. Sebenzisa <small>
isiqalelo ukucaphula umthombo wakho kwaye uya kufumana i-dash em —
phambi kwayo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.
UGqr Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet. </p>
- <encinci> uGqirha Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp ikhowudi yakho ngesitayile ngeethegi ezimbini ezilula. Ukonwabela ngakumbi ngejavascript, yehlisa ikhowudi kaGoogle yethala leencwadi kwaye usetiwe.
Ikhowudi, iibhloko okanye iziqwengana ezingaphakathi, zinokuboniswa ngesitayile nje ngokusonga kwithegi elungileyo. Kwiibhloko zekhowudi ezithatha imigca emininzi, sebenzisa <pre>
isiqalelo. Kwikhowudi engaphakathi, sebenzisa <code>
isiqalelo.
Isiqalelo | Isiphumo |
---|---|
<code> |
Kumgca wokubhaliweyo ngolu hlobo, ikhowudi yakho esongelweyo iya kujongeka ngolu hlobo <html> . |
<pre> |
<div> <h1>Isihloko</h1> <p>Into elapha...</p> </ div> Qaphela: Qinisekisa ukugcina ikhowudi ngaphakathi |
<pre class="prettyprint"> |
Usebenzisa ilayibrari kagoogle-code-prettify, iibhloko zakho zekhowudi zifumana isitayile sokubonwayo esahlukileyo kunye nokuqaqambisa i-syntax ngokuzenzekelayo. <div> <h1> Isihloko </h1> <p> Into ethile apha... </p> </div> Khuphela i-google-code-prettify kwaye ujonge i-readme ukuze uyisebenzise. |
<span class="label">
Tsalela ingqalelo okanye iflegi naliphi na ibinzana kumbhalo womzimba wakho.
Ukhe wafuna enye yezo ziNtsha zintle ! okanye Iiflegi ezibalulekileyo xa ubhala ikhowudi? Ewe, ngoku unazo. Nantsi into ebandakanyiweyo ngokungagqibekanga:
Ileyibhile | Isiphumo |
---|---|
<span class="label">Default</span> |
Ukuhlala kukho |
<span class="label success">New</span> |
Entsha |
<span class="label warning">Warning</span> |
Isilumkiso |
<span class="label important">Important</span> |
Kubalulekile |
<span class="label notice">Notice</span> |
Qaphela |
Bonisa i-thumbnails yobukhulu obahlukeneyo kumaphepha anombhalo osezantsi we-HTML kunye nezimbo ezincinci.
Ii-Thumbnails kwi- .media-grid
inokuba nayiphi na isayizi, kodwa zisebenza ngcono xa zenziwe imephu ngokuthe ngqo kwinkqubo yegridi ye-Bootstrap eyakhelweyo. Ububanzi bomfanekiso obunje ngo 90, 210, kunye no 330 zidityaniswa neepixels ezimbalwa zokukhuselwa ukulingana no .span2
, .span4
, kunye .span6
nobukhulu bekholamu.
Iigridi zeMedia kulula ukuzisebenzisa kwaye endaweni yoko zilula kwicala lokuphawula. Imilinganiselo yabo isekelwe kuphela kubukhulu bemifanekiso ebandakanyiweyo.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "i-thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </ li>
- <li>
- <a href = "#" >
- <img class = "i-thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </ li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Iitafile zinkulu-kwizinto ezininzi. Iitheyibhile ezinkulu, nangona kunjalo, zidinga uthando lwemarkup ukuba lube luncedo, lube luncedo, kwaye lufundeke (kwinqanaba lekhowudi). Nanga amacebiso ambalwa okunceda.
Soloko usongele iiheader zekholamu yakho ngendlela <thead>
yokuba ulawulo lweqela <thead>
> <tr>
> <th>
.
Ngokufana neeheader zekholamu, wonke umxholo womzimba wetheyibhile yakho kufuneka usongelwe <tbody>
ukuze ulawulo lwakho lube <tbody>
> <tr>
> <td>
.
Zonke iitheyibhile ziya kwenziwa ngohlobo oluzenzekelayo kunye nemida ebalulekileyo kuphela ukuqinisekisa ukufundeka kunye nokugcinwa kwesakhiwo. Akukho mfuneko yokongeza iiklasi ezongezelelweyo okanye iimpawu.
# | Igama lokuqala | Ifani | Ulwimi |
---|---|---|---|
1 | Abanye | Nye | IsiNgesi |
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
- <itheyibhile>
- ...
- </ table>
Kwiitheyibhile ezifuna idatha eninzi kwiindawo ezixineneyo, sebenzisa i-flavour condensed enqumla i-padding phakathi. Isenokusetyenziswa ngokudityaniswa nemida kunye nemigca yeqwarhashe, kanye njengezimbo zetafile ezingagqibekanga.
# | Igama lokuqala | Ifani | Ulwimi |
---|---|---|---|
1 | Abanye | Nye | IsiNgesi |
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
Yenza iitafile zakho zibukeke nje kancinci kancinci ngokurhangqa iikona zabo kunye nokongeza imida macala onke.
# | Igama lokuqala | Ifani | Ulwimi |
---|---|---|---|
1 | Abanye | Nye | IsiNgesi |
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
- < iklasi yetafile = "itafile enomda" >
- ...
- </ table>
Fumana ubumnandi obuncinci ngeetafile zakho ngokongeza i-zebra-striping-yongeza nje .zebra-striped
iklasi.
# | Igama lokuqala | Ifani | Ulwimi |
---|---|---|---|
1 | Abanye | Nye | IsiNgesi |
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
thatha iikholamu ezi-4 | |||
thatha iikholamu ezi-2 | thatha iikholamu ezi-2 |
Qaphela: IZebra-striping siphuculo esiqhubela phambili asifumanekiyo kwizikhangeli ezindala ezifana ne-IE8 nangaphantsi.
- < iklasi yetafile = "i-zebra-striped" >
- ...
- </ table>
Ukuthatha umzekelo wangaphambili, siphucula ukusebenziseka kweetafile zethu ngokubonelela ngokusebenza kokuhlelwa ngejQuery kunye ne- Tablesorter plugin. Nqakraza nawuphi na umxholo wekholam ukutshintsha uhlobo.
# | Igama lokuqala | Ifani | Ulwimi |
---|---|---|---|
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
1 | Eyakho | Nye | IsiNgesi |
- <script src = "js/jquery/jquery.tablesorter.min.js" > </script>
- <script >
- $ ( umsebenzi () {
- $ ( "itafile#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < iklasi yetafile = "i-zebra-striped" >
- ...
- </ table>
Zonke iifom zinikwa izimbo ezihlala zikhona ukuze zibonise ngendlela efundekayo nenokwaleka. Izimbo zibonelelwa ngamagalelo okubhaliweyo, khetha uluhlu, iindawo ezibhaliweyo, amaqhosha erediyo kunye neebhokisi zokukhangela, kunye namaqhosha.
Yongeza .form-stacked
kwi-HTML yefomu yakho kwaye uya kuba neeleyibhile ngaphezulu kwamasimi azo endaweni yokuba ngasekhohlo. Oku kusebenza kakuhle ukuba iifom zakho zimfutshane okanye uneekholamu ezimbini zamagalelo kwiifom ezinzima.
Yenza ngokwezifiso naluphi na uhlobo input
, select
okanye textarea
ububanzi ngokongeza nje iiklasi ezimbalwa kuphawu lwakho.
Ukusukela kwi-v1.3.0, songeze iiklasi zokulinganisa ezisekelwe kwigridi kwizinto zefom. Nceda usebenzise ezi kwiiklasi ezikhoyo .mini
, .small
, njl.
Njengesiqhelo, amaqhosha asetyenziselwa izenzo ngelixa amakhonkco asetyenziselwa izinto. Umzekelo, "Khuphela" inokuba liqhosha kwaye "umsebenzi wamva nje" unokuba likhonkco.
Onke amaqhosha angagqibekanga kwisitayile esingwevu esikhanyayo, kodwa inani leeklasi ezisebenzayo zinokusetyenziselwa izimbo zombala ezahlukeneyo. Ezi klasi ziquka iklasi eluhlaza okwesibhakabhaka .primary
, iklasi eluhlaza okwesibhakabhaka .info
, iklasi eluhlaza .success
, kunye neklasi ebomvu .danger
.
Izimbo zamaqhosha zinokusetyenziswa kuyo nantoni na .btn
esetyenzisiweyo. Ngokwesiqhelo uya kufuna ukusebenzisa ezi kuphela <a>
, <button>
, kwaye ukhethe <input>
izinto. Nantsi indlela ekhangeleka ngayo:
Unqwenela amaqhosha amakhulu okanye amancinci? Yiba nayo!
Kumaqhosha angasebenziyo okanye avaliwe yi-app ngenxa yesizathu esinye okanye esinye, sebenzisa imeko yokukhubazeka. Leyo .disabled
yeyamakhonkco kunye :disabled
nezinto <button>
.
.alert-message
Imiyalezo yomgca omnye yokuqaqambisa ukusilela, ukusilela okunokwenzeka, okanye impumelelo yesenzo. Iluncedo kakhulu kwiifom.
- <div class = "isilumkiso somyalezo" >
- <a iklasi = "vala" href = "#" > × </a>
- <p><strong> Iguacamole engcwele! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu. </p>
- </ div>
.alert-message.block-message
Kwimiyalezo efuna ingcaciso kancinane, sinezilumkiso zesimbo somhlathi. Ezi zilungele ukubhabhisa imiyalezo emide yempazamo, ukulumkisa umsebenzisi ngesenzo esilindileyo, okanye ukunika ulwazi nje ukuze kugxininiswe ngakumbi kwiphepha.
- <div class = "isilumkiso-umyalezo block-umyalezo isilumkiso" >
- <a iklasi = "vala" href = "#" > × </a>
- <p><strong> Iguacamole engcwele! Esi sisilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu. I-Nulla vitae elit libero, i-pharetra augue. I-Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "isilumkiso-izenzo" >
- <a class = "btn small" href = "#" > Thatha eli nyathelo </a> <a class = "btn small" href = "#" > Okanye yenza oku </a>
- </ div>
- </ div>
Iimodals-incoko zababini okanye ii-lightboxes-zilungile kwizenzo zomxholo kwiimeko apho kubalulekile ukuba umxholo ongasemva ugcinwe.
Umzimba omnye olungileyo…
I-Twipsies iluncedo kakhulu ekuncedeni umsebenzisi obhidekileyo kunye nokubakhomba kwicala elifanelekileyo.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaum quae voluptam quart quae quae voluptas volupta quae quae quae voluptam accusantium accusantium totam architecto explicabo sit quasi fugit fugit .
Sebenzisa iipopovers ukunika ulwazi olungaphantsi komxholo kwiphepha ngaphandle kokuchaphazela uyilo.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. I-Morbi leo risus, i-porta ac consectetur ac, i-vestibulum kunye ne-eros.
Ukudibanisa i-javascript kunye nethala leencwadi le-Bootstrap kulula kakhulu. Ngezantsi sihamba phezu kweziseko kwaye sikubonelele ngeeplagi ezimangalisayo ukuze uqalise!
Zisa ezinye zezinto eziphambili zeBootstrap ebomini kunye neeplagi zesiqhelo ezitsha ezisebenza ngejQuery kunye ne- Ender . Siyakukhuthaza ukuba uyandise kwaye uzilungise ukuze zihambelane neemfuno zakho zophuhliso.
Ifayile | Inkcazo |
---|---|
bootstrap-modal.js | I-plugin yethu ye-Modal yinto encinci kakhulu yokuthatha i-plugin ye-modal ye- js ! Sithathe ngononophelo olukhethekileyo ukubandakanya kuphela ukusebenza okungenanto esikufunayo kwi-twitter. |
bootstrap-alerts.js | Iplagi yesilumkiso yiklasi encinci kakhulu yokongeza ukusebenza ngokusondeleyo kwizilumkiso. |
bootstrap-dropdown.js | Le plugin yeyokongeza unxibelelwano oluhlayo kwibar engaphezulu ye-bootstrap okanye ukukhangela okusekwe kwi-tabbed. |
bootstrap-scrollspy.js | I-plugin yeScrollSpy yeyokongeza i-auto updating nav ngokusekelwe kwindawo yokuskrola kwibar topbar. |
bootstrap-buttons.js | I-plugin yeScrollSpy yeyokongeza i-auto updating nav ngokusekelwe kwindawo yokuskrola kwibar topbar. |
bootstrap-tabs.js | Le plugin yongeza ithebhu ekhawulezayo, eguqukayo kunye nokusebenza kweepilisi zokuhamba ngebhayisikile ngomxholo wendawo. |
bootstrap-twipsy.js | Ngokusekwe kweyona plugin igqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; i-twipsy yinguqulelo ehlaziyiweyo, engathembeli kwimifanekiso, isebenzisa i-css3 yoopopayi, kunye nedatha yeempawu zogcino lwesihloko sendawo! |
bootstrap-popover.js | Iplagi yepopover ibonelela ngendlela elula yokongeza iipopovers kwisicelo sakho. Yandisa iplagi ye -boostrap-twipsy.js , ke qiniseka ukuba uyayibamba loo fayile xa ubandakanya iipopovers kwiprojekthi yakho! |
Hayi! I-Bootstrap iyilwe kuqala kwaye iphambili ukuba ibe yilayibrari yeCSS. Le javascript ibonelela umaleko osebenzayo osisiseko phezu kwezimbo ezibandakanyiweyo.
Nangona kunjalo, kwabo badinga i-javascript, sinikeze iiplagi ezingasentla ukukunceda ukuba uqonde indlela yokudibanisa i-Bootstrap kunye ne-javascript kunye nokukunika ukhetho olukhawulezayo, olukhaphukhaphu ekusebenzeni okusisiseko ngoko nangoko.
Ngolwazi oluthe kratya kunye nokubona idemos ephilayo, nceda ujonge kwiphepha lethu lamaxwebhu eplagi .
I-Bootstrap yakhiwe ukusuka kwi- Preboot , ipakethe evulekileyo yomthombo wemixube kunye neziguquko eziza kusetyenziswa ngokubambisana noNgaphantsi , i-CSS yangaphambili yophuhliso lwewebhu olukhawulezayo kunye nokulula.
Jonga indlela esisebenzise ngayo i-Preboot kwi-Bootstrap kunye nendlela onokuyisebenzisa ngayo xa ukhetha ukuqhuba Ngaphantsi kwiprojekthi yakho elandelayo.
Sebenzisa olu khetho ukwenza usetyenziso olugcweleyo lweBootstrap's Okuguquguqukayo Okuncinci, imixube, kunye nendlwane kwi-CSS ngejavascript kumkhangeli zincwadi wakho.
- <ikhonkco rel = "icwecwe lesimbo/ngaphantsi" href = "ngaphantsi/bootstrap.less" media = "konke" />
- <script src = "js/less-1.1.3.min.js" > </script>
Awuziva isisombululo se.js? Zama i-Less Mac app okanye usebenzise i-Node.js ukuqokelela xa uhambisa ikhowudi yakho.
Nanga amanye amagqabantshintshi okubandakanyiweyo kwi-Twitter Bootstrap njengenxalenye yeBootstrap. Yiya kwiwebhusayithi yeBootstrap okanye iphepha leprojekthi yeGithub ukuze ukhuphele kwaye ufunde ngakumbi.
Izinto eziguquguqukayo kwiNgancinci zigqibelele ukugcina kunye nokuhlaziya intloko yakho ye-CSS simahla. Xa ufuna ukutshintsha ixabiso lombala okanye ixabiso elisetyenziswa rhoqo, lihlaziye kwindawo enye kwaye usetwe.
- // Iikhonkco
- @linkColor : #8b59c2;
- @linkColorHover : mnyama ( @linkColor , 10 );
- // Izimvi
- @mnyama : #000;
- @grayDark : khaphukha ( @black , 25 %);
- @grey : khaphukha ( @black , 50 %);
- @grayLight : khaphukha ( @black , 70 %);
- @grayLighter : khaphukha ( @black , 90 %);
- @mhlophe : #fff;
- // Imibala ye-Accent
- @blue : #08b5fb;
- @green : #46a546;
- @bomvu : #9d261d;
- @mthubi : #ffc40d;
- @orenji : #f89406;
- @pinki : #c3325f;
- @mfusa : #7a43b6;
- // Igridi esisiseko
- @basefont : 13px ;
- @baseline : 18px ;
Okuncinci kukwabonelela ngesinye isimbo sokuphawula ukongeza kwi- /* ... */
syntax yesiqhelo yeCSS.
- // Olu luphawu
- /* Oku kwakhona ngumbono */
Imixube ngokusisiseko ibandakanya okanye iinxalenye zeCSS, ikuvumela ukuba udibanise ibhloko yekhowudi ibenye. Zilungile kwiipropathi ezilungiselelwe umthengisi njenge box-shadow
, iigradient zebrowser ezinqamlezayo, isitaka sefonti, nokunye. Ngezantsi isampuli yeengxube ezifakwe kwi-Bootstrap.
- #ifonti {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ifonti - ubungakanani : @ubungakanani ;
- ifonti - ubunzima : @weight ;
- umgca - ubude : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - intsapho : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- ifonti - ubungakanani : @ubungakanani ;
- ifonti - ubunzima : @weight ;
- umgca - ubude : @lineHeight ;
- }
- ...
- }
- #igradient {
- ...
- . nkqo ( @startColor : #555, @endColor: #333) {
- imvelaphi - umbala : @endColor ;
- imvelaphi - phinda : phinda - x ;
- imvelaphi - umfanekiso : - khtml - igradient ( linear , phezulu ekhohlo , ezantsi ekhohlo , ukusuka ( @startColor ), ukuya ( @ endColor )); // Konqueror
- imvelaphi - umfanekiso : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- imvelaphi - umfanekiso : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- yangasemva - umfanekiso : - webkit - gradient ( linear , phezulu ekhohlo , ekhohlo ezantsi , umbala - misa ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- imvelaphi - umfanekiso : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- imvelaphi - umfanekiso : - o - linear - gradient ( @startColor , @endColor ); // I-Opera 11.10
- imvelaphi - umfanekiso : umgca - igradient ( @startColor , @endColor ); // Umgangatho
- }
- ...
- }
Fumana ubumnandi kwaye wenze izibalo ukwenza imixube ebhetyebhetye kwaye enamandla njengale ingezantsi.
- // Igridi
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Yenza iikholamu ezithile
- . iikholamu ( @columnSpan : 1 ) {
- ububanzi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Emva kokuguqula .less
iifayile kwi /lib/, kuya kufuneka uphinde uzihlanganise kwakhona ukuze uhlaziye ngokutsha i-bootstrap-*.*.*.css kunye ne-bootstrap-*.*.*.min.css iifayile. Ukuba ungenisa isicelo sokutsalwa kwi-GitHub, kufuneka uhlale uphinda uqokelela.
Indlela | Amanyathelo |
---|---|
Indawo enemakefile | Faka umqokeleli welayini yomyalelo omncinci nge-npm ngokusebenzisa lo myalelo ulandelayo: $ npm faka lessc Nje ukuba ifakelwe vele ubaleke Ukongeza, ukuba ufake umlindi , ungabaleka |
Javascript | Khuphela iLess.js yamva nje kwaye uquke indlela eya kuyo (kunye neBootstrap) kwifayile ye
Ukuqokelela kwakhona iifayile ezingaphantsi, zigcine kwaye ulayishe kwakhona iphepha lakho. I-Less.js iyaziqokelela kwaye izigcine kwindawo yokugcina indawo. |
Umgca womyalelo | Ukuba sele unesixhobo somgca womyalelo omncinci esifakiweyo, sebenzisa lo myalelo ulandelayo: $ lessc ./lib/bootstrap.less > bootstrap.css Qinisekisa ukubandakanya |
Usetyenziso oluncinci lweMac | I-app engekho semthethweni ye-Mac ijonga abalawuli beefayile ezingaphantsi. kwaye iqulunqa ikhowudi kwiifayile zendawo emva kokugcinwa kwefayile ebukeleyo. Ukuba uyathanda, ungaguqula okukhethiweyo kwi-app ukuze uzenzele ngokuzenzekelayo kwaye loluphi uvimba weefayili eziqokelelweyo eziphelela kuwo. |