Bootstrap 3: A rácsrendszer és a média lekérdezések

Mindannyian ismerjük a Bootstrap-ot, mivel ez a legnépszerűbb nyílt forráskódú webes keretrendszer. Mark Ottonak és Jacob Thortonnak sikerült létrehoznia az egyik legerősebb CSS keretrendszert, amelyet valaha terveztek.

Amikor a Bootstrap 3-t kiadták, a legérdekesebb változás a rácsrendszerek különbsége volt. A Bootstrap 2 két különböző méretű böngészőt (asztali számítógép, majd mobil) tartalmaz. A Bootstrap 3 rácsrendszer segítségével különböző rácsokat hozhatsz létre a böngészőméret alapján. Hasonló tendencia figyelhető meg a keret legfrissebb verziójában - az Alpha Release a Bootstrap 4 kiadásában.

Ha a cikket inkább angol nyelven tekintenéd meg, csak kattints ide: Bootstrap 3: The Grid System and Media Queries

Bootstrap 3 oszlopok példa

Ezt egy kicsit nehéz lehet megérteni elsőre, ezért itt egy példa. Tegyük fel, olyan webhelyet szeretnél, amely az alábbiakkal rendelkezik:

• 1 oszlop extra kis eszközökön
• 2 oszlop kis és közepes eszközökön
• 4 oszlop nagy eszközökön

Mivel a rácsrendszer most a mobileszközökről tűnik fel, ez a kód fog megjelenni.

<div class="row">
    <div class="col-sm-6 col-lg-3">
       Ez a rácsunk része.
    </div>
    <div class="col-sm-6 col-lg-3">
        Ez a rácsunk része.
    </div>
    <div class="col-sm-6 col-lg-3">
        Ez a rácsunk része.
    </div>    
    <div class="col-sm-6 col-lg-3">
        Ez a rácsunk része.
    </div>    
</div>

Nem kell semmit definiálni az extra kis eszközökhöz, mivel az alapértelmezett egy oszlop. Meg kell határoznunk egy rácsméretet a kis eszközök számára, de nem a közepes eszközök esetében. Ez azért van, mert a rács kaszkad. Tehát, ha meghatározod a méretet sm-ben, akkor az lesz a sm, md és lg rácsmérete. Megmagyarázzuk a különböző rácsméreteket és azok létrehozásának módját, majd példákat mutatunk be.

Rácsméretek

Ez a legjobb része az új rácsrendszernek. A webhelyen 4 különböző böngésző méretű rács jelenhet meg. Az alábbiakban részletezzük a különböző méreteket.

<div class="spacer"></div>
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre><span class="sumo_twilighter_highlighted twilighter-299735e9">.</span><span class="sumo_twilighter_highlighted twilighter-299735e9">col</span><span class="sumo_twilighter_highlighted twilighter-299735e9">-</span><span class="sumo_twilighter_highlighted twilighter-299735e9">xs</span><span class="sumo_twilighter_highlighted twilighter-299735e9">-</span><span class="sumo_twilighter_highlighted twilighter-299735e9">$	Extra Small	Phones Less than 768px<span class="sumo_twilighter_shares">1</span></span>
<span class="sumo_twilighter_highlighted twilighter-218fab37">.</span><span class="sumo_twilighter_highlighted twilighter-218fab37">col</span><span class="sumo_twilighter_highlighted twilighter-218fab37">-</span><span class="sumo_twilighter_highlighted twilighter-218fab37">sm</span><span class="sumo_twilighter_highlighted twilighter-218fab37">-</span><span class="sumo_twilighter_highlighted twilighter-218fab37">$	Small Devices	Tablets 768px and Up
</span><span class="sumo_twilighter_highlighted twilighter-218fab37">.</span><span class="sumo_twilighter_highlighted twilighter-218fab37">col</span><span class="sumo_twilighter_highlighted twilighter-218fab37">-</span><span class="sumo_twilighter_highlighted twilighter-218fab37">md</span><span class="sumo_twilighter_highlighted twilighter-218fab37">-</span><span class="sumo_twilighter_highlighted twilighter-218fab37">$	Medium Devices	Desktops 992px and Up<span class="sumo_twilighter_shares">1</span></span>
.col-lg-$	Large Devices	Large Desktops 1200px and Up</pre>
</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>

A hivatalos Bootstrap docs sokkal átfogóbb megértést nyújt a hálózat működéséről. Vess egy pillantást azokra, hogy pontosabb áttekintést kapj az oszlopméretekről, az elválasztóméretekről, a maximális oszlopméretekről és a teljes webhely szélességéről a böngészőméret alapján.

A Bootstrap Grid alapértelmezett méretei

Néha média lekérdezéseket kell használni ahhoz, hogy a webhely úgy működjön, ahogyan azt szeretnénk. Az alapértelmezett rácsméretek ismerete elengedhetetlen a Bootstrap rács bővítéséhez. Gyors tippet írtunk az alapértelmezett méretek megjelenítéséhez, így nézzük meg, hogy szükség van-e a Bootstrap média lekérdezésekre és töréspontokra.

Bootstrap 3 Média lekérdezés töréspontok

A Bootstrap 3 egy mobil-első front-end keret. A média lekérdezések helyes sorrendjét adtam meg, de az alján szerepeltettem a nem mobil első töréspontokat is abban az esetben, ha valaki nem szereti a mobil-első módszertant, mivel technikailag mindkettő működni fog. Min-szélesség: Mindenre vonatkozik, ami nagyobb vagy egyenlő az adott értékkel. Max-szélesség: Mindenre utal, ami kevesebb vagy egyenlő a megadott értékkel.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){
}

Bootstrap 2.3.2 Média lekérdezés töréspontok

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px){
}
@media only screen and (max-width : 979px){
}
@media only screen and (max-width : 767px){
}
@media only screen and (max-width : 480px){
}
@media only screen and (max-width : 320px){
}

Reszponzív segédprogramok

Ugyanúgy, mint a Bootstrap 2, a Bootstrap 3 reszponzív segédprogramokat nyújt a böngésző méretének alapján történő elrejtésére és megjelenítésére. Ez is segít nekünk a rácsrendszerünk meghatározásában.

.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Ez segít, mert képesek vagyunk megjeleníteni bizonyos elemeket a méret alapján. Példáinkban egy extra oldalsáv jelenik meg a nagy asztali gépeken.

Példák

Íme néhány példa azokra a rácsokra, amelyeket létrehozhatsz. Végigmegyünk néhány olyan alapvető webhelyen, amelyeket egyesek szeretnének, és megmutatjuk, milyen könnyű az oldal felépítése a Bootstrap 3 hálózattal.

Egyszerű: Nagyméretű asztali számítógépek kontra mobiltelefonok

Tegyük fel, hogy a webhelynek 1 oszlopra van szüksége extra kicsi (telefonos) és kicsi (táblagépes) eszközökön, 2 oszlop közepes (közepes méretű) eszközökön és 4 oszlop nagy (asztali) eszközökön.

Itt van a példa kódja:

<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
</div>

Középfokú: Extra oszlop megjelenítése a nagy asztali gépeken

Ez egy érdekes példa, amellyel az új rács kitűnik. Tegyük fel, hogy van olyan webhelyed, amelynek van egy oldalsávja és egy fő tartalma. És az extra kis eszközökhöz szeretnél egy oszlopot, és fő tartalmat, alatta feltöltött oldalsávval.

<div class="row">
<div class="col-sm-9 col-lg-6 text-danger">I am the main content.</div>
<div class="col-sm-3 text-warning">I am the main sidebar.</div>
<div class="col-lg-3 visible-lg text-success">I am the secondary sidebar that only shows up on LARGE devices.</div>
</div>

Haladó: Különböző rács minden méretben

Ez egy bonyolultabb példa. Extra kis eszközök esetén 2 oszlopot akarunk. Kisebb eszközök esetén 3 oszlopot akarunk. Közepes eszközök esetén 4 oszlopot akarunk. Nagyméretű eszközök esetén 6 oszlopot ( csak nagy eszközökön jelenik meg).

<div class="row"></div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">I'm content!</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">I'm content!</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">I'm content!</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">I'm content!</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">I'm content!</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">I'm content only visible on large devices!</div>
</div>
<div class="spacer"></div>

Láthatod, hogy amint a böngésző mérete kisebb lesz, az oszlopok elkezdenek formát ölteni.

Ez rácsosztikus!

Láthatod, mennyire egyszerűen épülnek fel a komplex és dinamikus webhelyek a Bootstrap 3 rács segítségével. A mobil 2 oszlopos webhelyektől az elemek komplex elrejtéséig és megjelenítéséig a nagy asztali számítógépekig, bármilyen típusú webhelyet felépíthetsz. Remélhetőleg ezek a példák ötletet adnak neked az új rácsrendszer rugalmasságáról és az összes nagyszerű dologról, amit létrehozhatsz.

Ha már van egy HTML-alapú webhelyed meglévő admin panellel, érdemes áttekintened Bootstrap Admin témáinkat. Ezek a bootstrap témák bemutatják a Bootstrap 3 teljes erejét!