Állványzat · Bootstrap magyarul

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.

<!DOCTYPE html>
<html lang="en">
  ...
</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.

É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.

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).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</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

3 eltolás 2

3 eltolás 1

3 eltolás 2

6 eltolás 3

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</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

<div class="row">
  <div class="span9">
    1. szintű oszlop
    <div class="row">
      <div class="span6">2. szint</div>
      <div class="span3">2. szint</div>
    </div>
  </div>
</div>

É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.

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.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</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 eltolás 4

3 eltolás 3

6 eltolás 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</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

<div class="row-fluid">
  <div class="span12">
    Folyadék 12
    <div class="row-fluid">
      <div class="span6">
        Folyadék 6
        <div class="row-fluid">
          <div class="span6">6. folyadék</div>
          <div class="span6">6. folyadék</div>
        </div>
      </div>
      <div class="span6">6. folyadék</div>
    </div>
  </div>
</div>

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.

<test>
  <div class="container">
    ...
  </div>
</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.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar tartalom-->
    </div>
    <div class="span10">
      <!--Testtartalom-->
    </div>
  </div>
</div>

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.

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

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

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

/* Nagy asztal */
@média (min. szélesség: 1200 képpont) { ... }

/* Álló táblagépről fekvőre és asztalra */
@media (min. szélesség: 768 képpont) és (max. szélesség: 979 képpont) { ... }

/* Fekvő telefonról álló táblagépre */
@media (max. szélesség: 767 képpont) { ... }

/* Fekvő telefonok és le */
@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	Telefonok 767px és kisebb	Táblagépek 979 képpont és 768 képpont között	Alapértelmezett asztali számítógépek
`.visible-phone`	Látható	Rejtett	Rejtett
`.visible-tablet`	Rejtett	Látható	Rejtett
`.visible-desktop`	Rejtett	Rejtett	Látható
`.hidden-phone`	Rejtett	Látható	Látható
`.hidden-tablet`	Látható	Rejtett	Látható
`.hidden-desktop`	Látható	Látható	Rejtett

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
Asztal ✔ Asztal

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
Asztal ✔ Asztal

Állvány

Általános beállítások