Imizekelo yokuqalisa ngokukhawuleza

Ngaba ufuna iitemplates ezikhawulezayo? Jonga le mizekelo isisiseko siyidibanise:

Igridi ehlala ikho

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.

Umzekelo wophawulo lwegridi

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>

Iikholamu zokuzalela

Nest umxholo wakho ukuba kufuneka ngokwenza .rowngaphakathi koluhlu olukhoyo.

Umzekelo weentsika ezibekwe kwindlwane

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

Roll igridi yakho

Yakhelwe kwiBootstrap zimbalwa zezinto eziguquguqukayo zokwenza ngokwezifiso inkqubo yegridi eyi-940px. Ngokwenza ngokwezifiso kancinci, unokuguqula ubungakanani beekholamu, iigutter zabo, kunye nesitya abahlala kuso.

Ngaphakathi kwigridi

Izinto eziguquguqukayo ezifunekayo ukulungisa inkqubo yegridi ngoku zonke zihlala kwi preboot.less.

Ngoku ukwenza ngokwezifiso

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 oluzinzileyo

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>

Uyilo lolwelo

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>

Izihloko & ikopi

Uluhlu olusemgangathweni lwenkqubo yokuchwetheza yokulungisa amaphepha akho ewebhu.

Iyonke igridi yokuchwetheza isekelwe kwizinto ezimbini eziNcinci kwifayile yethu ye-preboot.less: @basefontkunye @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.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5

h6. Isihloko 6

Umhlathi womzekelo

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.

Umzekelo wesihloko Inesihloko esisezantsi...

NONE izinto

Ukusebenzisa ugxininiso, iidilesi, & nezifinyezo

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

Ukusetyenziswa nini

Iithegi zogxininiso ( <strong>kunye <em>) mazisetyenziswe ukubonisa ukubaluleka okanye ugxininiso lwegama okanye ibinzana elinxulumene nekopi yalo elingqongileyo. Sebenzisa <strong>ngokubaluleka kunye <em>nogxininiso loxinzelelo .

Ugxininiso kwisiqendu

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 into ethe kratya yentsingiselo, yisebenzise). <b>yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo, ngelixa <i>ubukhulu becala iselizwi, amagama obugcisa, njl.

Iidilesi

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.

Ushunqulelo

Ukwenzela izifinyezo kunye nee-akhronimi, sebenzisa i- <abbr>tag ( <acronym>ihoxisiwe kwi- HTML5 ). Beka ifom ye-shorthand ngaphakathi kwethegi kwaye usete isihloko segama elipheleleyo.

Iingcaphuno zebhloko

<blockquote> <p> <small>

Indlela yokucaphula

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>

Ayiodolwanga<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem kunye ne-massa
• I-Facilisis kwi-pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • I-Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• I-Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ayifakwanga isimbo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem kunye ne-massa
• I-Facilisis kwi-pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • I-Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• I-Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Iodolwe<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem kunye ne-massa
4. I-Facilisis kwi-pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. I-Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Inkcazodl

Uluhlu lweenkcazelo

Uluhlu lwenkcazo lufanelekile ukuchaza amagama.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ikhowudi

<code> <pre>

Pimp ikhowudi yakho ngesitayile ngeethegi ezimbini ezilula. Ukonwabela ngakumbi ngejavascript, yehlisa ikhowudi kaGoogle yethala leencwadi kwaye usetiwe.

Ikhowudi yokunikezela

Ikhowudi, iibhloko okanye iziqwengana ezingaphakathi, zinokuboniswa ngesitayile nje ngokusonga kwithegi elungileyo. Kwiibhloko zekhowudi ezithatha imigca emininzi, sebenzisa <pre>isiqalelo. Kwikhowudi engaphakathi, sebenzisa <code>isiqalelo.

<div>
  <h1>Isihloko</h1>
  <p>Into elapha...</p>
</ div>

<div> <h1> Isihloko </h1> <p> Into ethile apha... </p> </div>
  
  

Iileyibhile ezingaphakathi

<span class="label">

Tsalela ingqalelo okanye iflegi naliphi na ibinzana kumbhalo womzimba wakho.

Bhala nantoni na

Ukhe wafuna enye yezo ziNtsha zintle ! okanye Iiflegi ezibalulekileyo xa ubhala ikhowudi? Ewe, ngoku unazo. Nantsi into ebandakanyiweyo ngokungagqibekanga:

Igridi yemidiya

Bonisa i-thumbnails yobukhulu obahlukeneyo kumaphepha anombhalo osezantsi we-HTML kunye nezimbo ezincinci.

Umzekelo we-thumbnails

Ii-Thumbnails kwi- .media-gridinokuba 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 .span6nobukhulu bekholamu.

Enkulu

Phakathi

Incinci

Ukuzikhowuda

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>

Ukwakha iitafile

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

Umzekelo: Izimbo zetafile ehlala ikho

Zonke iitheyibhile ziya kwenziwa ngohlobo oluzenzekelayo kunye nemida ebalulekileyo kuphela ukuqinisekisa ukufundeka kunye nokugcinwa kwesakhiwo. Akukho mfuneko yokongeza iiklasi ezongezelelweyo okanye iimpawu.

<itheyibhile>
  ...
</ table>

Umzekelo: IQwarha linemigca

Fumana ubumnandi obuncinci ngeetafile zakho ngokongeza i-zebra-striping-yongeza nje .zebra-stripediklasi.

Qaphela: IZebra-striping siphuculo esiqhubela phambili asifumanekiyo kwizikhangeli ezindala ezifana ne-IE8 nangaphantsi.

< iklasi yetafile = "i-zebra-striped" > 
...
</ table>

Umzekelo: Zebra-striped w/ TableSorter.js

Ukuthatha umzekelo wangaphambili, siphucula ukusebenziseka kweetafile zethu ngokubonelela ngokusebenza kokuhlelwa ngejQuery kunye ne- Tablesorter plugin. Nqakraza nawuphi na umxholo wekholam ukutshintsha uhlobo.

<script src = "js/jquery/jquery.tablesorter.min.js" > </script> 
<script > 
  $ ( umsebenzi () { 
    $ ( "itafile#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< iklasi yetafile = "i-zebra-striped" > 
  ...
</ table>

Izimbo ezihlala zikhona

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.

Iifom ezipakishiweyo

Yongeza .form-stackedkwi-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.

Ubungakanani bamabala efom

Yenza ngokwezifiso naluphi na uhlobo input, selectokanye textareaububanzi 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.

Amaqhosha

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.

Umzekelo amaqhosha

Izimbo zamaqhosha zinokusetyenziswa kuyo nantoni na .btnesetyenzisiweyo. Ngokwesiqhelo uya kufuna ukusebenzisa ezi kuphela <a>, <button>, kwaye ukhethe <input>izinto. Nantsi indlela ekhangeleka ngayo:

Ubungakanani obunye

Unqwenela amaqhosha amakhulu okanye amancinci? Yiba nayo!

Ilizwe labakhubazekileyo

Kumaqhosha angasebenziyo okanye akhubaziweyo yi-app ngenxa yesizathu esinye okanye esinye, sebenzisa imeko yokukhubazeka. Leyo .disabledyeyamakhonkco kunye :disablednezinto <button>.

Unxulumano

Amaqhosha

Yintoni

Ibar yethu ephezulu yibha esisigxina enelogo yewebhusayithi okanye igama, ukukhangela okuphambili, kunye nefomu yokukhangela.

Customizable

Zonke izinto ezingaphakathi, kunye nebar engaphezulu iyonke ngokunjalo, azikhethele. Unokukhetha ukubandakanya i-logo/igama, i-nav, uphendlo, kunye ne-nav yesibini-okanye nayiphi na indibaniselwano yaloo nto.

Ukwehla kuqukiwe

Njengenxalenye yokukhangela okuphambili, sifake ukukwazi kwakho ukongeza ukwehla kwi-nav yakho. Jonga i-nav yesibini ngasentla (ilungelelaniswe ekunene) ukuze ubone ukuba yenziwa njani. liIithegi zokwehla zikwaxhasa .activeukubonisa ukhetho lwangoku lwephepha.

Iithebhu kunye neepilisi

Yenza ukhangelo olulula lwesibini nge <ul>. Tshintsha phakathi kweethebhu okanye iipilisi ngokudibanisa iklasi efanelekileyo.

Ilungele amacandelwana esiqulatho esifana namaphepha eesethingi zeakhawunti kunye namaxesha omsebenzisi okuguqula phakathi kwamaphepha esiqulatho esifana neso. Ifumaneka kwiindlela zeetab okanye iipilisi.

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi
• Qhagamshelana
• Lahla phantsi
  • Ikhonkco yesibini
  • Enye into apha
  • Enye ikhonkco

<ul iklasi = "iithebhu" > 
  <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
  <li><a href = "#"> Iprofayile </a> </li> 
  <li><a href = "#"> Imiyalezo </a> </li> 
  <li><a href = "#"> Useto </a> </li> 
  <li><a href = "#"> Qhagamshelana </a> </li> 
</ul>

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi
• Qhagamshelana

<ul iklasi = "iipilisi" > 
  <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
  <li><a href = "#"> Iprofayile </a> </li> 
  <li><a href = "#"> Imiyalezo </a> </li> 
  <li><a href = "#"> Useto </a> </li> 
  <li><a href = "#"> Qhagamshelana </a> </li> 
</ul>

Iimvuthuluka zezonka

I-Breadcrumb navigation isetyenziswa njengendlela yokubonisa abasebenzisi apho bangaphakathi kwi-app okanye isayithi, kodwa kungekhona kwi-primary navigation.

• Ekhaya

• Ikhaya /
• Iphepha eliphakathi

• Ikhaya /
• Iphepha eliphakathi /
• Enye kwakhona

• Ikhaya /
• Iphepha eliphakathi /
• Enye into /
• Ulapha

<ul iklasi = "i-breadcrumb" > 
  <li><a href = "#" > Ekhaya </a> <span class = "isahluli" > / </span></li>   
  <li><a href = "#" > Iphepha eliphakathi </a> <span class = "isahluli" > / </span></li>   
  <li><a href = "#" > Enye </a> <span class = "isahluli" > / </span></li>   
  <li iklasi = "esebenzayo" > Ulapha </li> 
</ul>

Ukwenziwa kwePagination

I-Ultra elula kunye ne-styled pagination encinci ephefumlelwe yi-Rdio. Ibhloko enkulu kunzima ukuyiphosa, kulula ukukala, kwaye ibonelela ngeendawo ezinkulu zokucofa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Ngaphambili </a></li>  
    <li iklasi = "esebenzayo" > <a href = "#"> 1 </a></li>  
    <li><a href = "#"> 2 </a> </li> 
    <li><a href = "#"> 3 </a> </li> 
    <li><a href = "#"> 4 </a> </li> 
    <li><a href = "#"> 5 </a> </li> 
    <li iklasi = "elandelayo" ><a href = "#" > Okulandelayo → </a></li>  
  </ul>
</ div>

Izilumkiso ezisisiseko

.alert-message

Imiyalezo yomgca omnye yokuqaqambisa ukusilela, ukusilela okunokwenzeka, okanye impumelelo yesenzo. Iluncedo kakhulu kwiifom.

Fumana i-javascript »

Umzekelo ikhowudi

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

Vimba imiyalezo

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

Fumana i-javascript »

Umzekelo ikhowudi

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

Iimodeli

Iimodals-incoko zababini okanye ii-lightboxes-zilungile kwizenzo zomxholo kwiimeko apho kubalulekile ukuba umxholo ongasemva ugcinwe.

Fumana i-javascript »

Iingcebiso

I-Twipsies iluncedo kakhulu ekuncedeni umsebenzisi obhidekileyo kunye nokubakhomba kwicala elifanelekileyo.

Fumana i-javascript »

Iipopovers

Sebenzisa iipopovers ukunika ulwazi olungaphantsi komxholo kwiphepha ngaphandle kokuchaphazela uyilo.

Fumana i-javascript »

Ndiyaqalisa

Ukudibanisa i-javascript kunye nethala leencwadi le-Bootstrap kulula kakhulu. Ngezantsi sihamba phezu kweziseko kwaye sikubonelele ngeeplagi ezimangalisayo ukuze uqalise!

Jonga i-javascript amaxwebhu »

Yintoni ebandakanyiweyo

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.

Ngaba i-javascript iyimfuneko?

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 .