Bootstrap

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 12 stûnên bi ziravek bersivdar

Tora xwerû ya 940px

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

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.

  1. <div class = "rêz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 veqetandin 4
3 veqetandin 3
3 veqetandin 3
8 veqetandin 4 
  1. <div class = "rêz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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

Asta 1 ya stûnê
Asta 2
Asta 2 
  1. <div class = "rêz" > 
  2.   <div class = "span12" > 
  3.     Asta 1 ya stûnê
  4.     <div class = "rêz" > 
  5.       <div class = "span6" > Asta 2 </div> 
  6.       <div class = "span6" > Asta 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Xweserkirina Grid

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.

Layouts Şablonên bingehîn ji bo afirandina malperan

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

  1. <beden>
  2.   <div class = "konteyner" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Naveroka kêlekê-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Naveroka laş-->
  8.     </div>
  9.   </div>
  10. </div>

Sêwirana bersivdar Pirsên medyayê yên ji bo cîhaz û çareseriyên cihêreng

Amûrên bersivdar

Amûrên piştgirî kirin

Bootstrap ç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 940px 44px 20px
Destçûnî 940px û bilindtir 60px 20px
Dîmenek mezin 1210px û bilindtir 70px 30px

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:

  1. Guhertoya bersivdar a berhevkirî, bootstrap-responsive.css bikar bînin
  2. @import "responsive.less" zêde bikin û Bootstrap ji nû ve berhev bikin
  3. Biguherîne û ji nû ve bersiv.kêm wek cuda

Çima ne tenê wê tê de? Rastî bê gotin, ne hewce ye ku her tişt bersivdar be. Li şûna ku em pêşdebiran teşwîq bikin ku vê taybetmendiyê rakin, em çêtirîn dihesibînin ku wê çalak bikin.

  1.   // Telefonên perestgeh û jêr
  2.   @media ( berfirehiya herî zêde : 480 px ) { ... }     
  3.  
  4.   // Telefona perestgehê ji bo portreya tabletê
  5.   @media ( berfirehiya herî zêde : 768 px ) { ... }     
  6.  
  7.   // Tableta portreyê li peyzaj û sermaseyê
  8.   @media ( min - firehiya : 768 px ) û ( berfirehiya herî zêde : 940 px ) { ... }        
  9.  
  10.   // Sermaseya mezin
  11.   @media ( min - firehiya : 1200px ) { .. }