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.

Şêweyên gerdûnî yên ji bo vesazkirina CSS, tîpografî, û girêdan

Doctype HTML5 hewce dike

Bootstrap hêmanên HTML-ê û taybetmendiyên CSS-ê yên ku hewceyê karanîna doctype HTML5 hewce dike bikar tîne. Bawer bikin ku wê di destpêka her rûpelê Bootstrapped de di projeya xwe de bicîh bikin.

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

Tîpografi û girêdan

Di nav pelê scaffolding.less de, me şêwazên pêşandana gerdûnî, tîpografî û girêdana bingehîn saz dikin. Bi taybetî em:

  • Li ser laş marjînal derxînin
  • Set background-color: white;li serbody
  • @baseFontFamily, @baseFontSize, û @baseLineHeighttaybetmendiyan wekî bingeha meya tîpografiyê bikar bînin
  • Rengê girêdana gerdûnî bi rê ve @linkColorbicîh bikin û binê zencîreyan tenê li ser bicîh bikin:hover

Vegere bi rêya Normalîzekirinê

Ji Bootstrap 2-ê ve, vesazkirina kevneşopî ya CSS pêşve çûye da ku hêmanên ji Normalize.css bikar bîne , projeyek ji hêla Nicolas Gallagher ve ku di heman demê de HTML5 Boilerplate jî hêzdar dike .

Vesazkirina nû hîn jî di reset.less de dikare were dîtin , lê ji bo kurtî û rastbûnê gelek hêman jê têne rakirin.

Pergala torê ya xwerû 12 stûnên bi ziraviyek bersivdar

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

Pergala torê ya xwerû ya ku di Bootstrap de hatî peyda kirin 12 stûnên ku bi firehiyên 724px, 940px (xweserî bêyî CSS-ya bersivdar tê de) û 1170px têne xuyang kirin bikar tîne. Li jêr dîmenderên 767 px, stûn herikbar dibin û ber bi vertîkalê ve disekinin.

  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

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
Asta 2 
  1. <div class = "rêz" > 
  2.   <div class = "span6" > 
  3.     Asta 1 stûn
  4.     <div class = "rêz" > 
  5.       <div class = "span3" > Asta 2 </div> 
  6.       <div class = "span3" > Asta 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Pergala tora şilavê 12 stûnên bersivdar, ji sedî

Stûnên Fluid

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

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Herikîn 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Asta 1 ya stûnê
  4.     <div class = "row-fluid" > 
  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

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

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ê bi berpirsiyarî û tenê wekî destpêkek ji temaşevanên xweyên mobîl re bikar bînin. Ji bo projeyên mezintir, bingehên kodê yên diyarkirî û ne qatên pirsên medyayê bihesibînin.

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
Smartphones ji bo tabletan 767px û jêr Stûnên Fluid, bê firehiyên sabît
Tabletên portreyê 768px û jor 42px 20px
Destçûnî 980px û bilindtir 60px 20px
Dîmenek mezin 1200px û 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.

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

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. Responsive.less wekî pelek cuda biguherînin û ji nû ve berhev bikin

Ç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.   /* Têlefonên perestgeh û jêr */
  2.   @media ( berfirehiya herî zêde : 480 px ) { ... }     
  3.  
  4.   /* Têlefona perestgehê ji bo portreya tabletê */
  5.   @media ( berfirehiya herî zêde : 767 px ) { ... }     
  6.  
  7.   /* Tabloya portreyê li peyzaj û sermaseyê */
  8.   @media ( min - firehiya : 768 px ) û ( berfirehiya herî zêde : 979 px ) { ... }        
  9.  
  10.   /* Sermaseya mezin */
  11.   @media ( min - firehiya : 1200px ) { ... }

Dersên karûbar ên bersivdar

Ew çi ne

Ji bo pêşkeftina heval-mobîl a zûtir, van dersên bingehîn ên karûbar bikar bînin ku ji hêla amûrê ve naverokê nîşan bidin û veşêrin.

Dema ku bikar bînin

Li ser bingehek tixûb bikar bînin û ji afirandina guhertoyên bi tevahî cûda yên heman malperê dûr bisekinin. Di şûna wê de, wan bikar bînin da ku pêşandana her cîhazê temam bikin.

Mînakî, dibe ku hûn <select>hêmanek ji bo nav li ser sêwiranên mobîl nîşan bidin, lê ne li ser tablet an sermaseyan.

Dersên piştgirî

Li vir tabloyek dersên ku em piştgirî dikin û bandora wan li ser sêwirana lêpirsîna medyayê ya diyarkirî (ji hêla cîhazê ve hatî nîşankirin) tê xuyang kirin. Ew dikarin di nav de têne dîtin responsive.less.

Sinif Phones480px û jêr Tablets767px û jêr Sermaseyên768px û jor
.visible-phone Têdîtinî
.visible-tablet Têdîtinî
.visible-desktop Têdîtinî
.hidden-phone Têdîtinî Têdîtinî
.hidden-tablet Têdîtinî Têdîtinî
.hidden-desktop Têdîtinî Têdîtinî

Doza testê

Geroka xwe mezin bikin an li ser cîhazên cihêreng bar bikin da ku dersên jorîn ceribandin.

Li ser xuya dibe ...

Nîşaneyên kesk destnîşan dikin ku çîn di dîmendera weya heyî de xuya ye.

  • Telefon✔ Telefon
  • Heb✔ Tablet
  • Desktop✔ Sermaseya

Veşartî li ser ...

Li vir, nîşaneyên kesk destnîşan dikin ku çîn di dîmendera weya heyî de veşartî ye.

  • Telefon✔ Telefon
  • Heb✔ Tablet
  • Desktop✔ Sermaseya