Bootstrap

Scafall

Tá Bootstrap tógtha ar ghreille sofhreagrach 12-cholún. Tá leagan amach leithead seasta agus sreabhán bunaithe ar an gcóras sin san áireamh againn freisin.

Stíleanna domhanda le haghaidh athshocrú CSS, clóghrafaíocht, agus naisc

Teastaíonn doctype HTML5

Úsáideann Bootstrap eilimintí HTML agus airíonna CSS a éilíonn úsáid an doctype HTML5. Bí cinnte é a chur san áireamh ag tús gach leathanaigh Bootstrapped i do thionscadal.

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

Clóghrafaíocht agus naisc....

Laistigh den chomhad scaffolding.less , shocraigh muid taispeáint dhomhanda bhunúsach, clóghrafaíocht, agus stíleanna naisc. Go sonrach, táimid:

  • Bain corrlach ar an gcomhlacht
  • Socraigh background-color: white;ar anbody
  • Bain úsáid as an @baseFontFamily, @baseFontSize, agus @baseLineHeighttréithe mar ár mbonn clóghrafaíochta
  • Socraigh dath an naisc dhomhanda trí @linkColoragus cuir béim ar nasc i bhfeidhm amháin:hover

Athshocraigh trí Normalú

Ó Bootstrap 2, tá an t-athshocrú CSS traidisiúnta tagtha chun cinn chun úsáid a bhaint as eilimintí ó Normalize.css , tionscadal le Nicolas Gallagher a thugann cumhacht don HTML5 Boilerplate freisin .

Is féidir an t-athshocrú nua a fháil fós i reset.less , ach le go leor gnéithe a bhaint as go gairid agus cruinneas.

Córas greille réamhshocraithe 12 cholún le casadh sofhreagrach

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

Is é an córas greille réamhshocraithe a chuirtear ar fáil mar chuid de Bootstrap ná eangach 940px, 12-cholún .

Tá ceithre athrú freagrúla ann freisin do ghléasanna agus réitigh éagsúla: fón, portráid táibléid, tírdhreach táibléid agus deasc bheaga, agus deasc mhórscáileáin.

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

Mar a léirítear anseo, is féidir leagan amach bunúsach a chruthú le dhá “cholún”, gach ceann acu a chuimsíonn roinnt de na 12 cholún bhunúsacha a shainmhínigh muid mar chuid dár gcóras greille.


Colúin fhritháireamh

4
4 fritháireamh 4
3 fritháireamh 3
3 fritháireamh 3
8 fritháireamh 4 
  1. <div rang = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Colúin neadaithe

Leis an gcóras greille statach (neamh-sreabhach) i Bootstrap, tá sé éasca neadú. Chun d'inneachar a neadú, ní gá ach sraith nua .rowagus sraith .span*colún a chur leis laistigh de .span*cholún atá ann cheana féin.

Sampla

Ba cheart go n-áireofaí i sraitheanna neadaithe sraith colún a chuireann suas le líon na gcolún dá thuismitheoir. Mar shampla, .span3ba chóir dhá cholún neadaithe a chur laistigh de .span6.

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

Córas greille sreabhach 12 colún freagrúil, bunaithe ar chéatadán

Colúin sreabhach

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

Céatadáin, ní picteilíní

Úsáideann an córas greille sreabhán céatadáin le haghaidh leithid na gcolún in ionad picteilíní seasta. Tá na héagsúlachtaí freagrúla céanna aige freisin agus atá ár gcóras eangaí seasta, ag cinntiú comhréireanna cuí le haghaidh réitigh agus gléasanna príomhscáileáin.

Sraitheanna sreabhach

Déan sreabhach ró ar bith go simplí trí athrú .rowgo .row-fluid. Fanann na colúin mar a chéile, rud a fhágann go bhfuil sé thar a bheith simplí smeach idir leagan amach seasta agus sreabhán.

Marcáil

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

Sreabhán neadaithe

Tá beagán difriúil ag baint le neadú le greillí sreabhán: ní gá go mbeadh líon na gcolún neadaithe ag teacht leis an tuismitheoir. Ina áit sin, athshocraítear do cholúin ag gach leibhéal mar go nglacann gach ró 100% den cholún tuismitheora.

Sreabhán 12
Sreabhán 6
Sreabhán 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Leibhéal 1 den cholún
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Leibhéal 2 </div> 
  6.       <div class = "span6" > Leibhéal 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Saincheapadh greille

Athróg Luach réamhshocraithe Cur síos
@gridColumns 12 Líon na gcolún
@gridColumnWidth 60px Leithead gach colúin
@gridGutterWidth 20px Spás diúltach idir na colúin

Athróga i NÍOS LÚ

Insuite i Bootstrap tá dornán athróg chun an córas greille 940px réamhshocraithe a shaincheapadh, atá doiciméadaithe thuas. Stóráiltear gach athróg don ghreille in athróga.less.

Conas a shaincheapadh

Ciallaíonn modhnú na greille na trí @grid*athróg a athrú agus Bootstrap a ath-thiomsú. Athraigh na hathróga eangaí ina n-athróga.less agus bain úsáid as ceann amháin de na ceithre bhealach doiciméadaithe chun iad a chur le chéile . Má tá tuilleadh colúin á gcur leis agat, déan cinnte an CSS a chur leis dóibh siúd in grid.less.

Ag fanacht sofhreagrach

Ní oibríonn saincheaptha na greille ach ag an leibhéal réamhshocraithe, an eangach 940px. Chun na gnéithe sofhreagracha de Bootstrap a choinneáil, beidh ort na greillí a shaincheapadh i fhreagra.less.

Leagan Amach Teimpléid bhunúsacha chun leathanaigh ghréasáin a chruthú

Leagan amach seasta

An leagan amach réamhshocraithe agus simplí ar fud 940px, dírithe ar shuíomh Gréasáin nó leathanach ar bith a sholáthraíonn leathanach amháin <div class="container">.

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

Leagan amach sreabhach

<div class="container-fluid">tugann sé struchtúr leathanach solúbtha, leithead íosta agus uasta, agus barra taoibh ar chlé. Tá sé iontach le haghaidh apps agus doicimé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 Ceisteanna ó na meáin maidir le gléasanna agus réitigh éagsúla

Feistí sofhreagracha

Cad a dhéanann siad

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 fiosruithe ó 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
Fóin chliste 480px agus thíos Colúin sreabhach, gan aon leithid seasta
Fón cliste go táibléad 767px agus thíos Colúin sreabhach, gan aon leithid seasta
Táibléad portráidí 768px agus os a chionn 42px 20px
Réamhshocrú 980px agus suas 60px 20px
Taispeáint mhór 1200px agus suas 70px 30px

Tá meta tag ag teastáil

Chun a chinntiú go dtaispeánann gléasanna leathanaigh fhreagracha i gceart, cuir an meitea-chlib amhairc san áireamh.

  1. <meta name = "viewport" content = "leithead=leithead an fheiste, scála tosaigh=1.0" >

Ag baint úsáide as na ceisteanna ó na meáin

Ní chuireann Bootstrap na ceisteanna seo ó na meáin san áireamh go huathoibríoch, ach tá sé an-éasca iad a thuiscint agus a chur leis agus ní mór ach beagán socrú a dhéanamh. Tá roinnt roghanna agat chun gnéithe sofhreagracha Bootstrap a áireamh:

  1. Bain úsáid as an leagan sofhreagrach tiomsaithe, bootstrap-responsive.css
  2. Cuir @import "responsive.less" leis agus athchruinnigh Bootstrap
  3. Athraigh agus athchruinnigh sofhreagrach.less mar chomhad ar leith

Cén fáth nach gcuimsítear ach é? An fhírinne a insint, ní gá gach rud a bheith sofhreagrach. In ionad forbróirí a spreagadh chun an ghné seo a bhaint, is fearr linn é a chumasú.

  1.   // Fón tírdhreacha agus síos
  2.   @media ( leithead uasta : 480px ) { ... } _     
  3.  
  4.   // Fón tírdhreacha go táibléad portráid
  5.   @media ( leithead uasta : 767px ) { ... } _     
  6.  
  7.   // Táibléad portráid chuig tírdhreach agus deasc
  8.   @media ( min - leithead : 768px ) agus ( leithead uasta : 979px ) { ... } _        
  9.  
  10.   // Deasc mhór
  11.   @media ( min - leithead : 1200px ) { ... }

Ranganna fóntais sofhreagracha

Cad atá síad

Ar mhaithe le forbairt níos tapúla atá éasca le húsáid, bain úsáid as na bunranganna fóntais seo chun ábhar a thaispeáint agus a cheilt trí ghléas.

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

Mar shampla, b’fhéidir go dtaispeánfá <select>eilimint do nav ar leagan amach móibíleach, ach ní ar tháibléad ná ar dheasc.

Ranganna tacaíochta

Taispeántar anseo tábla de na ranganna a dtacaímid leo agus a n-éifeacht ar leagan amach fiosrúchán meán ar leith (lipéadaithe le gléas). Is féidir iad a fháil i responsive.less.

Aicme Fóin480px agus thíos Táibléad767px agus thíos Deasc768px agus os a chionn
.visible-phone Infheicthe
.visible-tablet Infheicthe
.visible-desktop Infheicthe
.hidden-phone Infheicthe Infheicthe
.hidden-tablet Infheicthe Infheicthe
.hidden-desktop Infheicthe Infheicthe

Cás tástála

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