Skeffolding

Doctype HTML5 hewce dike

Bootstrap hin hêmanên HTML-ê û taybetmendiyên CSS-ê yên ku karanîna doctype HTML5 hewce dike bikar tîne. Di destpêka hemî projeyên xwe de wê têxin nav xwe.

<!DOCTYPE html>
<html lang = "ku" > 
  ...
</html>

Tîpografi û girêdan

Bootstrap pêşandana gerdûnî ya bingehîn, tîpografî, û şêwazên girêdanê destnîşan dike. Bi taybetî em:

Li marginser bedenê derxistin
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

Ev şêwaz dikarin di nav îskeleyan de werin dîtin.kêm .

Vegere bi rêya Normalîzekirinê

Bi Bootstrap 2-ê re, bloka vesazkirina kevn di berjewendiya Normalize.css de, projeyek ji hêla Nicolas Gallagher ve hatî avêtin , ku di heman demê de HTML5 Boilerplate jî hêzdar dike . Dema ku em pir ji Normalîzekirinê di nav reset.less xwe de bikar tînin , me hin hêman bi taybetî ji bo Bootstrap rakirin.

Mînaka tora zindî

Pergala torê ya xwerû ya Bootstrap 12 stûnan bikar tîne , ku konteynirek fireh a 940 px bêyî çalakkirina taybetmendiyên bersivdar çêdike . Li gel pelê CSS-a bersivdar ku lê hatî zêdekirin, tora li gorî dîtina we 724px û 1170px fireh dibe. Li jêr dîmenderên 767 px, stûn herikbar dibin û ber bi vertîkalê ve disekinin.

HTML tora bingehîn

Ji bo sêwirana du stûnên hêsan, a biafirînin .rowû jimareya guncan a .span*stûnan lê zêde bikin. Ji ber ku ev tevnek 12-stûnî ye, her .span*yek hejmarek ji wan 12 stûnan digire, û divê her gav ji bo her rêzek (an jî hejmara stûnên di dêûbavê de) 12 zêde bike.

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

Bi vê nimûneyê re, me heye .span4û .span8, ji bo 12 stûnên tevahî û rêzek bêkêmasî çêbikin.

Stûnên jihevdexistin

Bi karanîna dersan stûnan ber bi çepê ve .offset*bigerînin. Her çîn marjîna çepê ya stûnekê bi tevahî stûnek zêde dike. Mînakî, .offset4li .span4ser çar stûnan digere.

3 veqetandin 2

3 veqetandin 1

3 veqetandin 2

6 veqetandin 3

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

Stûnên nesting

Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin . 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..span*.span*

Mînak

Li vir du .span4stûnên hêlînkirî di nav a .span8.

Asta 1 ya stûnê

Asta 2

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

Mînaka tora şilavê ya zindî

Pergala tora şilavê ji bo firehiyên stûnê li şûna pixelan ji sedî bikar tîne. Ew xwedî heman kapasîteyên bersivdayinê ye ku pergala meya torê ya sabît e, ji bo çareseriyên ekran û cîhazên sereke rêjeyên rast peyda dike.

HTML-a tora şilavê ya bingehîn

Bi guherandina .rowli .row-fluid. Dersên stûnê tam eynî dimînin, guheztina di navbera torên sabît û şikilî de hêsan dike.

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

Tevlihevkirina herikînê

Bi heman awayê veqetandina pergala torê ya sabît tevdigere: .offset*li her stûnê zêde bike ku bi ewqas stûnan were veqetandin.

4 veqetandin 4

3 veqetandin 3

6 veqetandin 6

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

Fluid nesting

Hêlînkirina bi torên şilavî hinekî cûda ye: divê hejmara stûnên hêlînkirî bi hejmara stûnên dêûbav re nebe hev. Di şûna wê de, her asta stûnên hêlîn ji nû ve 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>

layout Fixed

Pîvanek hevbeş-firehiya sabît (û vebijarkî bersivdar) bi tenê <div class="container">hewce peyda dike.

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

Fluid layout

Rûpelek şêrîn , du- <div class="container-fluid">stûnî bi - ji bo serîlêdan û 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>

Çalakkirina taybetmendiyên bersivdar

Di projeya xwe de CSS-a bersivdar bi tevlêkirina meta taga rast û şêwazek din a di nav <head>belgeya xwe de çalak bikin. Ger we Bootstrap ji rûpela Xweserî berhev kiribe, hûn hewce ne ku tenê meta tagê têxin nav xwe.

<meta name = "viewport" naveroka = "width=device-width, destpêkê-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Serê xwe! Bootstrap di vê demê de ji hêla xwerû ve taybetmendiyên bersivdar nagire ji ber ku 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 ew li gorî hewcedariyê çalak bikin.

Di derbarê Bootstrap-ê de bersivdar

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ê
Phones	480px û jêr	Stûnên Fluid, bê firehiyên sabît
Telefon 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

/* Têlefonên perestgeh û jêr */
@media ( berfirehiya herî zêde : 480 px ) { ... }     
 
/* Têlefona perestgehê ji bo portreya tabletê */
@media ( berfirehiya herî zêde : 767 px ) { ... }     
 
/* Tabloya portreyê li peyzaj û sermaseyê */
@media ( min - firehiya : 768 px ) û ( berfirehiya herî zêde : 979 px ) { ... }        
 
/* Sermaseya mezin */
@media ( min - firehiya : 1200px ) { ... }

Dersên karûbar ên bersivdar

Ji bo pêşkeftina heval-mobîl a zûtir, van dersên karûbar bikar bînin ji bo nîşankirin û veşartina naverokê ji hêla cîhazê ve. Li jêr tabloyek dersên berdest û bandora wan li ser sêwirana lêpirsîna medyayê ya diyarkirî (ji hêla amûrê ve hatî nîşankirin) heye. Ew dikarin di nav de têne dîtin responsive.less.

Sinif	Phones767px û jêr	Tablets979px ber 768px	SermaseyênDestçûnî
`.visible-phone`	Têdîtinî	Veşartî	Veşartî
`.visible-tablet`	Veşartî	Têdîtinî	Veşartî
`.visible-desktop`	Veşartî	Veşartî	Têdîtinî
`.hidden-phone`	Veşartî	Têdîtinî	Têdîtinî
`.hidden-tablet`	Têdîtinî	Veşartî	Têdîtinî
`.hidden-desktop`	Têdîtinî	Têdîtinî	Veşartî

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.

Doza ceribandinê ya karûbarên bersivdar

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

Mîhengên gerdûnî