Bootstrap

Skela

Bootstrap është ndërtuar në rrjete, paraqitje dhe komponentë të përgjegjshëm me 12 kolona.

Parametrat globale

Kërkon doctype HTML5

Bootstrap përdor disa elementë HTML dhe veti CSS që kërkojnë përdorimin e tipit HTML5. Përfshijeni atë në fillim të të gjitha projekteve tuaja.

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

Tipografia dhe lidhjet

Bootstrap vendos stilet bazë globale të ekranit, tipografisë dhe lidhjeve. Konkretisht ne:

  • Hiqeni marginnë trup
  • Vendosur background-color: white;nëbody
  • Përdorni atributet , dhe si bazën @baseFontFamilytonë @baseFontSizetipografike@baseLineHeight
  • Vendosni ngjyrën globale të lidhjes nëpërmjet @linkColordhe aplikoni vetëm nënvizimet e lidhjes:hover

Këto stile mund të gjenden brenda skelave.më pak .

Rivendosni nëpërmjet Normalize

Me Bootstrap 2, blloku i vjetër i rivendosjes është hequr në favor të Normalize.css , një projekt nga Nicolas Gallagher dhe Jonathan Neal që fuqizon gjithashtu Boilerplate HTML5 . Ndërsa përdorim shumë nga Normalize brenda reset.less tonë , ne kemi hequr disa elementë posaçërisht për Bootstrap.

Sistemi i parazgjedhur i rrjetit

Shembull i rrjetit të drejtpërdrejtë

Sistemi i paracaktuar i rrjetit Bootstrap përdor 12 kolona , ​​duke krijuar një enë të gjerë 940 pikselë pa aktivizuar veçori reaguese . Me skedarin reagues CSS të shtuar, rrjeti përshtatet të jetë 724 pikselë dhe 1170 pikselë i gjerë në varësi të portit tuaj të shikimit. Nën portat e pamjes 767 px, kolonat bëhen fluide dhe grumbullohen vertikalisht.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Rrjeti bazë HTML

Për një paraqitje të thjeshtë me dy kolona, ​​krijoni një .rowdhe shtoni numrin e duhur të .span*kolonave. Duke qenë se ky është një rrjet me 12 kolona, ​​secila .span*përfshin një numër prej atyre 12 kolonave dhe duhet të shtojë gjithmonë deri në 12 për çdo rresht (ose numrin e kolonave në prind).

  1. <div class = "rresht" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Duke pasur parasysh këtë shembull, ne kemi .span4dhe .span8, duke bërë për 12 kolona gjithsej dhe një rresht të plotë.

Kompensimi i kolonave

Zhvendosni kolonat në të djathtë duke përdorur .offset*klasat. Çdo klasë rrit kufirin e majtë të një kolone me një kolonë të tërë. Për shembull, .offset4lëviz .span4mbi katër kolona.

4
3 kompensim 2
3 kompensim 1
3 kompensim 2
6 kompensim 3 
  1. <div class = "rresht" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Kolonat e folesë

Për të futur përmbajtjen tuaj me rrjetin e parazgjedhur, shtoni një .rowgrup të ri .span*kolonash brenda një .span*kolone ekzistuese. Rreshtat e mbivendosur duhet të përfshijnë një grup kolonash që shtohen me numrin e kolonave të mëmë.

Kolona e nivelit 1
Niveli 2
Niveli 2 
  1. <div class = "rresht" > 
  2.   <div class = "span9" > 
  3.     Kolona e nivelit 1
  4.     <div class = "rresht" > 
  5.       <div class = "span6" > Niveli 2 </div> 
  6.       <div class = "span3" > Niveli 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistemi i rrjetit të lëngjeve

Shembull i rrjetit të lëngjeve të gjalla

Sistemi i rrjetit të lëngjeve përdor përqindje në vend të pikselëve për gjerësinë e kolonave. Ka të njëjtat aftësi reaguese si sistemi ynë i rrjetit fiks, duke siguruar proporcione të duhura për rezolucionet dhe pajisjet kryesore të ekranit.

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

HTML bazë e rrjetit të lëngjeve

Bëni çdo rresht "të lëngshëm" duke ndryshuar .rownë .row-fluid. Klasat e kolonave qëndrojnë saktësisht të njëjta, duke e bërë të lehtë kalimin midis rrjetave fikse dhe të lëngshme.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Kompensimi i lëngjeve

Funksionon në të njëjtën mënyrë si kompensimi i sistemit të rrjetit fiks: shtoni .offset*në çdo kolonë për të kompensuar me kaq shumë kolona.

4
4 kompensim 4
3 kompensim 3
3 kompensim 3
6 kompensim 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Folezimi i lëngjeve

Rrjetet fluide përdorin folenë ndryshe: çdo nivel i mbivendosur i kolonave duhet të shtojë deri në 12 kolona. Kjo ndodh sepse rrjeti i lëngut përdor përqindje, jo pikselë, për vendosjen e gjerësisë.

Lëngu 12
Lëngu 6
Lëngu 6
Lëngu 6
Lëngu 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Lëngu 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Lëngu 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Paraqitjet

Paraqitje fikse

Ofron një plan urbanistik të përbashkët me gjerësi fikse (dhe opsionalisht të përgjegjshëm) me vetëm të <div class="container">nevojshme.

  1. <trupi>
  2.   <div class = "enë" > 
  3.     ...
  4.   </div>
  5. </body>

Paraqitja e lëngshme

Krijoni një faqe të rrjedhshme, me dy kolona me <div class="container-fluid">—e shkëlqyer për aplikacione dhe dokumente.

  1. <div class = "kontenier-lëng" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Përmbajtja e shiritit anësor-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Përmbajtja e trupit-->
  8.     </div>
  9.   </div>
  10. </div>

Dizajn të përgjegjshëm

Aktivizimi i veçorive të përgjegjshme

Aktivizoni CSS-në e përgjegjshme në projektin tuaj duke përfshirë meta-etiketën e duhur dhe fletën e stilit shtesë brenda <head>dokumentit tuaj. Nëse e keni përpiluar Bootstrap nga faqja Customize, duhet të përfshini vetëm etiketën meta.

  1. <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Kokat lart!Bootstrap nuk përfshin veçori të përgjegjshme si parazgjedhje në këtë moment pasi jo gjithçka duhet të jetë e përgjegjshme. Në vend që të inkurajojmë zhvilluesit të heqin këtë veçori, mendojmë se është më mirë ta aktivizojmë atë sipas nevojës.

Rreth Bootstrap-it të përgjegjshëm

Pajisjet reaguese

Pyetjet e medias lejojnë CSS të personalizuar bazuar në një numër kushtesh - raportet, gjerësia, lloji i ekranit, etj. - por zakonisht fokusohet rreth min-widthdhe max-width.

  • Ndryshoni gjerësinë e kolonës në rrjetin tonë
  • Vendosni elementët në vend që të notoni kudo që është e nevojshme
  • Ndrysho madhësinë e titujve dhe tekstit për të qenë më të përshtatshëm për pajisjet

Përdorni pyetjet e medias me përgjegjësi dhe vetëm si fillim për audiencën tuaj celular. Për projekte më të mëdha, merrni parasysh bazat e dedikuara të kodit dhe jo shtresat e pyetjeve të medias.

Pajisjet e mbështetura

Bootstrap mbështet një sërë pyetjesh mediatike në një skedar të vetëm për të ndihmuar që projektet tuaja t'i bëjnë më të përshtatshme në pajisje të ndryshme dhe rezolucione të ekranit. Ja çfarë përfshihet:

Etiketa Gjerësia e paraqitjes Gjerësia e kolonës Gjerësia e ulluqit
Ekran i madh 1200px e lart 70 px 30 px
E paracaktuar 980px e lart 60 px 20 px
Tableta portrete 768px dhe më lart 42 px 20 px
Telefonat në tableta 767px dhe më poshtë Kolona të lëngshme, pa gjerësi fikse
Telefonat 480px dhe më poshtë Kolona të lëngshme, pa gjerësi fikse 
  1. /* Desktop i madh */
  2. @media ( min - gjerësia : 1200 px ) { ... }     
  3.  
  4. /* Tableti portret në peizazh dhe desktop */
  5. @media ( gjerësia min .: 768 px ) dhe ( gjerësia maksimale : 979 px ) { ... }        
  6.  
  7. /* Telefon peizazh në tablet portret */
  8. @media ( gjerësia maksimale : 767 px ) { ... }     
  9.  
  10. /* Telefonat me peizazh dhe poshtë */
  11. @media ( gjerësia maksimale : 480 px ) { ... }

Klasat e shërbimeve të përgjegjshme

Për zhvillim më të shpejtë miqësor për celularin, përdorni këto klasa të shërbimeve për shfaqjen dhe fshehjen e përmbajtjes sipas pajisjes. Më poshtë është një tabelë e klasave të disponueshme dhe efekti i tyre në një paraqitje të caktuar të pyetjeve të medias (etiketuar sipas pajisjes). Ato mund të gjenden në responsive.less.

Klasa Telefonat767px dhe më poshtë Tabletat979px deri në 768px DesktopëtE paracaktuar
.visible-phone E dukshme
.visible-tablet E dukshme
.visible-desktop E dukshme
.hidden-phone E dukshme E dukshme
.hidden-tablet E dukshme E dukshme
.hidden-desktop E dukshme E dukshme

Kur të përdoret

Përdoreni në një bazë të kufizuar dhe shmangni krijimin e versioneve krejtësisht të ndryshme të të njëjtit sajt. Në vend të kësaj, përdorni ato për të plotësuar prezantimin e çdo pajisjeje. Shërbimet e përgjegjshme nuk duhet të përdoren me tabela dhe si të tilla nuk mbështeten.

Rasti i testimit të shërbimeve të përgjegjshme

Ndryshoni madhësinë e shfletuesit tuaj ose ngarkoni në pajisje të ndryshme për të testuar klasat e mësipërme.

E dukshme në...

Shenjat e gjelbra tregojnë se klasa është e dukshme në pamjen tuaj aktuale.

  • Telefoni✔ Telefon
  • Tabletë✔ Tabletë
  • Desktop✔ Desktop

I fshehur në...

Këtu, shenjat e gjelbërta tregojnë se klasa është e fshehur në portin tuaj aktual të pamjes.

  • Telefoni✔ Telefon
  • Tabletë✔ Tabletë
  • Desktop✔ Desktop