Bootstrap

Állvány

A Bootstrap egy érzékeny, 12 oszlopos rácsra épül. Ezen a rendszeren alapuló fix és fluid szélességű elrendezéseket is beépítettünk.

Globális stílusok a CSS-visszaállításhoz, a tipográfiához és a hivatkozásokhoz

HTML5 doctype szükséges

A Bootstrap olyan HTML-elemeket és CSS-tulajdonságokat használ, amelyekhez a HTML5-dokumentumtípus használata szükséges. Ügyeljen arra, hogy a projektben minden Bootstrapped oldal elején szerepeljen.

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

Tipográfia és linkek

A scaffolding.less fájlon belül beállítjuk az alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat. Konkrétan mi:

  • Távolítsa el a margót a testen
  • Állítsa background-color: white;be abody
  • Használja a @baseFontFamily, @baseFontSize, és @baseLineHeightattribútumokat tipográfiai alapként
  • Állítsa be a globális link színét a következőn keresztül @linkColor, és csak a hivatkozás aláhúzásokat alkalmazza:hover

Visszaállítás a Normalizálással

A Bootstrap 2-től kezdve a hagyományos CSS-visszaállítás úgy fejlődött, hogy felhasználja a Normalize.css elemeit, Nicolas Gallagher projektjét, amely a HTML5 Boilerplate -t is működteti .

Az új visszaállítás továbbra is megtalálható a reset.less fájlban , de sok elemet eltávolítottak a rövidség és a pontosság érdekében.

Alapértelmezett rácsrendszer, 12 oszlop, érzékeny csavarral

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

A Bootstrap alapértelmezett rácsrendszere 12 oszlopot használ , amelyek 724 képpont, 940 képpont (alapértelmezett reszponzív CSS nélkül) és 1170 képpont szélességben jelennek meg. A 767 képpontos nézetablak alatt az oszlopok folyékonyak lesznek, és függőlegesen egymásra helyezkednek.

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

Amint az itt látható, egy alapelrendezés két "oszlopból" hozható létre, amelyek mindegyike a rácsrendszerünk részeként meghatározott 12 alaposzlop közül többen átível.


Oszlopok eltolása

4
4 eltolás 4
3 eltolás 3
3 eltolás 3
8 eltolás 4 
  1. <div class = "sor" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Oszlopok egymásba ágyazása

A Bootstrap statikus (nem folyékony) rácsrendszerével a beágyazás egyszerű. A tartalom beágyazásához adjon hozzá egy újat .rowés .span*egy oszlopkészletet egy meglévő .span*oszlopon belül.

Példa

A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összeadják a szülő oszlop oszlopainak számát. Például két egymásba ágyazott .span3oszlopot kell elhelyezni egy .span6.

Az oszlop 1. szintje
2. szint
2. szint 
  1. <div class = "sor" > 
  2.   <div class = "span6" > 
  3.     1. szintű oszlop
  4.     <div class = "sor" > 
  5.       <div class = "span3" > 2. szint </div> 
  6.       <div class = "span3" > 2. szint </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid rácsrendszer 12 érzékeny, százalék alapú oszlop

Folyadékoszlopok

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

Százalék, nem pixel

A folyékony rácsrendszer az oszlopszélességekhez százalékokat használ rögzített képpontok helyett. Ugyanazokkal az érzékeny variációkkal rendelkezik, mint a fix rácsrendszerünk, biztosítva a megfelelő arányokat a kulcsfontosságú képernyőfelbontásokhoz és eszközökhöz.

Folyékony sorok

Bármilyen sort gördülékenyebbé tehet, egyszerűen váltson .rowa következőre .row-fluid. Az oszlopok ugyanazok maradnak, ami rendkívül egyszerűvé teszi a fix és a folyékony elrendezések közötti váltást.

Jelölés

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

Folyadék fészkelő

A folyékony rácsokkal való beágyazás egy kicsit más: a beágyazott oszlopok számának nem kell egyeznie a szülővel. Ehelyett az oszlopok minden szinten visszaállnak, mert minden sor a szülőoszlop 100%-át foglalja el.

Folyadék 12
Folyadék 6
Folyadék 6 
  1. <div class = "sor-fluid" > 
  2.   <div class = "span12" > 
  3.     Az oszlop 1. szintje
  4.     <div class = "sor-fluid" > 
  5.       <div class = "span6" > 2. szint </div> 
  6.       <div class = "span6" > 2. szint </div> 
  7.     </div>
  8.   </div>
  9. </div>

Rács testreszabása

Változó Alapértelmezett érték Leírás
@gridColumns 12 Oszlopok száma
@gridColumnWidth 60 képpont Minden oszlop szélessége
@gridGutterWidth 20 képpont Negatív térköz az oszlopok között

Változók LESS-ben

A Bootstrapbe beépített néhány változó található az alapértelmezett 940 képpontos rácsrendszer testreszabásához, amelyeket fentebb dokumentáltunk. A rács összes változója változókban van tárolva.kevesebb.

A testreszabás módja

A rács módosítása a három @grid*változó megváltoztatását és a Bootstrap újrafordítását jelenti. Módosítsa a rácsváltozókat a változók.lessben, és használja a négy dokumentált módszer egyikét az újrafordításhoz . Ha több oszlopot ad hozzá, ügyeljen arra, hogy a grid.lessben lévőkhöz adja hozzá a CSS-t.

Reagáló készség

A rács testreszabása csak az alapértelmezett szinten, a 940 képpontos rácson működik. A Bootstrap reszponzív jellemzőinek fenntartásához a responsive.less rácsjait is testre kell szabnia.

Elrendezések Alapvető sablonok weboldalak létrehozásához

Fix elrendezés

Az alapértelmezett és egyszerű, 940 képpont széles, középre igazított elrendezés szinte minden webhelyhez vagy oldalhoz, amelyet egyetlen <div class="container">.

  1. <test>
  2.   <div class = "tároló" > 
  3.     ...
  4.   </div>
  5. </body>

Folyékony elrendezés

<div class="container-fluid">rugalmas oldalszerkezetet, minimális és maximális szélességet, valamint bal oldali oldalsávot biztosít. Alkalmazásokhoz és dokumentumokhoz nagyszerű.

  1. <div class = "container-fluid" > 
  2.   <div class = "sor-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar tartalom-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Testtartalom-->
  8.     </div>
  9.   </div>
  10. </div>

Reszponzív tervezés Médialekérdezések különféle eszközökhöz és felbontásokhoz

Érzékeny eszközök

Mit csinálnak

A médialekérdezések lehetővé teszik az egyéni CSS-t számos feltétel alapján – arányok, szélességek, megjelenítési típus stb. –, de általában a min-widthés köré fókuszálnak max-width.

  • Módosítsa az oszlop szélességét a rácsunkban
  • Lebegtetés helyett rakja egymásra az elemeket, ahol szükséges
  • Méretezze át a címsorokat és a szöveget, hogy jobban megfeleljen az eszközöknek

Használja a médialekérdezéseket felelősségteljesen és csak a mobilközönség kezdeteként. Nagyobb projekteknél vegye figyelembe a dedikált kódbázisokat, és ne a médialekérdezések rétegeit.

Támogatott eszközök

A Bootstrap egy maroknyi médialekérdezést támogat egyetlen fájlban, hogy a projektjeit megfelelőbbé tegye a különböző eszközökön és képernyőfelbontásokon. A következőket tartalmazza:

Címke Elrendezési szélesség Oszlop szélesség Az ereszcsatorna szélessége
Okostelefonok 480 képpont és az alatti Folyadékoszlopok, nincs rögzített szélesség
Okostelefonokról táblagépekre 767 képpont és az alatti Folyadékoszlopok, nincs rögzített szélesség
Portré táblagépek 768 képpont és nagyobb 42 képpont 20 képpont
Alapértelmezett 980 képpont és feljebb 60 képpont 20 képpont
Nagy kijelző 1200 képpont és több 70 képpont 30 képpont

Metatag szükséges

Annak érdekében, hogy az eszközök megfelelően jelenítsék meg az adaptív oldalakat, vegye fel a nézetablak metacímkéjét.

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

A médialekérdezések használata

A Bootstrap nem tartalmazza automatikusan ezeket a médialekérdezéseket, de megértése és hozzáadása nagyon egyszerű, és minimális beállítást igényel. Néhány lehetőség közül választhat a Bootstrap reszponzív funkcióinak beépítéséhez:

  1. Használja a lefordított reszponzív verziót, a bootstrap-responsive.css-t
  2. Adja hozzá az @import "responsive.less" kifejezést, és fordítsa újra a Bootstrapet
  3. A responsive.less módosítása és újrafordítása külön fájlként

Miért nem csak belefoglalja? Az igazat megvallva nem kell mindennek reagálnia. Ahelyett, hogy a fejlesztőket arra ösztönöznénk, hogy távolítsák el ezt a funkciót, úgy gondoljuk, a legjobb, ha engedélyezzük.

  1.   /* Fekvő telefonok és le */
  2.   @media ( max - szélesség : 480 képpont ) { ... }     
  3.  
  4.   /* Fekvő telefonról álló táblagépre */
  5.   @media ( max . szélesség : 767px ) { ... }     
  6.  
  7.   /* Álló táblagépről fekvőre és asztalra */
  8.   @media ( min - szélesség : 768 képpont ) és ( max - szélesség : 979 képpont ) { ... }        
  9.  
  10.   /* Nagy asztal */
  11.   @media ( min - szélesség : 1200 képpont ) { ... }

Reszponzív közüzemi osztályok

Kik ők

A gyorsabb mobilbarát fejlesztés érdekében használja ezeket az alapvető segédprogram-osztályokat a tartalom eszközönkénti megjelenítéséhez és elrejtéséhez.

Mikor kell használni

Korlátozottan használja, és ne hozzon létre egy webhely teljesen eltérő verzióit. Ehelyett használja őket az egyes eszközök bemutatásának kiegészítésére.

Például megjeleníthet egy <select>elemet a navigációhoz mobil elrendezéseken, de nem táblagépeken vagy asztali számítógépeken.

Támogató osztályok

Itt látható egy táblázat az általunk támogatott osztályokról és azok hatásáról egy adott médialekérdezési elrendezésre (eszközönként címkézve). Megtalálhatóak ben responsive.less.

Osztály Telefonok480 képpont és az alatti Tabletek767 képpont és az alatti Asztali számítógépek768 képpont és nagyobb
.visible-phone Látható
.visible-tablet Látható
.visible-desktop Látható
.hidden-phone Látható Látható
.hidden-tablet Látható Látható
.hidden-desktop Látható Látható

Próbaper

A fenti osztályok teszteléséhez méretezze át böngészőjét, vagy töltse be a különböző eszközöket.

Látható a...

A zöld pipák azt jelzik, hogy az osztály látható az aktuális nézetablakban.

  • Telefon✔ Telefon
  • Tabletta✔ Tabletta
  • Asztali✔ Asztali

Rejtett...

Itt a zöld pipák azt jelzik, hogy az osztály el van rejtve az aktuális nézetablakban.

  • Telefon✔ Telefon
  • Tabletta✔ Tabletta
  • Asztali✔ Asztali