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.

Córas greille 12 cholún le casadh sofhreagrach

greille réamhshocraithe 940px

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

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>

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
@siteWidth Suim ríofa na gcolún agus na gáitéir go léir Áireamh líon na gcolún agus gáitéir chun leithead an .container-fixed()mheascáin a shocrú

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

Gléasanna tacaithe

Tacaíonn Bootstrap le dornán ceisteanna ó na meá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 sreabhán, gan aon leithid seasta
Táibléad portráidí 480px go 768px Colúin sreabhán, gan aon leithid seasta
Táibléad tírdhreacha 768px go 940px 44px 20px
Réamhshocrú 940px agus suas 60px 20px
Taispeáint mhór 1210px agus suas 70px 30px

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

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 recompile sofhreagrach.less mar 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 : 768px ) { ... } _     
  6.  
  7.   // Táibléad portráid chuig tírdhreach agus deasc
  8.   @media ( min - leithead : 768px ) agus ( leithead uasta : 940px ) { ... } _        
  9.  
  10.   // Deasc mhór
  11.   @media ( min - leithead : 1200px ) { .. }