Carousel bootstrap példa a használatra és a stílus a csúszka
Helló Továbbra szétszedni a keret Bootstrap. Hogyan kell telepíteni és használni az alapokat a keret írtam a poszt, „Hogyan működik a Bootstrap». Ebben a cikkben tartjuk a csúszkát, hogy betöltse ezt hívják Carousel (Körhinta). A bootstrap körhinta jelentős előnye van a többihez képest: alkalmazkodóképesség mobileszközök, alapértelmezés szerint, ha az egérrel rámutat át a körforgalmon, majd módosítsa a dia megáll, amíg a felhasználó eltávolítja az egérmutatót a lemezeket lehet helyezni bármilyen HTML-kódot. A csúszka a keretrendszer által biztosított, kész ispolzovaniyui a legtöbb esetben nem igényel jelentős szerkesztést.
HTML-kód a csúszka néz ki:
Ebben a példában nem írtam CSS stílusokat általában vett csak HTML-kód dokumentálása hivatalos honlapján a keret Bootstrap «getbootstrap.com» és kismértékben módosul. megváltoztatta az azonosító «id» ő «testCarousel» a körhinta. Érdemes megjegyezni, hogy a «id» körhinta továbbítják a kijelzők és a navigációs nyilak. Vessünk egy közelebbi pillantást a HTML-kódot.
A tartály az osztályban «tétel» tartalmazza a fő tartalma a dia, akkor lehet, hogy csak egy képet, és mindent, és lehet bármilyen sor HTML-címkék a képet, vagy sem. Az ilyen edények lehetnek sokan, de a számnak meg kell egyeznie a számos mutató, ha a használt mutatók a körhinta. A konténer az osztály «körhinta-feliratot» további bejegyzések, amelyek őt a tartalom automatikusan igazodik és formázni.
akkor távolítsa el az összes felesleges, és hagyja csak, ami szükséges a körhinta HTML-kód, például, hogy távolítsa el a mutatók és hagyja csak a nyíl navigáció, vagy fordítva, egy slide - távolítsa el a további leírás és hagyja csak a kép, vagy távolítsa el a képet, a háttér, és hagyja a szöveget bármelyik gombot .
Class «aktív» meghatároz egy dia jelenik meg először, alapértelmezésben van rendelve az első indikátor és csúszda. Ha meg kell változtatni az első dia jelenik meg, de ez nem csere a blokkok dia, meg kell rendelni egy osztály «aktív» és mutatók, valamint a csúszda anélkül, hogy elszakadna a sorozatot. Fontos megjegyezni, hogy a számozás az indikátorok nulláról indul, vagyis a számla, és csúsztassa a kijelző lesz, például a negyedik, és az értéke «data-slide-to» a kijelző lesz 3.
A navigációs körhinta még könnyebb. Minden kapcsolat van rendelve egy osztály gombot, amely elvezet az előző osztály, egy osztály a «bal» és attribútum «adatok csúszda» értékkel «előző», a gomb, amely elvezet a következő dia, az osztály «jobb» és attribútum «data-dia »a« következő érték”. Bent a linkeket a tag «span» maguk nyilak (nyilak) a bal és a jobb oldalon, a nyilak levonni ikonochnogo font Bootstrap.
Styling Bootstrap csúszka
Stilizál körhinta lehet, amit szeret. Vegyük az előző példát, hogy egy képet, és megjeleníti adjunk címet, és a gomb felvázolja saját CSS stílusokat.
Szerkesztés után HTML-kód annyira.
Erre a kódot hozzá a saját stílusát.
Miután a változások körhinta néz ki.
Elfogadom, minden elég egyszerű. Ha szükséges, akkor lehet, hogy a háttérképet a dia, a helymeghatározás bármely eleme a körhinta tartály általában lehet megvalósítani minden, ami szükséges egy adott projektben.
Ezen én befejezi, és a következő cikkben továbbra szétszedni Bootstrap körhinta, és megvizsgálja, hogyan kell változtatni az animációs hatást, ha változik körhinta diák.




Megjegyzéseket fűzött hozzá - 1