I-Bootstrap yakhelwe kwiigridi zekholamu ezili-12 eziphendulayo, uyilo, kunye namacandelo.
I-Bootstrap isebenzisa izinto ezithile ze-HTML kunye neempawu zeCSS ezifuna ukusetyenziswa kwe-HTML5 doctype. Yifake ekuqaleni kwazo zonke iiprojekthi zakho.
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
I-Bootstrap iseta umboniso osisiseko wehlabathi jikelele, ukuchwetheza, kunye nezimbo zekhonkco. Ngokukodwa, thina:
margin
emzimbenibackground-color: white;
kwibody
@baseFontFamily
,, @baseFontSize
kunye @baseLineHeight
neempawu njengesiseko sethu sokuchwetheza@linkColor
kwaye usebenzise ikhonkco elikrwelelayo kuphela:hover
Ezi ndlela zinokufumaneka ngaphakathi kwe - scaffolding.less .
NgeBootstrap 2, ibhlokhi endala yokusetha kwakhona iye yalahlwa ngokuthanda i- Normalize.css , iprojekthi kaNicolas Gallagher kunye no- Jonathan Neal ekwanika amandla i- HTML5 Boilerplate . Ngelixa sisebenzisa okuninzi okuQinisekisayo ngaphakathi kwe -reset.less yethu , sisuse ezinye izinto ezikhethekileyo zeBootstrap.
Inkqubo yegridi yeBootstrap engagqibekanga isebenzisa iikholamu ezili -12 , yenzela i-940px isikhongozeli esibanzi ngaphandle kweempawu eziphendulayo ezenziweyo . Ngefayile ye-CSS ephendulayo yongeziweyo, igridi iqhelana ne-724px kunye ne-1170px ububanzi ngokuxhomekeke kwindawo yakho yokujonga. Ngaphantsi kwe-767px yeendawo zokujonga, iikholamu ziba lulwelo kwaye zipakishwe ngokuthe nkqo.
Kuyilo lwekholamu ezimbini ezilula, yenza a .row
kwaye wongeze inani elifanelekileyo .span*
leekholamu. Njengoko oku kuyigridi yekholamu ezili-12, nganye .span*
idlula inani laloo miqolo ili-12, kwaye kufuneka isoloko idibanisa ukuya kutsho ku-12 kumqolo ngamnye (okanye inani leekholamu kumzali).
- <div class = "umqolo" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </ div>
Sinikwe lo mzekelo, sinayo .span4
kwaye .span8
, senze iikholamu ezili-12 zizonke kunye nomqolo opheleleyo.
Hambisa iikholamu ekunene usebenzisa .offset*
iiklasi. Iklasi nganye yongeza umda wasekhohlo wekholamu ngekholamu epheleleyo. Umzekelo, .offset4
uhamba .span4
ngaphaya kweekholamu ezine.
- <div class = "umqolo" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </ div>
Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .row
kunye neseti .span*
yeekholamu ngaphakathi koluhlu olukhoyo .span*
. Imiqolo ebekwe kwindlwane kufuneka ibandakanye uluhlu lwemiqolo edibanisa inani leekholamu zomzali wayo.
- <div class = "umqolo" >
- <div class = "span9" >
- Inqanaba loku-1 ikholamu
- <div class = "umqolo" >
- <div class = "span6" > Inqanaba lesi-2 </div>
- <div class = "span3" > Inqanaba lesi-2 </div>
- </ div>
- </ div>
- </ div>
Inkqubo yegridi yolwelo isebenzisa iipesenti endaweni yeepikseli kububanzi bekholamu. Inamandla okuphendula afanayo njengenkqubo yethu yegridi esisigxina, iqinisekisa ubungakanani obufanelekileyo bezisombululo eziphambili zesikrini kunye nezixhobo.
Yenza nawuphi na umqolo "ulwelo" ngokutshintshela .row
ku- .row-fluid
. Iiklasi zekholomu zihlala zifana ngokuchanekileyo, okwenza kube lula ukuzulazula phakathi kweegridi ezisisigxina kunye nezamanzi.
- <div class = "Row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </ div>
Isebenza ngendlela efanayo nesixokelelwano sothungelwano lwegridi esisigxina: yongeza .offset*
nakweyiphi na ikholamu ukulungisa loo miqolo mininzi.
- <div class = "Row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </ div>
Iigridi zolwelo zisebenzisa indlwane ngokwahlukileyo: umgangatho ngamnye wendlwane kufuneka udibanise ukuya kutsho kwiikholamu ezili-12. Oku kungenxa yokuba igridi yolwelo isebenzisa iipesenti, hayi ipixels, ukuseta ububanzi.
- <div class = "Row-fluid" >
- <div class = "span12" >
- Ulwelo 12
- <div class = "Row-fluid" >
- <div class = "span6" >
- Ulwelo 6
- <div class = "Row-fluid" >
- <div class = "span6" > Fluid 6 </div>
- <div class = "span6" > Fluid 6 </div>
- </ div>
- </ div>
- <div class = "span6" > Fluid 6 </div>
- </ div>
- </ div>
- </ div>
Ibonelela ngobubanzi obusisigxina obuqhelekileyo (kunye nokhetho lokuphendula) <div class="container">
olufunekayo kuphela.
- <umzimba>
- <div class = "container" >
- ...
- </ div>
- </ umzimba>
Yenza ulwelo, iphepha <div class="container-fluid">
elinezikholamu ezimbini nge-elungele usetyenziso kunye namaxwebhu.
- <div class = "container-fluid" >
- <div class = "Row-fluid" >
- <div class = "span2" >
- <!--Umxholo wesixwexwe esisecaleni-->
- </ div>
- <div class = "span10" >
- <!--Umxholo womzimba-->
- </ div>
- </ div>
- </ div>
Vula i-CSS ephendulayo kwiprojekthi yakho ngokubandakanya i-meta tag efanelekileyo kunye necwecwe lesimbo elongezelelweyo ngaphakathi <head>
koxwebhu lwakho. Ukuba uqokelele i-Bootstrap kwiphepha le-Lungisa, kufuneka ubandakanye kuphela i-meta tag.
- <meta name = "viewport" content = "width=device-width, first-scale=1.0" >
- <link href = "impahla/css/bootstrap-responsive.css" rel = "icwecwe lesimbo" >
Iintloko phezulu!I-Bootstrap ayibandakanyi iimpawu eziphendulayo ngokuzenzekela ngeli xesha njengoko ingeyiyo yonke into ekufuneka iphendule. Endaweni yokukhuthaza abaphuhlisi ukuba balisuse eli nqaku, sibona ukuba kungcono ukulenza njengoko lifuneka.
Imibuzo yemidiya ivumela i-CSS yesiko ngokusekelwe kwinani leemeko-imilinganiselo, ububanzi, uhlobo lokubonisa, njl njl-kodwa ngokuqhelekileyo kugxininise min-width
kwaye max-width
.
Sebenzisa imibuzo yemidiya ngentembeko kwaye kuphela njengesiqalo kubaphulaphuli bakho beselula. Kwiiprojekthi ezinkulu, qwalasela iziseko zekhowudi ezinikezelweyo kwaye hayi iileya zemibuzo yemidiya.
I-Bootstrap ixhasa iqela lemibuzo yemidiya kwifayile enye ukunceda ukwenza iiprojekthi zakho zifaneleke ngakumbi kwizixhobo ezahlukeneyo kunye nezisombululo zesikrini. Nantsi into ebandakanyiweyo:
Ileyibhile | Ububanzi bobeko | Ububanzi bekholamu | Ububanzi bomsele |
---|---|---|---|
Umboniso omkhulu | 1200px nangaphezulu | 70px | 30px |
Ukuhlala kukho | 980px kwaye phezulu | 60px | 20px |
Portrait tablets | 768px nangaphezulu | 42px | 20px |
Iifowuni kwiitafile | 767px nangaphantsi | Fluid columns, no fixed widths | |
Phones | 480px and below | Fluid columns, no fixed widths |
- /* Large desktop */
- @media (min-width: 1200px) { ... }
- /* Portrait tablet to landscape and desktop */
- @media (min-width: 768px) and (max-width: 979px) { ... }
- /* Landscape phone to portrait tablet */
- @media (max-width: 767px) { ... }
- /* Landscape phones and down */
- @media (max-width: 480px) { ... }
For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less
.
Class | Phones 767px and below | Tablets 979px to 768px | Desktops Default |
---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
Yenza ubungakanani kwakhona kwisikhangeli sakho okanye ulayishe kwizixhobo ezahlukeneyo ukuvavanya ezi klasi zingentla.
Iimpawu eziluhlaza zibonisa ukuba iklasi iyabonakala kwindawo yakho yokujonga yangoku.
Apha, amanqaku okukhangela aluhlaza abonisa ukuba udidi lufihliwe kwindawo yakho yokujonga yangoku.