Bootstrap

Scafall

Tá Bootstrap bunaithe ar ghreillí sofhreagracha 12-cholún, leagan amach agus comhpháirteanna.

Cinnirí suas! Tá na doiciméid seo do v2.3.2, nach bhfuil tacaíocht oifigiúil a thuilleadh. Amharc ar an leagan is déanaí de Bootstrap!

Socruithe domhanda

Teastaíonn doctype HTML5

Úsáideann Bootstrap gnéithe áirithe HTML agus airíonna CSS a éilíonn úsáid an doctype HTML5. Cuir san áireamh é ag tús do thionscadail ar fad.

  1. <!DOCTYPE html>
  2. <html lang = "ga" > 
  3.   ...
  4. </html>

Clóghrafaíocht agus naisc....

Socraíonn Bootstrap bunstíleanna taispeána domhanda, clóghrafaíochta agus naisc. Go sonrach, táimid:

  • Bain marginar an gcomhlacht
  • Socraigh background-color: white;ar anbody
  • Bain úsáid as an @baseFontFamily, @baseFontSize, agus @baseLineHeighttréithe mar ár mbonn clóghrafach
  • Socraigh dath an naisc dhomhanda tríd @linkColoragus cuir i bhfeidhm na folínte naisc amháin:hover

Is féidir na stíleanna seo a fháil laistigh de scaffolding.less .

Athshocraigh trí Normalú

Le Bootstrap 2, tá an seanbhloc athshocraithe tite i bhfabhar Normalize.css , tionscadal le Nicolas Gallagher agus Jonathan Neal a chumhachtaíonn an Boilerplate HTML5 freisin . Cé go n-úsáideann muid go leor de Normalú laistigh dár reset.less , ní mór dúinn a bhaint roinnt gnéithe go sonrach le haghaidh Bootstrap.

Córas greille réamhshocraithe

Sampla greille beo

Úsáideann an córas greille Bootstrap réamhshocraithe 12 cholún , rud a fhágann go mbeidh coimeádán 940px ar leithead gan gnéithe sofhreagracha cumasaithe. Agus an comhad CSS sofhreagrach curtha leis, déanann an eangach oiriúnú le bheith 724px agus 1170px ar leithead ag brath ar do radharc. Faoi bhun amhairc 767px, éiríonn na colúin sreabhach agus cruachta go hingearach.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML greille bunúsach

Chun leagan amach simplí dhá cholún a chruthú, cruthaigh .rowagus cuir an líon cuí .span*colún leis. Toisc gur eangach 12 cholún é seo, .span*trasnaíonn gach ceann acu líon den 12 cholún sin, agus ba cheart go mbeadh suas le 12 i ngach ró (nó líon na gcolún sa tuismitheoir) i gcónaí.

  1. <div rang = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Mar gheall ar an sampla seo, ní mór dúinn .span4agus .span8, ag déanamh do 12 colún iomlán agus as a chéile iomlán.

Colúin fhritháireamh

Bog na colúin ar dheis ag úsáid .offset*ranganna. Méadaíonn gach rang imeall clé colúin trí cholún iomlán. Mar shampla, .offset4bogann sé .span4thar cheithre cholún.

4
3 fritháireamh 2
3 fritháireamh 1
3 fritháireamh 2
6 fritháireamh 3 
  1. <div rang = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Colúin neadaithe

Chun d'ábhar a neadú leis an eangach réamhshocraithe, cuir sraith nua .rowagus sraith .span*colún laistigh de .span*cholún atá ann cheana féin. Ba cheart go gcuimseodh sraitheanna neadaithe sraith colún a chuireann suas le líon colún a tuismitheora.

Colún Leibhéal 1
Leibhéal 2
Leibhéal 2 
  1. <div rang = "row" > 
  2.   <div class = "span9" > 
  3.     Colún Leibhéal 1
  4.     <div rang = "row" > 
  5.       <div class = "span6" > Leibhéal 2 </div> 
  6.       <div class = "span3" > Leibhéal 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Córas greille sreabhach

Sampla beo greille sreabhán

Úsáideann an córas greille sreabhán céatadáin in ionad picteilín le haghaidh leithid na gcolún. Tá na cumais fhreagracha céanna aige agus atá ár gcóras eangaí seasta, ag cinntiú comhréireanna cuí le haghaidh rúin agus feistí eochairscáileáin.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bunúsach greille sreabhach HTML

Déan "sreabhach" ar bith trí athrú .rowgo .row-fluid. Fanann na ranganna colún mar a chéile, rud a fhágann go bhfuil sé éasca smeach idir ghreillí seasta agus sreabhán.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Fritháireamh sreabhach

Feidhmíonn sé ar an mbealach céanna leis an gcóras greille seasta fhritháireamh: cuir .offset*le haon cholún a fhritháireamh ag go leor colúin.

4
4 fritháireamh 4
3 fritháireamh 3
3 fritháireamh 3
6 fritháireamh 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Sreabhán neadaithe

Úsáideann greillí sreabhán go héagsúil le neadú: ba chóir go mbeadh suas le 12 cholún i ngach leibhéal neadaithe. Tá sé seo amhlaidh toisc go n-úsáideann an eangach sreabhán céatadáin, ní picteilíní, chun leithid a shocrú.

Sreabhán 12
Sreabhán 6
Sreabhán 6
Sreabhán 6
Sreabhán 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Sreabhán 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Sreabhán 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Sreabhán 6 </div> 
  9.           <div class = "span6" > Sreabhán 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Sreabhán 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Leaganacha

Leagan amach seasta

Soláthraíonn sé leagan amach coiteann leithead seasta (agus freagrúil go roghnach) gan ach <div class="container">ag teastáil.

  1. <comhlacht>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </corp>

Leagan amach sreabhach

Cruthaigh leathanach sreabhán, dhá cholún le <div class="container-fluid">— iontach d'fheidhmchláir agus do dhoiciméid.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!-- Ábhar an bharra taoibh-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!-- Ábhar an chomhlachta-->
  8.     </div>
  9.   </div>
  10. </div>

Dearadh sofhreagrach

Gnéithe sofhreagracha a chumasú

Cuir CSS sofhreagrach ar siúl i do thionscadal tríd an meitea-chlib cheart agus an stílbhileog bhreise a chur san áireamh laistigh <head>de do dhoiciméad. Má tá Bootstrap tiomsaithe agat ón leathanach Saincheap, ní gá duit ach an meitea-chlib a chur san áireamh.

  1. <meta name = "viewport" content = "leithead=leithead an fheiste, scála tosaigh=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stílbhileog" >

Cinnirí suas!Ní chuimsíonn Bootstrap gnéithe sofhreagracha de réir réamhshocraithe faoi láthair mar ní gá go mbeadh gach rud sofhreagrach. In ionad forbróirí a spreagadh chun an ghné seo a bhaint, is fearr é a chumasú mar is gá.

Maidir Bootstrap sofhreagrach

Feistí sofhreagracha

Ceadaíonn fiosruithe ó na meáin CSS saincheaptha bunaithe ar roinnt coinníollacha - cóimheasa, leithid, cineál taispeána, srl - ach de ghnáth díríonn siad timpeall min-widthagus max-width.

  • Athraigh leithead an cholúin inár ngreille
  • Stack eilimintí in ionad snámhphointe nuair is gá
  • Athraigh méid na gceannteidil agus an téacs le bheith níos oiriúnaí do ghléasanna

Bain úsáid as fiosrúcháin ó na meáin go freagrach agus mar thús do lucht éisteachta soghluaiste amháin. I gcás tionscadal níos mó, smaoinigh ar bhunachar cód tiomnaithe agus ní ar shraith ceisteanna ó na meáin.

Gléasanna tacaithe

Tacaíonn Bootstrap le dornán ceisteanna ó na meáin i gcomhad amháin chun cabhrú le do thionscadail a dhéanamh níos oiriúnaí ar ghléasanna éagsúla agus ar réitigh scáileáin. Seo a bhfuil san áireamh:

Lipéad Leithead an leagain amach Leithead an cholúin Leithead gutter
Taispeáint mhór 1200px agus suas 70px 30px
Réamhshocrú 980px agus suas 60px 20px
Táibléad portráidí 768px agus os a chionn 42px 20px
Fón a chuig táibléad 767px agus thíos Colúin sreabhán, gan aon leithid seasta
Fóin 480px agus thíos Colúin sreabhán, gan aon leithid seasta 
  1. /* Deasc mór */
  2. @media ( min - leithead : 1200px ) { ... }     
  3.  
  4. /* Táibléad portráide chuig an tírdhreach agus deasc */
  5. @media ( min - leithead : 768px ) agus ( leithead uasta : 979px ) { ... } _        
  6.  
  7. /* Fón tírdhreacha go tablet portráide */
  8. @media ( leithead uasta : 767px ) { ... } _     
  9.  
  10. /* Fóin tírdhreacha agus síos */
  11. @media ( leithead uasta : 480px ) { ... } _

Ranganna fóntais sofhreagracha

Ar mhaithe le forbairt níos tapúla atá éasca le húsáid, bain úsáid as na ranganna áirgiúlachta seo chun ábhar a thaispeáint agus a cheilt trí ghléas. Anseo thíos tá tábla de na haicmí atá ar fáil agus a n-éifeacht ar leagan amach fiosrúchán meán ar leith (lipéadaithe de réir gléas). Is féidir iad a fháil i responsive.less.

Aicme Fóin767px agus thíos Táibléad979px go 768px DeascRéamhshocrú
.visible-phone Infheicthe
.visible-tablet Infheicthe
.visible-desktop Infheicthe
.hidden-phone Infheicthe Infheicthe
.hidden-tablet Infheicthe Infheicthe
.hidden-desktop Infheicthe Infheicthe

Cathain a úsáid

Bain úsáid as ar bhonn teoranta agus seachain leaganacha iomlána éagsúla den láithreán céanna a chruthú. Ina áit sin, bain úsáid as iad chun cur i láthair gach feiste a chomhlánú. Níor cheart fóntais sofhreagracha a úsáid le táblaí, agus mar sin ní thacaítear leo.

Cás tástála fóntais sofhreagrach

Athraigh do bhrabhsálaí nó lódáil ar ghléasanna éagsúla chun na ranganna thuas a thástáil.

Le feiceáil ar...

Léiríonn seicmharcanna glasa go bhfuil an rang le feiceáil i do radharc reatha.

  • Fón✔ Fón
  • Táibléad✔ Táibléad
  • Deasc✔ Deasc

I bhfolach ar...

Anseo, cuireann seicmharcanna glasa in iúl go bhfuil an rang i bhfolach i do radharcra reatha.

  • Fón✔ Fón
  • Táibléad✔ Táibléad
  • Deasc✔ Deasc