Andamio · Bootstrap nga iti Ilocano

Kasapulan ti HTML5 a doctype

Ti Bootstrap ket agus-usar kadagiti sumagmamano nga elemento ti HTML ken dagiti tagikua ti CSS a kasapulan ti panagusar ti doctype ti HTML5. Iramanmo dayta iti rugi ti amin a proyektom.

<!DOKTIPO TI html>
<html lang = "ilo" > 
  ...
</html>

Tipograpia ken dagiti silpo

Ti Bootstrap ket mangikeddeng kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. Espesipiko, datayo:

Ikkaten marginiti bagi
Itakderan background-color: white;tibody
Usaren ti @baseFontFamily, @baseFontSize, ken @baseLineHeightdagiti attribute a kas ti tipograpiko a batayantayo
Itakderan ti sangalubongan a kolor ti silpo babaen @linkColorken iyaplikar ti link underlines laeng iti:hover

Dagitoy nga estilo ket mabalin a masarakan iti uneg ti andamio.less .

I-reset babaen ti Normalize

Iti Bootstrap 2, ti daan a bloke ti panag-reset ket naibaba a pabor iti Normalize.css , ti maysa a proyekto babaen da Nicolas Gallagher ken Jonathan Neal a mangpabileg pay ti HTML5 Boilerplate . Bayat nga us-usarenmi ti kaaduan a Normalize iti uneg ti reset.less -mi , inikkatmi ti sumagmamano nga elemento nga espesipiko para iti Bootstrap.

Live nga grid nga pagarigan

Ti kasisigud a sistema ti grid ti Bootstrap ket agus-usar kadagiti 12 a kolum , a mangaramid para iti 940px a kalawa a pagkargaan nga awan dagiti makasungbat a tampok a napalubosan. Iti nainayon ti makasungbat a CSS a papeles, ti grid ket makibagay nga agbalin a 724px ken 1170px ti kalawana depende iti viewport-mo. Iti baba dagiti 767px a viewport, dagiti adigi ket agbalin a pluido ken agtumpok a bertikal.

1 nga

2. 2

9 nga

Batayan nga grid nga HTML

Para iti simple a dua a kolum a layout, mangpartuat ti maysa .rowken inayon ti maitutop a bilang dagiti .span*kolum. Kas daytoy ket maysa a 12-a-kolum a grid, tunggal maysa .span*ket mangsaklaw ti bilang kadagita a 12 a kolum, ken kanayon koma a mangnayon aginggana ti 12 para iti tunggal maysa a hilera (wenno ti bilang dagiti adigi iti nagannak).

<div klase = "hilera" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span8" > ... </div> 
</div>

No maited daytoy a pagarigan, addaantayo iti .span4ken .span8, a mangaramid para iti 12 a dagup a kolum ken ti kompleto a hilera.

Panang-offset kadagiti kolum

Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .offset*klase. Tunggal klase ket paaduenna ti kannigid a pingir ti maysa a kolum babaen ti maysa a sibubukel a kolum. Kas pagarigan, .offset4aggaraw .span4iti rabaw ti uppat a kolum.

3 nga offset 2

3 nga offset 1

3 nga offset 2

6 nga offset 3

<div klase = "hilera" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span3 nga offset2" > ... </div> 
</div>

Dagiti adigi ti panagumok

Tapno mai-nest ti linaonmo babaen ti default a grid, manginayon ti baro .rowken grupo dagiti .span*adigi iti uneg ti addan a .span*kolum. Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon iti bilang dagiti adigi ti nagannakna.

Lebel 1 nga kolum

Lebel 2

<div klase = "hilera" > 
  < klase ti div = "span9" > 
    Lebel 1 nga kolum
    <div klase = "hilera" > 
      <div klase = "span6" > Antas 2 </div> 
      <div klase = "span3" > Antas 2 </div> 
    </div>
  </div>
</div>

Pagarigan ti grid ti pluido nga agbiag

Ti sistema ti grid ti pluido ket agus-usar kadagiti porsiento imbes a dagiti pixel para kadagiti kalawa ti adigi. Daytoy ket addaan kadagiti isu met laeng a makasungbat a kabaelan a kas ti sistemami a naikeddeng a grid, a mangipasigurado kadagiti umno a proporsion para kadagiti resolusion ti tulbek nga iskrin ken dagiti alikamen.

1 nga

8 nga

12 nga

Batayan nga pluido nga grid HTML

Aramiden ti ania man a hilera a "pluido" babaen ti panagbalbaliw .rowiti .row-fluid. Agtalinaed nga eksakto nga agpapada dagiti klase ti adigi, a mamagbalin a nalaka ti ag-flip iti nagbaetan dagiti naipasdek ken pluido a grid.

<div klase = "hilera-a-pluido" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span8" > ... </div> 
</div>

Panag-offset ti pluido

Agpataray iti isu met laeng a wagas a kas ti naikeddeng a grid system offsetting: manginayon .offset*iti ania man a kolum tapno offset babaen ti kasta nga adu a kolum.

4 nga offset 4

3 nga offset 3

6 nga offset 6

<div klase = "hilera-a-pluido" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span4 nga offset2" > ... </div> 
</div>

Panag-umok ti pluido

Dagiti grid ti pluido ket agus-usar ti panagumok a naiduma: tunggal maysa a naisanglad a lebel dagiti adigi ket rumbeng a mangnayon aginggana ti 12 nga adigi. Daytoy ket gapu ta ti grid ti pluido ket agus-usar kadagiti porsiento, saan a dagiti pixel, para iti panangisaad kadagiti kalawa.

Pluido nga 12

Pluido nga 6

<div klase = "hilera-a-pluido" > 
  < klase ti div = "span12" > 
    Pluido nga 12
    <div klase = "hilera-a-pluido" > 
      < klase ti div = "span6" > 
        Pluido nga 6
        <div klase = "hilera-a-pluido" > 
          <div klase = "span6" > Pluido 6 </div> 
          <div klase = "span6" > Pluido 6 </div> 
        </div>
      </div>
      <div klase = "span6" > Pluido 6 </div> 
    </div>
  </div>
</div>

Natakder ti layout

Mangipaay ti gagangay a naikeddeng-kalawa (ken opsional a makasungbat) a layout nga addaan laeng iti <div class="container">kasapulan.

<bagi> nga
  <div klase = "laon" > 
    ...
  </div>
</bagi>

Layout ti pluido

Mangaramid ti pluido, dua-a-kolumna a panid nga addaan iti <div class="container-fluid">—nasayaat para kadagiti aplikasion ken dok.

<div klase = "paglaon-a-pluido" > 
  <div klase = "hilera-a-pluido" > 
    < klase ti div = "span2" > 
      <!--Linaon ti sidebar-->
    </div>
    < klase ti div = "span10" > 
      <!--Linaon ti bagi-->
    </div>
  </div>
</div>

Panangpabalin kadagiti makasungbat a tampok

Iddepen ti makasungbat a CSS iti proyektom babaen ti panangiraman ti umno a meta tag ken kanayonan nga stylesheet iti uneg ti <head>ti dokumentom. No naurnongmo ti Bootstrap manipud iti panid ti Ipasayaat, kasapulam laeng nga iraman ti meta tag.

<meta name = "viewport" content = "kalawa=kalawa-ti-alikamen, umuna-a-timbangan=1.0" >  
<silpo href = "dagiti sanikua/css/bootstrap-responsive.css" rel = "panid ti estilo" >

Ulo nga agpangato!Ti Bootstrap ket saan a mangiraman kadagiti makasungbat a tampok babaen ti default iti daytoy a panawen a kas saan nga amin ket kasapulan a makasungbat. Imbes a paregtaen dagiti developer a mangikkat iti daytoy a tampok, panunotenmi a kasayaatan no mapalubosan dayta no kasapulan.

Maipapan iti makasungbat a Bootstrap

Dagiti panagsaludsod ti media ket mangipalubos ti kostumbre a CSS a naibatay kadagiti sumagmamano a kondision—dagiti ratio, kalawa, kita ti display, kdpy—ngem kadawyan a mangipamaysa iti aglawlaw min-widthken max-width.

Baliwan ti kalawa ti kolum iti grid tayo
Agtumpok kadagiti elemento imbes nga agtaytayab sadinoman a kasapulan
Baliwan ti kadakkel dagiti paulo ken teksto tapno ad-adda a maitutop kadagiti alikamen

Usarem dagiti saludsod iti media a responsable ken kas pangrugian laeng kadagiti mobile audience-mo. Para kadagiti dakdakkel a proyekto, ibilang dagiti naisangsangayan a batayan ti kodigo ken saan a dagiti suson dagiti panagsaludsod ti media.

Dagiti nasuportaran nga alikamen

Ti Bootstrap ket mangsuporta ti sumagmamano a panagsaludsod ti media iti maymaysa a file tapno makatulong a mangaramid kadagiti proyektom nga ad-adda a maitutop kadagiti nadumaduma nga alikamen ken dagiti resolusion ti iskrin. Ania ti nairaman:

Marka	Lawa ti layout	Kalawa ti adigi	Lapad ti kanal
Dakkel a display	1200px ken agpangato	70px nga	30px nga
Default	980px ken agpangato	60px nga	20px nga
Dagiti tableta ti retrato	768px ken nangatngato	42px nga	20px nga
Dagiti telepono agingga kadagiti tablet	767px ken iti baba	Pluido nga adigi, awan ti naikeddeng a kalawa
Dagiti Telepono	480px ken iti baba	Pluido nga adigi, awan ti naikeddeng a kalawa

/* Dakkel nga desktop */
@media ( min - lapad : 1200px ) { ... }.     
 
/* Tableta ti retrato iti landscape ken desktop */
@media ( min - kalawa : 768px ) ken ( max - kalawa : 979px ) { ... }        
 
/* Landscape nga telepono iti retrato a tablet */
@media ( max - lawa : 767px ) { ... }.     
 
/* Dagiti telepono ti landscape ken agpababa */
@media ( max - lawa : 480px ) { ... }.

Responsibo a klase ti utilidad

Para iti naparpartak a mobile-friendly development, usaren dagitoy a klase ti utilidad para iti panangipakita ken panangilemmeng iti linaon babaen ti alikamen. Iti baba ket ti lamisaan dagiti magun-od a klase ken ti epektoda iti naited a layout ti panagsaludsod ti media (naimarka babaen ti alikamen). Masarakan dagitoy iti responsive.less.

Klase	Dagiti Telepono767px ken iti baba	Dagiti tableta979px agingga iti 768px	Dagiti DesktopDefault
`.visible-phone`	Makita	Naidulin	Naidulin
`.visible-tablet`	Naidulin	Makita	Naidulin
`.visible-desktop`	Naidulin	Naidulin	Makita
`.hidden-phone`	Naidulin	Makita	Makita
`.hidden-tablet`	Makita	Naidulin	Makita
`.hidden-desktop`	Makita	Makita	Naidulin

Kaano nga usaren

Usaren iti limitado a pamay-an ken liklikan ti mangparnuay kadagiti interamente a naiduma a bersion ti isu met laeng a site. Imbes ketdi, usarem dagitoy a mangkomplemento iti presentasion ti tunggal alikamen. Dagiti makasungbat a utilidad ket saan koma a mausar kadagiti lamisaan, ken kas kasta ket saan a nasuportaran.

Responsibo a kaso ti pagsubok dagiti utilidad

Baliwam ti kadakkel ti browsermo wenno i-loadmo iti nadumaduma nga alikamen tapno masubok dagiti klase iti ngato.

Makita iti...

Dagiti berde a marka ti tsek ket mangipakita a ti klase ket makita iti agdama a viewport-mo.

Telepono✔ Telepono nga
Tableta nga✔ Tableta nga
Desktop nga✔ Desktop nga

Nailemmeng iti...

Ditoy, dagiti berde a marka ti tsek ket mangipakita a ti klase ket nailemmeng iti agdama a viewport-mo.

Telepono✔ Telepono nga
Tableta nga✔ Tableta nga
Desktop nga✔ Desktop nga

Andamio nga

Sangalubongan a setting