Exemple bootstrap Carousel de utilizare și styling a cursorului

Alo Vom continua să demontați cadrul Bootstrap. Cum se instalează și de a folosi elementele de bază ale cadrului am scris în post, „Cum să lucreze cu Bootstrap». În acest articol considerăm cursorul pentru bootstrap se numește Carusel (Carousel). În Bootstrap carusel are avantaje semnificative în comparație cu alții: adaptabilitate pentru dispozitive mobile, în mod implicit, dacă plasați cursorul mouse-ului peste sensul giratoriu, apoi schimbați diapozitiv se oprește până când utilizatorul îl îndepărtează cu cursorul mouse-ului, slide-urile pot fi plasate în orice HTML-cod. Cursorul este asigurată de cadrul, gata să ispolzovaniyui în majoritatea cazurilor nu necesită editare semnificativă.

HTML-cod al cursorului arată astfel:

Pentru acest exemplu, nu am scris stiluri CSS, în general, a luat doar documentația HTML-cod al site-ului oficial al cadrului Bootstrap «getbootstrap.com» și ușor ajustate. a schimbat identificatorul «id» pentru a lui «testCarousel» pentru carusel. Este demn de remarcat faptul că «id» carusel este transmis afișajele și săgețile de navigare. Să aruncăm o privire mai atentă la codul HTML.

Containerul cu clasa «element» conține conținutul principal al glisierei, acesta poate fi doar o imagine și totul, și poate fi orice set de HTML-tag-uri cu imaginea sau nu. Aceste containere pot fi multe, dar numărul lor trebuie să corespundă cu numărul de indicatori, în cazul în care indicatorii utilizați în carusel. Containerul cu o clasă «carusel legendă» pentru înregistrări suplimentare, pe care l-au pus în conținut vor fi aliniate și formatate automat.

puteți elimina toate excesul și se lasă doar ceea ce este necesar din caruselul de HTML-cod, de exemplu, pentru a elimina indicatorii și se lasă numai săgeata de navigare, sau invers, într-un diapozitiv - îndepărtați descrierea suplimentară și se lasă doar imaginea, sau șterge imaginea, setați fundalul și se lasă textul cu orice buton .

Clasa «activ» definește un diapozitiv va fi afișată în primul rând, în mod implicit este atribuit primul indicator și diapozitiv. Dacă trebuie să schimbați este afișat primul slide, dar nu este schimbarea slide blocuri, aveți nevoie pentru a atribui o clasă de «activă» și indicatori, iar glisiera fără a rupe secvența. Este important să ne amintim că numerotarea indicatorilor începe de la zero, adică, contul și glisați indicatorul va fi, de exemplu, al patrulea, iar valoarea «date slide-la» pe ecran va fi 3.

Caruselul de navigare este încă mai ușor. Fiecare link este atribuit un buton de clasă care duce la clasa anterioară, o clasă de «plecat» și atributul «date slide» cu valoarea «precedentă», și butonul care duce la următorul diapozitiv, clasa de «dreapta» și atributul «date slide- »cu« valoare următoare“. În interiorul link-urile din tag-uri «» interval de ei înșiși săgeți (zigzag) sunt la stânga și la dreapta, săgețile sunt trase din ikonochnogo Bootstrap font.

Styling Bootstrap Slider

Stilizează caruselul poate fi orice doriți. Luați exemplul anterior, să ia o fotografie și afișează, adăugați titlul și butonul va prezenta propriile lor stiluri CSS.

După efectuarea modificărilor HTML-cod a devenit atât.

Pentru acest cod pentru a adăuga propriile stiluri.

După schimbările făcute arată carusel.

Sunt de acord, totul este destul de simplu. Dacă este necesar, puteți face imaginea de fundal a slide, de poziționare orice element în container carusel este, în general posibil să se realizeze tot ceea ce este necesar într-un anumit proiect.

Pe aceasta voi încheia, iar în articolul următor va continua să demontați Bootstrap carusel și ia în considerare modul de a schimba efectul de animație la schimbarea carusel de diapozitive.

Adăugat comentarii - 1