Această lecție va continua seria de note cu privire la dezvoltarea pe Bootstrap, ridicând ușor nivelul. Din lecțiile anterioare ați putea învăța cum să lucrați cu text, tabele, cum să introduceți șabloane și să creați formulare.
Pentru a crea elemente dinamice, Bootstrap conține biblioteca bootstrap.js. Acesta funcționează împreună cu jQuery și vă permite să creați cu ușurință obiecte cu care un vizitator al site-ului dvs. poate interacționa. Acestea pot fi ferestre modale, liste drop-down, file, glisante și așa mai departe. Astăzi vom vorbi despre cele mai simple dintre ele - listele drop-down.
Cum se conectează Bootstrap.js
Pentru munca lor, scripturile Bootstrap necesită jQuery, deci asigurați-vă că această bibliotecă este conectată înainte de bootstrap:
Creați liste derulante pe bootstrap - o plăcere totală. Puteți personaliza stilul acestor liste folosind o pereche de clase, iar pentru munca lor trebuie să vă conectați la jQuery și bootstrap.js.
Listele derulante
Lista drop-down - meniu, aspectul care poate fi schimbat. În acest caz, lista afișată atunci când faceți clic pe obiectul specificat. De exemplu, să fie un buton. Aici este un exemplu al unei astfel de liste, implementat pe Bootstrap:
Clasa .caret va crea o săgeată în jos () pentru a indica faptul că apare lista. În final: adăugați clasa de meniu .dropdown în listă
- . astfel încât să devină abandonat.
Delimiter în lista derulantă
Un element cu clasa .divider poate fi folosit pentru a separa elementele dintr-o listă:
Meniul cu separator
Anteturi de elemente
Puteți desemna grupuri de elemente din lista drop-down utilizând clasa .dropdown-header:
Meniu derulant cu titluri
Elemente blocate
Pentru a face elementul din lista derulantă inactiv, adăugați codul .disabled la acesta:
Meniu cu element inactiv
Exemplu: lista din dreapta
Puteți schimba locul în care lista verticală apare din lista standard pentru a apărea în partea superioară sau dreaptă. Pentru a atribui o listă în dreapta, atribuiți un element
- clasă .dropdown-meniu-dreapta:
Exemplu: lista "drop-down" de sus
Pentru a face lista să apară deasupra butonului, schimbați clasa .dropdown în .dropup:
„Date-POST_ID = "8169" date-user_id = "0"= "0" date-lang = "ro"-decom_comment_single_translate date is_need_logged-date = "comentariu"-decom_comment_twice_translate date = "comment" date-decom_comment_plural_translate = "komentarіv" date-multiple_vote = "1" date-text_lang_comment_deleted = 'komentarijah Vidal' date-text_lang_edited = "Vіdredagovano de" date-text_lang_delete = "Vidaliti"-text_lang_not_zero date = "câmpul nu este NULL" „câmp obov'yazkove Tse = text_lang_required-date. " = "Oberіt unul dintre punktіv" text_lang_checked-date = text_lang_completed-date "Operatsіyu completate" text_lang_items_deleted-date = "Ob'єkti Bulo Vidal" date-text_lang_close = "tip închis" date-text_lang_loading = "Zavantazhennya.">
Додати комента
Vibate pentru comentarii neobișnuite.
15 comentarii
Și, din anumite motive, clasele de îngrășăminte și de divizare nu funcționează pentru mine ((pictograma, dacă o atribuie unui buton, o rupe.) Dividerul ascunde elementul la care este atribuit, ce poate fi problema?
o mare lecție! vă mulțumesc! Singura întrebare este, ar trebui să fie în lista drop-down pentru a face casete de selectare (multiselekt), și pentru a selecta ieșirea undeva. Am găsit similar cu Github prikruttit, dar nu afară. Aș fi recunoscător pentru o astfel de lecție !!
Lecția este excelentă. Există o singură întrebare. Să presupunem că am un buton cu o listă derulantă. Lista conține șase articole. Apăsăm butonul. Lista scade, dar primele trei elemente sunt ascunse sub elementul mai înalt. Cum de a face acest lucru, astfel încât lista să se potrivească în partea de sus a totul? (Exemplu pe formularul de înregistrare ufoha.in.ua al site-ului.)
@ Roman, în primul rând, vă mulțumesc. În al doilea rând, el a decis să meargă și să verifice că am scris un astfel de neobișnuit :).
În al treilea rând, nu așteptați, acesta este doar mijlocul cursului :)
Articole similare
Trimiteți-le prietenilor: