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 kuphela 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.
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="row">
- <div class = "span6 columns" >
- ...
- </ div>
- <div class = "span10 columns" >
- ...
- </ div>
- </ div>
Isiseko se-940px esibanzi, esisembindini uyilo lwesikhongozeli malunga nayo nayiphi na indawo okanye iphepha.
- <umzimba>
- <div class = "container" >
- ...
- </ div>
- </ umzimba>
I-flexible fluid okanye i-liquid page structure kunye ne-min- kunye ne-max-widths kunye nebar yecala lasekhohlo. Ilungele usetyenziso.
- <umzimba>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </ div>
- <div class = "umxholo" >
- ...
- </ div>
- </ div>
- </ umzimba>
Uluhlu olusemgangathweni lwenkqubo yokuchwetheza yokulungisa amaphepha akho ewebhu.
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.
Unokongeza izihlokwana kunye <strong>
ne<em>
Ukusebenzisa ugxininiso, iidilesi, & nezifinyezo
<strong>
<em>
<address>
<abbr>
Iithegi zogxininiso ( <strong>
kunye <em>
) mazisetyenziswe ukongeza umahluko obonakalayo phakathi kwegama okanye ibinzana kunye nekopi yalo eyingqongileyo. Sebenzisa <strong>
kuqwalaselo oludala olucacileyo kunye noqwalaselo olutyibilikayo<em>
kunye nezihloko.
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.
address
Isiqalelo sisetyenziselwa-uqikelele ukuba!—iidilesi . Nantsi indlela ekhangeleka ngayo:
Qaphela: Umgca ngamnye kumgca address
kufuneka uphele ngokuqhawula umgca ( <br />
) ukulungisa ngokufanelekileyo umxholo njengoko ufundwa kubomi benene ngaphandle kwezimbo ezisetyenziswayo.
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>
<cite>
Qiniseka ukuba uzisongele blockquote
ngeenxa zonke paragraph
kunye cite
neethegi. Xa ukhankanya umthombo, sebenzisa cite
isiqalelo. I-CSS iya kwandulela ngokuzenzekelayo igama nge-em dash (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
UGqr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<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 |
- <itafile yetafile="itafile eqhelekileyo"> iklasi = "itafile eqhelekileyo" >
- ...
- </ 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 |
- <table class="common-table zebra-striped"> class = "common-table 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 |
---|---|---|---|
1 | Eyakho | Nye | IsiNgesi |
2 | UJoe | Iiphekhi ezintandathu | IsiNgesi |
3 | Stu | Isibonda | Ikhowudi |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- < uhlobo lombhalo = "umbhalo/javascript" >
- $ ( uxwebhu ). lungile ( umsebenzi () {
- $ ( "itafile#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- < iklasi yetafile = "i-zebra-striped yetafile eqhelekileyo" >
- ...
- </ 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.
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 udidi oluluhlaza .primary
luyafumaneka. Kwaye, ukuqengqeleka izitayile zakho kulula peasy.
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
.
Imiyalezo yomgca omnye yokuqaqambisa ukusilela, ukusilela okunokwenzeka, okanye impumelelo yesenzo. Iluncedo kakhulu kwiifom.
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.
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 kwiphepha ngaphandle kokwenza ubeko.
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 yakhiwe nge- Preboot , ipakethe yomthombo ovulekileyo wemixube kunye nezinto eziguquguqukayo eziza kusetyenziswa ngokubambisana noNcinci , i-CSS yangaphambili yokuphuhliswa kwewebhu ngokukhawuleza kwaye kulula.
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.
- <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="konke" /> rel = "icwecwe lesimbo / ngaphantsi" uhlobo = "umbhalo/css" href = "ngaphantsi/bootstrap.less" media = "konke" />
- <script type = "text/javascript" src = "js/less-1.0.41.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;
- // Isiseko
- @baseline : 20px ;
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 ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - usapho : "Georgia" , Times New Roman , Times , sans - serif ;
- ifonti - ubungakanani : @ubungakanani ;
- ifonti - ubunzima : @weight ;
- umgca - ubude : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - usapho : "Monaco" , Courier New , monospace ;
- ifonti - ubungakanani : @ubungakanani ;
- ifonti - ubunzima : @weight ;
- umgca - ubude : @lineHeight ;
- }
- }
- #igradient {
- . oxwesileyo ( @startColor : #555, @endColor: #333) {
- imvelaphi - umbala : @endColor ;
- imvelaphi - phinda : phinda - x ;
- imvelaphi - umfanekiso : - khtml - igradient ( linear , ekhohlo phezulu , ekunene phezulu , ukusuka ( @startColor ), ukuya ( @ endColor )); // Konqueror
- imvelaphi - umfanekiso : - moz - linear - gradient ( ekhohlo , @startColor , @endColor ); // FF 3.6+
- imvelaphi - umfanekiso : - ms - linear - gradient ( ekhohlo , @startColor , @endColor ); // IE10
- imvelaphi - umfanekiso : - webkit - igradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- imvelaphi - umfanekiso : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- imvelaphi - umfanekiso : - o - linear - gradient ( ekhohlo , @startColor , @endColor ); // I-Opera 11.10
- - ms - isihluzo : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- isihluzi : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- imvelaphi - umfanekiso : linear - gradient ( ekhohlo , @startColor , @endColor ); // Le umgangatho
- }
- . 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
- - ms - isihluzo : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- isihluzi : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- imvelaphi - umfanekiso : umgca - igradient ( @startColor , @endColor ); // Umgangatho
- }
- . icala ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . nkqo - emithathu - imibala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Fumana ubumnandi kwaye wenze izibalo ukwenza imixube ebhetyebhetye kwaye enamandla njengale ingezantsi.
- // Igridi
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Inkqubo yegridi
- . isikhongozeli {
- ububanzi : @siteWidth ;
- umda : 0 auto ;
- . clearfix ();
- }
- . iikholamu ( @columnSpan : 1 ) {
- bonisa : ngaphakathi ;
- dada : ekhohlo ;
- ububanzi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- umda - wasekhohlo : @gridGutterWidth ;
- & : umntwana wokuqala {
- umda - ekhohlo : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- umda - wasekhohlo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! kubalulekile ;
- }