Tanulságok bootstrap
Ez a lecke továbbra is dolgozzon ki egy sor jegyzetek Bootstrap, enyhén szintjének emelése. A korábbi leckék meg lehet tanulni, hogyan kell dolgozni a szöveget, táblázatokat elrendezés sablonok és űrlapok létrehozásához.
Ahhoz, hogy hozzon létre egy dinamikus könyvtár elemeket tartalmaz, Bootstrap bootstrap.js. Úgy működik együtt jQuery és megkönnyíti az új objektumok létrehozásához, hogy kölcsönhatásba léphet webhelylátogatókhoz. Ez lehet modális ablakok, legördülő listák, fülek, csúszkák, és így tovább. Ma fogunk összpontosítani a legegyszerűbb közülük - a legördülő listából.
Hogyan lehet csatlakozni a Bootstrap.js
Mert az ő munkája Bootstrap megkövetelik a jQuery szkriptek, ezért győződjön meg arról, hogy a könyvtár csatlakozik a bootstrap:
Készítsen legördülő listákban a bootstrap - igazi öröm. Szabhatja a stílus ilyen listák segítségével egy pár osztályba, de munkájuk kell kapcsolódni jQuery és bootstrap.js.
Legördülő listák
A legördülő listában - a menü, a megjelenése, amely lehet változtatni. Ebben az esetben a lista jelenik meg, kattintson a megadott objektumot. Például legyen egy gomb. Itt egy példa egy ilyen lista, amelyek végrehajtása Bootstrap:
Class .caret létre a lefelé mutató nyílra (), jelezve, hogy a lista jelenik meg. Végül hozzáadjuk .dropdown menü osztály a listára
- . hogy elkezdett csökkenni.
Szeparátor a legördülő listából
Az elem lehet használni .divider osztály az elemek szétválasztását a listában:
menü szeparátor
fejlécét
Akkor jelölni a csoport elemeinek a legördülő listát .dropdown-fejléc osztály:
Legördülő menü címei
engedélyezett tételek
Ahhoz, hogy az elem legördülő listából inaktív, add meg .disabled kód:
Menü egy inaktív elem
Példa: A jobb oldali listán
Meg lehet változtatni a hely, ahol a legördülő listából a szabvány megjelenése a felső vagy a jobb oldalon. Ahhoz lista jelenik meg a jobb oldalon, meg az elem
- osztály .dropdown-menu-jobbra:
Példa: A lista a „legördülő”, hogy a felső
Ahhoz lista jelenik meg a gomb felett, és a változás az osztály .dropdown .dropup:
„Adat-POST_ID = "8169" adat-user_id = "0" data-is_need_logged = "0" data-lang = "en" adat-decom_comment_single_translate = "megjegyzést a" data-decom_comment_twice_translate = "comment" data-decom_comment_plural_translate = "komentarіv" adatok-multiple_vote = "1" adatok-text_lang_comment_deleted = 'komentarijah Vidal' adatok-text_lang_edited = "Vіdredagovano" adat-text_lang_delete = "Vidaliti" adatok-text_lang_not_zero = "mező nem NULL" adat-text_lang_required = „Tse obov'yazkove mezőben. " adatok-text_lang_checked = "Oberіt egyik punktіv" adatok-text_lang_completed = "Operatsіyu befejeződött" adatok-text_lang_items_deleted = "Ob'єkti Bulo Vidal" adatok-text_lang_close = "zárt-" adatok-text_lang_loading = "Zavantazhennya.">
Add meg a megjegyzést
Vibachte az komentuvannya neobhіdno uvіyti.
15 komentarіv
És valahogy kalap osztó és az osztályok nem működnek ((kalap, ha a gombhoz, hogy eltörik. Elválasztó elrejti az elem, amelyhez hozzá van rendelve. Mi lehet a probléma?
Nagy tanulság! köszönöm! Csak az a kérdés, kell a legördülő listából, hogy négyzeteket (multiselekt) és válassza ki a kimeneti valahol. Találtam hasonló Github prikruttit de nem tér el. Hálás lennék egy ilyen leckét !!
Lecke kiváló. Csak egy kérdés. Tegyük fel, hogy van egy gomb a legördülő listából. A lista tartalmazza a hat pontot. Nyomd meg a gombot. Listája esik, de a felső három pont alá rejtett a fenti állandó eleme. Hogyan kell csinálni, így azt vypodal listája a csúcsra? (Példa helyén ufoha.in.ua alkotnak bemenet.)
@ Roman, első, köszönöm. Másodszor, úgy döntött, hogy menjen, és ellenőrizze, mi olyan szokatlan írtam :).
És harmadszor, ne várja meg, ez csak a az év közepén :)