Bootstrap nga

Andamio nga

Ti bootstrap ket naibangon iti makasungbat a 12-kolum a grid. Inramanmi met dagiti fixed- ken fluid-width a layout a naibatay iti dayta a sistema.

Dagiti sangalubongan nga estilo para iti panag-reset ti CSS, tipograpia, ken dagiti silpo

Kasapulan ti HTML5 a doctype

Ti Bootstrap ket agus-usar kadagiti elemento ti HTML ken dagiti tagikua ti CSS a kasapulan ti panagusar ti doctype ti HTML5. Siguraduen nga iraman daytoy iti rugi ti tunggal panid ti Bootstrapped iti proyektom.

  1. <!DOKTIPO TI html>
  2. <html lang = "ilo" > 
  3.   ...
  4. </html>

Tipograpia ken dagiti silpo

Iti uneg ti scaffolding.less a papeles, mangikeddengkami kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. Espesipiko, datayo:

  • Ikkaten ti margin iti 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

I-reset babaen ti Normalize

Manipud idi Bootstrap 2, ti tradisional a panagisubli ti CSS ket nagbalbaliw tapno agusar kadagiti elemento manipud iti Normalize.css , ti maysa a proyekto babaen ni Nicolas Gallagher a mangpabileg pay ti HTML5 Boilerplate .

Ti baro a panag-reset ket mabalin pay laeng a masarakan iti reset.less , ngem addaan kadagiti adu nga elemento a naikkat para iti kinaababa ken kinaumiso.

Default grid system 12 nga adigi nga addaan iti responsive twist

1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
4.
4.
4.
4.
8 nga
6.
6.
12 nga

Ti kasisigud a sistema ti grid a naited iti Bootstrap ket agus-usar kadagiti 12 a kolum a mangiparang kadagiti kalawa ti 724px, 940px (default nga awan ti sumungbat a CSS a nairaman), ken 1170px. Iti baba dagiti 767px a viewport, dagiti adigi ket agbalin a pluido ken agtumpok a bertikal.

  1. <div klase = "hilera" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span8" > ... </div> 
  4. </div>

Kas naipakita ditoy, ti batayan a layout ket mabalin a mapartuat babaen ti dua a "kolum", tunggal maysa ket mangsaklaw ti bilang dagiti 12 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi.


Panang-offset kadagiti kolum

4.
4 nga offset 4
3 nga offset 3
3 nga offset 3
8 nga offset 4 
  1. <div klase = "hilera" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span4 nga offset4" > ... </div> 
  4. </div>

Dagiti adigi ti panagumok

Iti estatiko (saan a pluido) a sistema ti grid iti Bootstrap, nalaka ti panagumok. Tapno mai-nest ti linaonmo, mangnayon laeng iti baro .rowken set dagiti .span*kolum iti uneg ti addan a .span*kolum.

Pagwadan

Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti bilang dagiti adigi ti nagannakna. Kas pagarigan, dua a naisanglad a .span3kolum ti rumbeng a maikabil iti uneg ti maysa a .span6.

Level 1 ti kolum
Lebel 2
Lebel 2 
  1. <div klase = "hilera" > 
  2.   < klase ti div = "span6" > 
  3.     Lebel 1 nga kolum
  4.     <div klase = "hilera" > 
  5.       <div klase = "span3" > Antas 2 </div> 
  6.       <div klase = "span3" > Antas 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema ti grid ti pluido 12 a makasungbat, porsiento-based a kolum

Pluido nga adigi

1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
4.
4.
4.
4.
8 nga
6.
6.
12 nga

Porsiento, saan a pixel

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

Dagiti hilera ti pluido

Aramiden ti aniaman a linia a pluido babaen laeng ti panagbalbaliw .rowiti .row-fluid. Agtalinaed nga eksakto nga agpapada dagiti adigi, a mamagbalin a super diretso ti ag-flip iti nagbaetan dagiti naipasdek ken pluido a layout.

Panagmarka

  1. <div klase = "hilera-a-pluido" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span8" > ... </div> 
  4. </div>

Panag-umok ti pluido

Ti panagumok kadagiti pluido a grid ket naiduma bassit: ti bilang dagiti naisanglad a kolum ket saan a kasapulan a maipada iti nagannak. Imbes ketdi, dagiti kolummo ket mai-reset iti tunggal maysa a lebel gapu ta tunggal maysa a hilera ket mangala ti 100% ti nagannak a kolum.

Pluido nga 12
Pluido nga 6
Pluido nga 6 
  1. <div klase = "hilera-a-pluido" > 
  2.   < klase ti div = "span12" > 
  3.     Level 1 ti kolum
  4.     <div klase = "hilera-a-pluido" > 
  5.       <div klase = "span6" > Antas 2 </div> 
  6.       <div klase = "span6" > Antas 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Panagpasayaat ti grid

Variable nga Default nga pateg Panangiladawan
@gridColumns 12 nga Bilang dagiti kolum
@gridColumnWidth 60px nga Kalawa ti tunggal adigi
@gridGutterWidth 20px nga Negatibo nga espasio iti nagbaetan dagiti adigi

Dagiti variable iti LESS

Naibangon iti Bootstrap ket dagiti sumagmamano a variable para iti panagpasayaat ti default a 940px a sistema ti grid, a nadokumento iti ngato. Amin a variable para iti grid ket naidulin kadagiti variable.less.

Kasano ti ag-customize

Ti panangbalbaliw ti grid ket kayatna a sawen ti panangbalbaliw kadagiti tallo @grid*a variable ken panagtipon manen ti Bootstrap. Baliwan dagiti grid variables kadagiti variables.less ken usaren ti maysa kadagiti uppat a wagas a nadokumento a mangtipon manen . No manginayonka kadagiti ad-adu a kolum, siguraduem nga inayon ti CSS para kadagidiay adda iti grid.less.

Panagtalinaed a makasungbat

Ti panagpasayaat ti grid ket agtrabaho laeng iti default a lebel, ti 940px a grid. Tapno mataginayon dagiti responsive nga aspeto ti Bootstrap, masapul met nga i-customize-mo dagiti grid iti responsive.less.

Dagiti Layout Dagiti batayan a plantilia a mangpartuat kadagiti panid ti web

Natakder ti layout

Ti default ken simple a 940px-a kalawa, naisentro a layout para iti dandani laeng ania man a website wenno panid nga inted babaen ti maymaysa <div class="container">.

  1. <bagi> nga
  2.   <div klase = "laon" > 
  3.     ...
  4.   </div>
  5. </bagi>

Layout ti pluido

<div class="container-fluid">mangted ti nalaka a maibagay nga estruktura ti panid, min- ken max-a kalawa, ken ti kannigid a sidebar. Nasayaat dayta para kadagiti apps ken docs.

  1. <div klase = "paglaon-a-pluido" > 
  2.   <div klase = "hilera-a-pluido" > 
  3.     < klase ti div = "span2" > 
  4.       <!--Linaon ti sidebar-->
  5.     </div>
  6.     < klase ti div = "span10" > 
  7.       <!--Linaon ti bagi-->
  8.     </div>
  9.   </div>
  10. </div>

Responsive design Dagiti saludsod ti media para kadagiti nadumaduma nga alikamen ken resolusion

Dagiti makasungbat nga alikamen

No ania ti ar-aramidenda

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
Dagiti smartphone 480px ken iti baba Pluido nga adigi, awan ti naikeddeng a kalawa
Smartphone kadagiti tablet 767px ken iti baba Pluido nga adigi, awan ti naikeddeng a kalawa
Dagiti tableta ti retrato 768px ken nangatngato 42px nga 20px nga
Default 980px ken agpangato 60px nga 20px nga
Dakkel a display 1200px ken agpangato 70px nga 30px nga

Kasapulan ti meta tag

Tapno masigurado a dagiti alikamen ket mangipakitada a nasayaat kadagiti sumungsungbat a panid, iraman ti meta tag ti viewport.

  1. <meta name = "viewport" content = "kalawa=kalawa-ti-alikamen, umuna-a-timbangan=1.0" >

Panangusar kadagiti saludsod ti media

Ti Bootstrap ket saan nga automatiko a mangiraman kadagitoy a panagsaludsod ti media, ngem ti pannakaawat ken pananginayon kadagitoy ket nalaka unay ken kasapulan ti bassit a panagisaad. Addaanka iti sumagmamano a pagpilian para iti panangiraman kadagiti makasungbat a tampok ti Bootstrap:

  1. Usaren ti naurnong a responsive a bersion, bootstrap-responsive.css
  2. Inayon ti @import ti "responsive.less" ken urnongen manen ti Bootstrap
  3. Baliwan ken urnongen manen ti responsive.less a kas naisina a file

Apay a dimo iraman laeng dayta? Pudno a kunaen, saan nga amin ket kasapulan a makasungbat. Imbes a paregtaen dagiti developer a mangikkat iti daytoy a feature, panunotenmi a kasayaatan no mapalubosan dayta.

  1.   /* Dagiti telepono ti landscape ken agpababa */
  2.   @media ( max - lawa : 480px ) { ... }.     
  3.  
  4.   /* Landscape nga telepono iti retrato a tablet */
  5.   @media ( max - lawa : 767px ) { ... }.     
  6.  
  7.   /* Tableta ti retrato iti landscape ken desktop */
  8.   @media ( min - kalawa : 768px ) ken ( max - kalawa : 979px ) { ... }        
  9.  
  10.   /* Dakkel nga desktop */
  11.   @media ( min - lapad : 1200px ) { ... }.

Responsibo a klase ti utilidad

Ania dagitoy

Para iti naparpartak a mobile-friendly development, usaren dagitoy a kangrunaan a klase ti utilidad para iti panangipakita ken panangilemmeng iti linaon babaen ti alikamen.

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.

Kas pagarigan, mabalinmo nga ipakita ti <select>elemento para iti nav kadagiti mobile layout, ngem saan kadagiti tablet wenno desktop.

Suportaran dagiti klase

Naipakita ditoy ti lamisaan dagiti klase a suportaranmi ken ti epektoda iti naited a layout ti panagsaludsod ti media (naimarka babaen ti alikamen). Masarakan dagitoy iti responsive.less.

Klase Dagiti Telepono480px ken iti baba Dagiti tableta767px ken iti baba Dagiti Desktop768px ken nangatngato
.visible-phone Makita
.visible-tablet Makita
.visible-desktop Makita
.hidden-phone Makita Makita
.hidden-tablet Makita Makita
.hidden-desktop Makita Makita

Kaso ti pagsubok

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