I-Etiam porta sem malesuada magna mollis euismod. I-Maecenas faucibus mollis interdum. I-Morbi leo risus, i-porta ac consectetur ac, i-vestibulum ne-eros.
I-Bootstrap iyikhithi yamathuluzi evela ku-Twitter eklanyelwe ukuqala ukuthuthukiswa kwezinhlelo zokusebenza zewebhu namasayithi.
Ihlanganisa isisekelo se-CSS ne-HTML ye-typography, amafomu, izinkinobho, amatafula, amagridi, ukuzulazula, nokuningi.
Isexwayiso se- Nerd: I-Bootstrap yakhiwe nge-Less futhi yakhelwe ukusebenza ngaphandle kwesango kucatshangwa ngeziphequluli zesimanje.
Ukuze uthole isiqalo esisheshayo nesilula, vele ukopishe la mazwibela ekhasini lakho lewebhu.
Umlandeli wokusebenzisa Okuncane? Akunankinga, vele uhlanganise i-repo bese wengeza le migqa:
Landa, imfoloko, donsa, izinkinga zefayela, nokuningi nge-Bootstrap repo esemthethweni ku-Github.
Ezinsukwini zangaphambili ze-Twitter, onjiniyela basebenzisa cishe noma yimuphi umtapo wezincwadi ababejwayele ukuhlangabezana nezidingo zangaphambili. I-Bootstrap yaqala njengempendulo ezinseleleni ezethulwa kanye nentuthuko eshesha ngokushesha phakathi ne-Hackweek yokuqala ye-Twitter.
Ngosizo nempendulo yonjiniyela abaningi ku-Twitter, i-Bootstrap ikhule ngokuphawulekayo ukuze ihlanganise hhayi izitayela eziyisisekelo kuphela, kodwa amaphethini edizayini aphambili futhi ahlala isikhathi eside.
Funda kabanzi ku-dev.twitter.com ›
I-Bootstrap ihlolwe futhi isekelwa kuziphequluli ezinkulu zesimanje njenge-Chrome, Safari, Internet Explorer, neFirefox.
I-Bootstrap iza iphelele ne-CSS ehlanganisiwe, engahlanganisiwe, nezifanekiso eziyisibonelo.
Isistimu yegridi ezenzakalelayo enikeziwe njengengxenye ye-Bootstrap iyigridi yamakholomu angu-16 ebanzi engu-940px. Ukunambitheka kwesistimu yegridi engu-960 edumile, kodwa ngaphandle kwemajini engeziwe/i-padding kwesokunxele nakwesokudla.
Njengoba kuboniswe lapha, ukwakheka okuyisisekelo kungadalwa “ngamakholomu” amabili, ngalinye lihlanganisa inombolo yamakholomu ayisisekelo angu-16 esiwachaze njengengxenye yesistimu yethu yegridi. Bheka izibonelo ngezansi ukuze uthole ukuhluka okwengeziwe.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Isakhiwo esimisiwe nesilula esibanzi esingu-940px-wide, esimaphakathi sanoma iyiphi iwebhusayithi noma ikhasi elihlinzekwe ngomunye <div.container>
.
- <umzimba>
- <div class = "container" >
- ...
- </div>
- </umzimba>
Okunye, ukwakheka kwekhasi elishintshashintshayo elinobubanzi obuncane kanye nobukhulu obukhulu kanye nebha eseceleni engakwesokunxele. Ilungele izinhlelo zokusebenza namadokhumenti.
- <umzimba>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "okuqukethwe" >
- ...
- </div>
- </div>
- </umzimba>
Uhlelo olujwayelekile lwe-typographic lokuhlela amakhasi akho ewebhu.
Yonke igridi yokubhala isekelwe eziguquguqukayo ezimbili Ezincane kufayela lethu elithi preboot.less: @basefont
kanye @baseline
. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo.
Sisebenzisa lezo ziguquguqukayo, kanye nezibalo ezithile, ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye.
I-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.
Kusetshenziswa ukugcizelela, amakheli, nezifinyezo
<strong>
<em>
<address>
<abbr>
Amathegi okugcizelela ( <strong>
kanye <em>
) kufanele asetshenziselwe ukukhombisa ukubaluleka okwengeziwe noma ukugcizelela kwegama noma ibinzana elihlobene nekhophi elizungezile. Sebenzisa <strong>
ngokubaluleka nokugcizelela ingcindezi<em>
.
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. I-Maecenas faucibus mollis interdum. I-Nulla vitae elit libero, i-pharetra augue.
Qaphela: Kusalungile ukusebenzisa <b>
kanye <i>
namathegi ku-HTML5 futhi akudingekile ukuthi babhalwe ngokugqamile noma kube yi-ithalikhi, ngokulandelana (yize uma kukhona ingxenye ye-semantic eyengeziwe, isebenzise). <b>
ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe, kuyilapho <i>
ikakhulukazi eyezwi, amagama obuchwepheshe, njll.
Isici <address>
sisetshenziselwa ulwazi lokuxhumana lukakhokho walo oseduze, noma wonke umsebenzi. Nansi indlela ebukeka ngayo:
Qaphela: Umugqa ngamunye <address>
kufanele uphethe ngokunqanyulwa komugqa ( <br />
) noma usongwe ngomaka weleveli yebhulokhi (isb, <p>
) ukuze uhlele kahle okuqukethwe.
Ukuze uthole izifinyezo nama-akhronimi, sebenzisa <abbr>
ithegi ( <acronym>
yehlisiwe ku- HTML5 ). Faka ifomu elifushane phakathi kwethegi bese usetha isihloko segama eliphelele.
<blockquote>
<p>
<small>
Ukuze ufake i-blockquote, zisonga <blockquote>
bese <p>
umaka <small>
. Sebenzisa <small>
isici ukucaphuna umthombo wakho futhi uzothola ideshi em —
ngaphambi kwawo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis dapibus posuere velit aliquet.
UDkt Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Amathebula mahle—ngezinto eziningi. Amathebula amahle, nokho, adinga uthando lwemakhaphu ukuze abe wusizo, akhule, futhi afundeke (ezingeni lekhodi). Nawa amathiphu ambalwa okusiza.
Ngaso sonke isikhathi bopha izihloko zekholomu yakho ngendlela <thead>
yokuthi ukulandelana kube <thead>
> <tr>
> <th>
.
Ngokufanayo nezihloko zekholomu, konke okuqukethwe komzimba wethebula lakho kufanele kusongwe ngokuthi ukulandelana <tbody>
kwakho kube <tbody>
> <tr>
> <td>
.
Wonke amathebula azohlelwa ngokuzenzakalelayo abe nemingcele ebalulekile kuphela ukuze kuqinisekiswe ukufundeka nokugcina ukwakheka. Asikho isidingo sokungeza amakilasi engeziwe noma izibaluli.
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Abanye | Eyodwa | IsiNgisi |
2 | UJoe | Okuhamba ngasithupha | IsiNgisi |
3 | Stu | I-Dent | Ikhodi |
- <ithebula>
- ...
- </ithebula>
Thola okumnandi ngamatafula akho ngokungeza idube-striping—vele wengeze .zebra-striped
ikilasi.
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Abanye | Eyodwa | IsiNgisi |
2 | UJoe | Okuhamba ngasithupha | IsiNgisi |
3 | Stu | I-Dent | Ikhodi |
Qaphela: I-Zebra-striping iyisithuthukisi esiqhubekayo esingatholakali kuziphequluli ezindala njenge-IE8 nangaphansi.
- <table class = "zebra-striped" >
- ...
- </ithebula>
Ngokuthatha isibonelo sangaphambilini, sithuthukisa ukusebenza kwamathebula ethu ngokuhlinzeka ngokusebenza kokuhlunga nge - jQuery kanye ne-plugin ye- Tablesorter . Chofoza unhlokweni wanoma isiphi ikholomu ukuze ushintshe ukuhlunga.
# | Igama | Isibongo | Ulimi |
---|---|---|---|
1 | Eyakho | Eyodwa | IsiNgisi |
2 | UJoe | Okuhamba ngasithupha | IsiNgisi |
3 | Stu | I-Dent | Ikhodi |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( umsebenzi () {
- $ ( "ithebula#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </ithebula>
Wonke amafomu anikezwa izitayela ezizenzakalelayo ukuze awethule ngendlela efundekayo nengakala. Izitayela zinikezwa okokufaka kombhalo, khetha izinhlu, izindawo zombhalo, izinkinobho zomsakazo namabhokisi okuhlola, nezinkinobho.
Engeza .form-stacked
ku-HTML yefomu lakho futhi uzoba namalebula ngaphezulu kwezinkambu zawo esikhundleni sakwesokunxele. Lokhu kusebenza kahle uma amafomu akho emafushane noma unamakholomu amabili okokufaka kumafomu asinda kakhulu.
Njengomthetho, izinkinobho zisetshenziselwa izenzo kuyilapho izixhumanisi zisetshenziselwa izinto. Isibonelo, "Landa" kungaba inkinobho futhi "umsebenzi wakamuva" kungaba isixhumanisi.
Zonke izinkinobho zizenzakalela zesitayela esimpunga ngokukhanyayo, kodwa inani lamakilasi okusebenza angasetshenziswa kuzitayela ezihlukene zemibala. Lawa makilasi ahlanganisa ikilasi eliluhlaza okwesibhakabhaka .primary
, ikilasi eliluhlaza okwesibhakabhaka .info
, eliluhlaza okotshani .success
, kanye nekilasi elibomvu .danger
. Futhi, ukugoqa izitayela zakho kulula peasy.
Izitayela zezinkinobho zingasetshenziswa kunoma yini .btn
esetshenzisiwe. Ngokuvamile uzofuna ukusebenzisa lezi kokuthi kuphela <a>
, <button>
, bese ukhetha <input>
izici. Nansi indlela ebukeka ngayo:
Uyathanda izinkinobho ezinkulu noma ezincane? Yiba nakho!
Ngezinkinobho ezingasebenzi noma ezikhutshazwe uhlelo lokusebenza ngesizathu esisodwa noma esinye, sebenzisa isimo sokukhubazeka. Lokho okwezixhumanisi .disabled
kanye nezakhi.:disabled
<button>
div.alert-message
Imilayezo yomugqa owodwa yokugqamisa ukwehluleka, ukwehluleka okungenzeka, noma impumelelo yesenzo. Iwusizo kakhulu kumafomu.
div.alert-message.block-message
Emilayezweni edinga incazelo kancane, sinezixwayiso zesitayela sendima. Lokhu kulungele ukugcwalisa imilayezo yamaphutha amade, ukuxwayisa umsebenzisi ngesenzo esilindile, noma ukwethula ulwazi ukuze kugcizelelwe kakhulu ekhasini.
Ama-modal—izingxoxo noma ama-lightboxes—alungele izenzo zomongo ezimeni lapho kubalulekile ukuthi umongo wangemuva ugcinwe.
Umzimba owodwa omuhle…
Ama-Twipsies awusizo kakhulu ekusizeni umsebenzisi odidekile futhi amkhombise indlela efanele.
Lorem ipsum dolar sit amet 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. I- Voluptasdicta eaque beatae aperiam ut enim voluptate im explicabo explicabo, voluptas quia odit fugit accusantium totam totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaumtamtamgit accusate accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaumtamtamgit accusup accusantium accusantium totam totam fugit fugit
Sebenzisa ama-popover ukuze unikeze ulwazi lombhalo ongaphansi ekhasini ngaphandle kokuthinta isakhiwo.
I-Etiam porta sem malesuada magna mollis euismod. I-Maecenas faucibus mollis interdum. I-Morbi leo risus, i-porta ac consectetur ac, i-vestibulum ne-eros.
I-Bootstrap yakhiwe nge- Preboot , iphekhi yomthombo ovulekile wamamiksi nokuguquguquka okufanele kusetshenziswe ngokuhambisana Nokuncane , i-preprocessor ye-CSS yokuthuthukiswa kwewebhu okusheshayo nokulula.
Bheka ukuthi sisebenzise kanjani i-Preboot ku-Bootstrap nokuthi ungayisebenzisa kanjani uma ukhetha ukusebenzisa Okuncane kuphrojekthi yakho elandelayo.
Sebenzisa le nketho ukuze usebenzise ngokugcwele okuguquguqukayo Okuncane kwe-Bootstrap, imiksi, nokuzalela ku-CSS usebenzisa i-javascript esipheqululini sakho.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "konke" />
- <script src = "js/less-1.1.3.min.js" ></script>
Awusizwa isixazululo se-.js? Zama uhlelo lokusebenza lwe-Less Mac noma usebenzise i-Node.js ukuze uhlanganise lapho usebenzisa ikhodi yakho.
Nazi ezinye zezinto ezivelele ezifakwe ku-Twitter Bootstrap njengengxenye ye-Bootstrap. Yiya kuwebhusayithi ye-Bootstrap noma ikhasi lephrojekthi ye-Github ukuze ulande futhi ufunde kabanzi.
Okuguquguqukayo kokuthi Okuncane kulungile ekugcineni nokubuyekeza ikhanda lakho le-CSS mahhala. Uma ufuna ukushintsha inani lombala noma inani elisetshenziswa njalo, libuyekeze endaweni eyodwa bese usumisiwe.
- // Izixhumanisi
- @linkColor : #8b59c2;
- @linkColorHover : mnyama ( @linkColor , 10 );
- // Izimpunga
- @omnyama : #000;
- @grayDark : khanyisa ( @black , 25 %);
- @grey : khanyisa ( @black , 50 %);
- @grayLight : khanyisa ( @black , 70 %);
- @grayLighter : khanyisa ( @black , 90 %);
- @mhlophe : #fff;
- // Imibala Ye-Accent
- @blue : #08b5fb;
- @green : #46a546;
- @bomvu : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pinki : #c3325f;
- @purple : #7a43b6;
- // Igridi yesisekelo
- @basefont : 13px ;
- @isisekelo : 18px ;
Okuncane futhi kuhlinzeka ngesinye isitayela sokubeka amazwana ngaphezu kwe- /* ... */
syntax evamile ye-CSS.
- // Lokhu ukuphawula
- /* Lokhu futhi ukuphawula */
Imiksi ngokuyisisekelo ihlanganisa noma izingxenye ze-CSS, okukuvumela ukuthi uhlanganise ibhulokhi yekhodi ibe yinto eyodwa. Zilungele izakhiwo eziqalwe ngumthengisi njenge- box-shadow
, ama-gradient esipheqululini esiphambanayo, izitaki zefonti, nokuningi. Ngezansi isampula yamamiksi afakwe ne-Bootstrap.
- #ifonti {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- usayizi wefonti : @size ; _
- ifonti - isisindo : @weight ;
- umugqa - ubude : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ifonti - umndeni : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- usayizi wefonti : @size ; _
- ifonti - isisindo : @weight ;
- umugqa - ubude : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ifonti - umndeni : "Georgia" , Times New Roman , Times , sans - serif ;
- usayizi wefonti : @size ; _
- ifonti - isisindo : @weight ;
- umugqa - ubude : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- ifonti - umndeni : "Monaco" , Courier New , monospace ;
- usayizi wefonti : @size ; _
- ifonti - isisindo : @weight ;
- umugqa - ubude : @lineHeight ;
- }
- }
- #igradient {
- . ovundlile ( @startColor : #555, @endColor: #333) {
- ingemuva - umbala : @endColor ;
- ingemuva - phinda : phinda - x ;
- ingemuva - isithombe : - khtml - i- gradient ( umugqa , phezulu kwesokunxele , phezulu kwesokudla , ukusuka ( @startColor ), kuya ku ( @endColor )); // Konqueror
- ingemuva - isithombe : - moz - linear - gradient ( kwesokunxele , @startColor , @endColor ); // FF 3.6+
- ingemuva - isithombe : - ms - linear - gradient ( kwesokunxele , @startColor , @endColor ); // IE10
- ingemuva - isithombe : - webkit - i- gradient ( umugqa , phezulu kwesokunxele , phezulu kwesokudla , umbala - ima ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ingemuva - isithombe : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ingemuva - isithombe : - o - linear - gradient ( kwesokunxele , @startColor , @endColor ); // I-Opera 11.10
- ingemuva - isithombe : umugqa - i- gradient ( kwesobunxele , @startColor , @endColor ); // Le standard
- }
- . mpo ( @startColor : #555, @endColor: #333) {
- ingemuva - umbala : @endColor ;
- ingemuva - phinda : phinda - x ;
- ingemuva - isithombe : - khtml - i- gradient ( umugqa , phezulu kwesokunxele , phansi kwesokunxele , ukusuka ( @startColor ), kuya ku ( @endColor )); // Konqueror
- ingemuva - isithombe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- ingemuva - isithombe : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- ingemuva - isithombe : - webkit - gradient ( umugqa , phezulu kwesokunxele , phansi kwesokunxele , umbala - ima ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ingemuva - isithombe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ingemuva - isithombe : - o - linear - gradient ( @startColor , @endColor ); // I-Opera 11.10
- ingemuva - isithombe : umugqa - i- gradient ( @startColor , @endColor ); // Izinga
- }
- . isiqondiso ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . mpo - emithathu - imibala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Zijabulise futhi wenze izibalo ukuze ukhiqize izingxube eziguquguqukayo nezinamandla njengale engezansi.
- // Igridi
- @gridIkholomu : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Igridi System
- . isitsha {
- ububanzi : @siteWidth ;
- umkhawulo : 0 auto ;
- . clearfix ();
- }
- . amakholomu ( @columnSpan : 1 ) {
- ububanzi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- imajini - kwesokunxele : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }