Bootstrap

Skela

Bootstrap është ndërtuar në një rrjet të përgjegjshëm me 12 kolona. Ne kemi përfshirë gjithashtu paraqitje me gjerësi fikse dhe fluide bazuar në atë sistem.

Stilet globale për rivendosjen e CSS, tipografinë dhe lidhjet

Kërkon doctype HTML5

Bootstrap përdor elementet HTML dhe vetitë CSS që kërkojnë përdorimin e tipit HTML5. Sigurohuni që ta përfshini atë në fillim të çdo faqe Bootstrapped në projektin tuaj.

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

Tipografia dhe lidhjet

Brenda skedarit scaffolding.less , ne vendosim stilet bazë të shfaqjes globale, tipografisë dhe lidhjeve. Konkretisht ne:

  • Hiqni kufirin në 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

Rivendosni nëpërmjet Normalize

Që nga Bootstrap 2, rivendosja tradicionale e CSS ka evoluar për të përdorur elementë nga Normalize.css , një projekt nga Nicolas Gallagher që fuqizon gjithashtu HTML5 Boilerplate .

Rivendosja e re mund të gjendet ende në reset.less , por me shumë elementë të hequr për shkurtësi dhe saktësi.

Sistemi i parazgjedhur i rrjetit me 12 kolona me një kthesë të përgjegjshme

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

Sistemi i parazgjedhur i rrjetit i ofruar në Bootstrap përdor 12 kolona që paraqiten në gjerësi 724px, 940px (parazgjedhja pa përfshirë CSS reaguese) dhe 1170px. Nën portat e pamjes 767 px, kolonat bëhen fluide dhe grumbullohen vertikalisht.

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

Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 12 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit.


Kompensimi i kolonave

4
4 kompensim 4
3 kompensim 3
3 kompensim 3
8 kompensim 4 
  1. <div class = "rresht" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Kolonat e folesë

Me sistemin e rrjetit statik (jo të lëngshëm) në Bootstrap, foleja është e lehtë. Për të futur përmbajtjen tuaj, thjesht shtoni një të re .rowdhe grup kolonash brenda një kolone .span*ekzistuese ..span*

Shembull

Rreshtat e mbivendosur duhet të përfshijnë një grup kolonash që shtohen me numrin e kolonave të saj mëmë. Për shembull, dy kolona të mbivendosura .span3duhet të vendosen brenda një .span6.

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

Sistemi i rrjetit të lëngjeve 12 kolona të përgjegjshme, të bazuara në përqindje

Kolonat e lëngut

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

Përqindje, jo pikselë

Sistemi i rrjetit fluid përdor përqindjet për gjerësinë e kolonave në vend të pikselëve fiks. Ai gjithashtu ka të njëjtat ndryshime reaguese si sistemi ynë i rrjetit fiks, duke siguruar proporcione të duhura për rezolucionet dhe pajisjet kryesore të ekranit.

Rreshtat e lëngshëm

Bëni çdo rresht fluid thjesht duke ndryshuar .rownë .row-fluid. Kolonat qëndrojnë ekzaktësisht të njëjta, duke e bërë shumë të thjeshtë kalimin midis paraqitjeve fikse dhe të lëngshme.

Markup

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

Folezimi i lëngjeve

Folezimi me rrjete fluide është paksa i ndryshëm: numri i kolonave të mbivendosur nuk duhet të përputhet me prindin. Në vend të kësaj, kolonat tuaja rivendosen në çdo nivel sepse çdo rresht zë 100% të kolonës mëmë.

Lëngu 12
Lëngu 6
Lëngu 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Niveli 1 i kolonës
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Niveli 2 </div> 
  6.       <div class = "span6" > Niveli 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Përshtatja e rrjetit

E ndryshueshme Vlera e paracaktuar Përshkrim
@gridColumns 12 Numri i kolonave
@gridColumnWidth 60 px Gjerësia e secilës kolonë
@gridGutterWidth 20 px Hapësira negative midis kolonave

Variablat në LESS

Të integruara në Bootstrap janë një pjesë e vogël e variablave për personalizimin e sistemit të paracaktuar të rrjetit 940px, të dokumentuara më sipër. Të gjitha variablat për rrjetin ruhen në variabla.më pak.

Si të personalizoni

Modifikimi i rrjetit nënkupton ndryshimin e tre @grid*variablave dhe rikompilimin e Bootstrap. Ndryshoni variablat e rrjetit në variablat.less dhe përdorni një nga katër mënyrat e dokumentuara për të ripërpiluar . Nëse po shtoni më shumë kolona, ​​sigurohuni që të shtoni CSS për ato në grid.less.

Qëndrimi i përgjegjshëm

Përshtatja e rrjetit funksionon vetëm në nivelin e paracaktuar, rrjetin 940px. Për të ruajtur aspektet reaguese të Bootstrap, do t'ju duhet gjithashtu të personalizoni rrjetet në responsive.less.

Layouts Modelet bazë për të krijuar uebfaqe

Paraqitje fikse

Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div class="container">.

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

Paraqitja e lëngshme

<div class="container-fluid">jep strukturë fleksibël të faqes, gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. Është i shkëlqyeshëm për aplikacionet dhe dokumentet.

  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>

Dizajni i përgjegjshëm Pyetjet e medias për pajisje dhe rezolucione të ndryshme

Pajisjet reaguese

Cfare bejne ata

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 dhe rezolucione të ndryshme të ekranit. Ja çfarë përfshihet:

Etiketa Gjerësia e paraqitjes Gjerësia e kolonës Gjerësia e ulluqit
Telefonat inteligjentë 480px dhe më poshtë Kolona të lëngshme, pa gjerësi fikse
Telefonat inteligjentë në tableta 767px dhe më poshtë Kolona të lëngshme, pa gjerësi fikse
Tableta portrete 768px dhe më lart 42 px 20 px
E paracaktuar 980px e lart 60 px 20 px
Ekran i madh 1200px e lart 70 px 30 px

Kërkon meta etiketë

Për të siguruar që pajisjet të shfaqin faqet e përgjegjshme siç duhet, përfshini meta etiketën e portit të pamjes.

  1. <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >

Duke përdorur pyetjet e medias

Bootstrap nuk i përfshin automatikisht këto pyetje mediatike, por kuptimi dhe shtimi i tyre është shumë i lehtë dhe kërkon konfigurim minimal. Ju keni disa opsione për të përfshirë veçoritë e përgjegjshme të Bootstrap:

  1. Përdorni versionin reagues të përpiluar, bootstrap-responsive.css
  2. Shto @import "responsive.less" dhe rikompiloje Bootstrap
  3. Modifiko dhe rikompiloje responsive.less si një skedar të veçantë

Pse të mos e përfshini vetëm atë? Të themi të vërtetën, 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ë.

  1.   /* Telefonat me peizazh dhe poshtë */
  2.   @media ( gjerësia maksimale : 480 px ) { ... }     
  3.  
  4.   /* Telefon peizazh në tablet portret */
  5.   @media ( gjerësia maksimale : 767 px ) { ... }     
  6.  
  7.   /* Tableti portret në peizazh dhe desktop */
  8.   @media ( gjerësia min .: 768 px ) dhe ( gjerësia maksimale : 979 px ) { ... }        
  9.  
  10.   /* Desktop i madh */
  11.   @media ( min - gjerësia : 1200 px ) { ... }

Klasat e shërbimeve të përgjegjshme

Cilat janë ato

Për zhvillim më të shpejtë miqësor për celularin, përdorni këto klasa bazë të shërbimeve për shfaqjen dhe fshehjen e përmbajtjes sipas pajisjes.

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.

Për shembull, mund të shfaqësh një <select>element për navigimin në paraqitjet celulare, por jo në tableta ose desktop.

Klasat mbështetëse

Këtu është paraqitur një tabelë e klasave që ne mbështesim dhe efekti i tyre në një paraqitje të caktuar të pyetjeve të medias (etiketuar sipas pajisjes). Ato mund të gjenden në responsive.less.

Klasa Telefonat480px dhe më poshtë Tabletat767px dhe më poshtë Desktopët768px dhe më lart
.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

Rast testimi

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