Skeffolding

Bootstrap li ser tora 12-stûnî ya bersivdar hatî çêkirin. Me di heman demê de li ser bingeha wê pergalê sêwiranên sabît- û-firehiya herikbar jî vekiriye.

Pergala torê ya xwerû ku wekî beşek Bootstrap tê peyda kirin torgilokek 940px-fireh, 12-stûn e.

Di heman demê de çar guhertoyên bersivdar ên ji bo cîhaz û çareseriyên cihêreng jî hene: têlefon, portreya tabletê, dîmendera maseyê û sermaseyên piçûk, û sermaseyên mezin ên berfire.

<div class = "rêz" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Wekî ku li vir tê xuyang kirin, sêwirana bingehîn dikare bi du "stûnan" were afirandin, ku her yek hejmarek ji 12 stûnên bingehîn ên ku me wekî beşek pergala xweya torê destnîşan kirine vedihewîne.

Stûnên jihevdexistin

4 veqetandin 4

3 veqetandin 3

8 veqetandin 4

<div class = "rêz" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Stûnên nesting

Bi pergala torê ya statîk (ne-herik) li Bootstrap, hêlîn hêsan e. Ji bo ku hûn naveroka xwe nehêlin, tenê di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin ..span*.span*

Mînak

Rêzên hêlînkirî divê komek stûnên ku li ser hejmara stûnên dêûbavê wê zêde dibin tê de bin. Mînakî, du .span3stûnên hêlînkirî divê di hundurê de bêne danîn .span6.

Asta 1 ya stûnê

Asta 2

<div class = "rêz" > 
  <div class = "span12" > 
    Asta 1 ya stûnê
    <div class = "rêz" > 
      <div class = "span6" > Asta 2 </div> 
      <div class = "span6" > Asta 2 </div> 
    </div>
  </div>
</div>

Stûnên Fluid

Ji sedî, ne pixel

Pergala tora şilavê li şûna pixelên sabît ji sedî ji bo firehiya stûnan bikar tîne. Di heman demê de ew xwedî heman guheztinên bersivdar ên wekî pergala meya torê ya sabît e, ji bo çareseriyên ekran û cîhazên sereke nîsbetên rast peyda dike.

Rêzên Fluid

Bi guheztina li her rêzikî herikbar .rowbikin .row-fluid. Stûn tam eynî dimînin, û ew pir rasterast dike ku meriv di navbera seyrûseferên sabît û zirav de bizivire.

Markup

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

Fluid nesting

Hêlînkirina bi torên şilavî hinekî cûda ye: ne hewce ye ku hejmara stûnên hêlîn bi dêûbav re li hev bikin. Di şûna wê de, stûnên we di her astê de têne vesaz kirin ji ber ku her rêz 100% ji stûna dêûbav digire.

Herikîn 12

Herikîn 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Asta 1 ya stûnê
    <div class = "row-fluid" > 
      <div class = "span6" > Asta 2 </div> 
      <div class = "span6" > Asta 2 </div> 
    </div>
  </div>
</div>

Têgûherr	Nirxa standard	Terîf
`@gridColumns`	12	Hejmara stûnan
`@gridColumnWidth`	60px	Firehiya her stûnê
`@gridGutterWidth`	20px	Cihê neyînî di navbera stûnan de
`@siteWidth`	Berhevoka hesabkirî ya hemî stûn û gûzan	`.container-fixed()`Ji bo danîna firehiya mixin hejmara stûn û gemaran dihejmêre

Guherbarên li LESS

Di Bootstrap-ê de hatî çêkirin çend guhêrbar hene ku ji bo xweşkirina pergala tora xwerû ya 940px, ku li jor hatî belge kirin. Hemû guherbarên ji bo torê di guherbaran de têne tomarkirin.kêm.

Meriv çawa xweş bike

Guhertina torê tê wateya guheztina sê @grid*guhêrbar û ji nû ve berhevkirina Bootstrap. Di variables.less de guherbarên torê biguherînin û yek ji çar awayên belgekirî ji bo berhevkirinê bikar bînin . Ger hûn stûnên din lê zêde dikin, ji bo yên di grid.less de CSS-ê zêde bikin.

Bersiv dimîne

Xweserîkirina torê tenê di asta xwerû, tora 940px de dixebite. Ji bo domandina aliyên bersivdar ên Bootstrap, hûn ê di heman demê de neçar in ku torên di responsive.less de xweş bikin.

layout Fixed

Plansaziya xwerû û hêsan a 940px-berfireh, navend ji bo hema hema her malper an rûpelek ku ji hêla yek ve hatî peyda kirin <div class="container">.

<beden>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Fluid layout

<div class="container-fluid">strukturek rûpela maqûl, firehiyên min- û herî zêde, û milek milê çepê dide. Ew ji bo sepan û belgeyan pir baş e.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Naveroka kêlekê-->
    </div>
    <div class = "span10" > 
      <!--Naveroka laş-->
    </div>
  </div>
</div>

Amûrên piştgirî kirin

Bootstrap di pelek yekane de çend pirsên medyayê piştgirî dike da ku bibe alîkar ku projeyên we li ser cîhazên cihêreng û çareseriyên ekranê guncantir bikin. Li vir çi tê de heye:

Awanasî	Layout width	Firehiya stûnê	Firehiya gulikê
Smartphones	480px û jêr	Stûnên Fluid, bê firehiyên sabît
Tabletên portreyê	480px ber 768px	Stûnên Fluid, bê firehiyên sabît
Tabletên Landscape	768px ber 979px	42px	20px
Destçûnî	980px û bilindtir	60px	20px
Dîmenek mezin	1210px û bilindtir	70px	30px

Meta tagê hewce dike

Ji bo ku cîhaz bi rêkûpêk rûpelên bersivdar nîşan bidin, nîşana meta ya viewportê têxin nav xwe.

<meta name = "viewport" naveroka = "width=device-width, destpêkê-scale=1.0" >

Ew çi dikin

Lêpirsînên medyayê rê dide CSS-ya xwerû ya ku li ser bingeha çend şert û mercan-rêje, firehî, celebê xuyangê, hwd- lê bi gelemperî li dora min-widthû max-width.

Di tora me de firehiya stûnê biguhezînin
Li dewsa ku li ku hewce be, hêmanan birijînin
Mezinahiya sernav û nivîsê biguherînin da ku ji bo cîhazan maqûltir bin

Pirsên medyayê bikar tînin

Bootstrap bixweber van pirsên medyayê nagire, lê têgihiştin û zêdekirina wan pir hêsan e û sazkirina hindiktirîn hewce dike. Ji bo tevlêkirina taybetmendiyên bersivdar ên Bootstrap çend vebijarkên we hene:

Guhertoya bersivdar a berhevkirî, bootstrap-responsive.css bikar bînin
Add @import "responsive.less" and recompile Bootstrap
Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }