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.

<div rang="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</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.

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.

<div rang="row">
  <div rang="12">
    Leibhéal 1 den cholún
    <div rang="row">
      <div class="span6">Leibhéal 2</div>
      <div class="span6">Leibhéal 2</div>
    </div>
  </div>
</div>

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

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

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 toisc go nglacann gach ró 100% den cholún tuismitheora.

<div class="row-fluid">
  <div rang="12">
    Leibhéal 1 den cholún
    <div class="row-fluid">
      <div class="span6">Leibhéal 2</div>
      <div class="span6">Leibhéal 2</div>
    </div>
  </div>
</div>

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

<comhlacht>
  <div rang="container">
    ...
  </div>
</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.

<div class="container-fluid">
  <div class="row-fluid">
    <div rang="span2">
      <!-- Ábhar an bharra taoibh-->
    </div>
    <div rang="10">
      <!-- Ábhar an chomhlachta-->
    </div>
  </div>
</div>

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:

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

  // Fón tírdhreacha agus síos
  @media (uasleithead: 480px) {... }

  // Fón tírdhreacha go táibléad portráid
  @media (uasleithead: 768px) {... }

  // Táibléad portráid chuig tírdhreach agus deasc
  @media (min-leithead: 768px) agus (uas-leithead: 980px) {... }

  // Deasc mhór
  @media (min-leithead: 1200px) { .. }