Bootstrap

Állvány

A Bootstrap érzékeny, 12 oszlopos rácsokra, elrendezésekre és összetevőkre épül.

Fel a fejjel! Ezek a dokumentumok a 2.3.2-es verzióhoz készültek, amely hivatalosan már nem támogatott. Tekintse meg a Bootstrap legújabb verzióját!

Általános beállítások

HTML5 doctype szükséges

A Bootstrap bizonyos HTML-elemeket és CSS-tulajdonságokat használ, amelyekhez a HTML5-dokumentumtípus használata szükséges. Tegye bele minden projektje elejébe.

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

Tipográfia és linkek

A Bootstrap alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat állít be. Konkrétan mi:

  • Távolítsa marginel 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

Ezek a stílusok az állványzaton belül találhatók.kevesebb .

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

A Bootstrap 2-vel a régi visszaállítási blokkot felhagyták a Normalize.css javára, Nicolas Gallagher és Jonathan Neal projektjeként, amely a HTML5 Boilerplate -t is működteti . Bár a Normalize nagy részét a reset.less fájlunkban használjuk , eltávolítottunk néhány elemet kifejezetten a Bootstrap számára.

Alapértelmezett rácsrendszer

Élő rács példa

Az alapértelmezett Bootstrap rácsrendszer 12 oszlopot használ , így egy 940 képpont szélességű tárolót hoz létre anélkül, hogy az érzékeny funkciókat engedélyeznék. A reszponzív CSS-fájl hozzáadásával a rács 724 képpont és 1170 képpont szélességűre alkalmazkodik, a nézettől függően. A 767 képpontos nézetablak alatt az oszlopok folyékonyak lesznek, és függőlegesen egymásra helyezkednek.

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

Alapszintű grid HTML

Egy egyszerű kétoszlopos elrendezéshez hozzon létre egyet, .rowés adja hozzá a megfelelő számú .span*oszlopot. Mivel ez egy 12 oszlopból álló rács, mindegyik .span*a 12 oszlop egy részét fedi le, és mindig 12-t kell hozzáadnia minden sorhoz (vagy a szülő oszlopok számához).

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

Ebben a példában a .span4és van .span8, ami összesen 12 oszlopot és egy teljes sort jelent.

Oszlopok eltolása

Oszlopok mozgatása jobbra .offset*osztályok használatával. Minden osztály megnöveli egy oszlop bal margóját egy teljes oszloppal. Például négy oszlop felett .offset4mozog ..span4

4
3 eltolás 2
3 eltolás 1
3 eltolás 2
6 eltolás 3 
  1. <div class = "sor" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Oszlopok egymásba ágyazása

Ha be szeretné ágyazni a tartalmat az alapértelmezett rácsba, adjon hozzá egy új .rowoszlopkészletet .span*egy meglévő .span*oszlophoz. A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összeadják a szülő oszlop oszlopainak számát.

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

Folyadékrács rendszer

Élő folyadék rács példa

A folyékony rácsrendszer a pixelek helyett százalékokat használ az oszlopszélességekhez. Ugyanazokkal a reszponzív képességekkel rendelkezik, mint a fix grid rendszerünk, így megfelelő arányokat biztosít a kulcsfontosságú képernyőfelbontásokhoz és eszközökhöz.

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

Alapvető rugalmas grid HTML

Tegye bármelyik sort „folyékony”-ra a .rowkövetkezőre változtatva .row-fluid. Az oszloposztályok változatlanok maradnak, így könnyen lehet váltani a rögzített és a folyékony rácsok között.

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

Folyadék beszámítás

Ugyanúgy működik, mint a rögzített rácsrendszer .offset*eltolása: adjon hozzá bármely oszlophoz, hogy ennyi oszloppal eltolja.

4
4 eltolás 4
3 eltolás 3
3 eltolás 3
6 eltolás 6 
  1. <div class = "sor-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Folyadék fészkelő

A folyékony rácsok eltérő módon használják a beágyazást: minden beágyazott oszlopszintnek legfeljebb 12 oszlopot kell tartalmaznia. Ennek az az oka, hogy a fluid rács százalékokat használ, nem pixeleket a szélességek beállításához.

Folyadék 12
Folyadék 6
Folyadék 6
Folyadék 6
Folyadék 6 
  1. <div class = "sor-fluid" > 
  2.   <div class = "span12" > 
  3.     Folyadék 12
  4.     <div class = "sor-fluid" > 
  5.       <div class = "span6" > 
  6.         Folyadék 6
  7.         <div class = "sor-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>

Elrendezések

Fix elrendezés

Közös, rögzített szélességű (és opcionálisan érzékeny) elrendezést biztosít, amely csak <div class="container">szükséges.

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

Folyékony elrendezés

Hozzon létre egy gördülékeny, kétoszlopos oldalt <div class="container-fluid">az alkalmazásokkal és dokumentumokkal.

  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 dizájn

Reszponzív funkciók engedélyezése

Kapcsolja be a reszponzív CSS-t a projektben úgy, hogy a megfelelő metacímkét és további stíluslapot <head>helyezi el a dokumentumban. Ha a Bootstrapet a Testreszabás oldalról fordította le, akkor csak a metacímkét kell megadnia.

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

Fel a fejjel!A Bootstrap alapértelmezés szerint jelenleg nem tartalmaz reszponzív szolgáltatásokat, mivel 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, a legjobbnak tartjuk, ha szükség szerint engedélyezzük.

A reszponzív Bootstrapről

Érzékeny eszközök

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
Nagy kijelző 1200 képpont és több 70 képpont 30 képpont
Alapértelmezett 980 képpont és feljebb 60 képpont 20 képpont
Portré táblagépek 768 képpont és nagyobb 42 képpont 20 képpont
Telefonok táblagépek 767 képpont és az alatti Folyadékoszlopok, nincs rögzített szélesség
Telefonok 480 képpont és az alatti Folyadékoszlopok, nincs rögzített szélesség 
  1. /* Nagy asztal */
  2. @media ( min - szélesség : 1200 képpont ) { ... }     
  3.  
  4. /* Álló táblagépről fekvőre és asztalra */
  5. @media ( min - szélesség : 768 képpont ) és ( max - szélesség : 979 képpont ) { ... }        
  6.  
  7. /* Fekvő telefonról álló táblagépre */
  8. @media ( max . szélesség : 767px ) { ... }     
  9.  
  10. /* Fekvő telefonok és le */
  11. @media ( max - szélesség : 480 képpont ) { ... }

Reszponzív közüzemi osztályok

A gyorsabb mobilbarát fejlesztés érdekében használja ezeket a segédprogram-osztályokat a tartalom eszközönkénti megjelenítésére és elrejtésére. Az alábbiakban egy táblázat található az elérhető osztályokról és ezek 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 Telefonok767 képpont és az alatti Tabletek979 képpont és 768 képpont között Asztali számítógépekAlapértelmezett
.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ó

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. A reagáló segédprogramokat nem szabad táblázatokkal használni, ezért nem támogatottak.

Reszponzív közművek teszteset

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