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îpografî 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 nûvekirinê ya kevin di berjewendiya Normalize.css de hate avêtin , projeyek ji hêla Nicolas Gallagher û Jonathan Neal ve 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>

Vê nimûneyê dan, 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 rastê ve .offset*bigerînin. Her çînek marjîna çepê ya stûnê 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 naveroka xwe bi tora xwerû re bihê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*

Asta 1 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 xwediyê heman kapasîteyên bersivdayînê ye ku pergala meya torê ya sabît e, ji bo çareseriyên ekran û cîhazên sereke nîsbetê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 tora sabît dixebite: .offset*li her stûnê zêde bikin ku bi ewqas stûnan veqetînin.

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

Tûrên şilavî hêlînê bi rengek cûda bikar tînin: her asta stûnên hêlînkirî divê heya 12 stûnan zêde bike. Ev e ji ber ku tora şilavê ji bo danîna firehiyan ji sedî, ne pixel bikar tîne.

Herikîn 12

Herikîn 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Herikîn 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Herikîn 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </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 mezin 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-tag û şêwazek din a di nav <head>belgeya xwe de vekin. 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ê
Dîmenek mezin	1200px û bilindtir	70px	30px
Destçûnî	980px û bilindtir	60px	20px
Tabletên portreyê	768px û jor	42px	20px
Telefon ji bo tabletan	767px û jêr	Stûnên Fluid, bê firehiyên sabît
Phones	480px û jêr	Stûnên Fluid, bê firehiyên sabît

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

Dersên karûbarê 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 cîhazê ve hatî destnîşan kirin) 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ûbdar 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. Pêdivî ye ku karûbarên bersivdar bi tabloyan re neyên bikar anîn, û ji ber vê yekê nayên piştgirî kirin.

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î