Boostrap bietet 12 JavaScript -Plugins, darunter:
Animationsübergang
Modal Modal
Dropdown -Menü
Scrollspy
Tab
Eingabeaufforderung Box Tooltip
Popover
Warnbox -Alarm
Taste
Zusammenbruch
Rotary Carousel
Automatisch float -apeix positionieren
Modales Popup-Fenster
<Div> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4> Modal-Titel </h4> </div> <div> <p> Das ist das, was das Popup-Fenster des Popup-Fensters zeigt, dass .../p> </div> <div> <Knopftyp "Taste" Taste "Taste" Taste "Taste" -Taste "-Taste" -Taste "-Taste" -Taste "-Taste" -Modal "-Modal"> "modal"> "modal"> </div> <". Data-dismiss = "modal"> speichern </button> </div> </div> </div>
Pulldown-Menü
Deklarative Verwendung
Im Allgemeinen wird das Dropdown-Menü in der Navigationsleiste (NAVBAR) und der Registerkarte (Registerkarte) implementiert.
<div id = "nav-example"> <a href = "#"> Projektname </a> <ul rollen = "navigation"> <li> <a data-toggle = "Dropdown" rolle = "button" href = "#" id = "Drop1"> Dropdown <b> </b> </a> <ul aria-labelledBy = "rolle". href="#" tabindex="-1" role="menuitem">Action1</a> </li><li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action2</a> </li><li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action3</a> </li> </ul> </li> <li> <a data-toggle = "Dropdown" rollen = "button" href = "#" id = "drop2"> dropdown2 <b> </b> </a> <ul aria-labelledby = "Drop2" rolle = "tabindex =" tabindex = "rollen =" msuit "> <a href </li> <li rollen = "Präsentation"> <a href = "#" tabindex = "-1" rollen = "Menuitem"> action5 </a> </li> <li rollen = "Präsentation"> <a href = "#" tabindex = "-1" rolle
Tab
<%-Navigationsleiste Registerkarte-%> <ul> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#profil" data-toggle = "tab"> profil </a> </li> <a href = "#message" data-toggle = "a-message"#"data-toggle ="> Nachrichten "a-li> <li> <a message" data-toggle = "). href="#settings" data-toggle="tab">Settings</a> </li></ul><%--Tab Panel--%><div><div id="home">home...</div><div id="profile">profile...</div><div id="messages">messages...</div><div id="settings">settings...</div></div>
Eingabeaufforderung
<button data-original-title="Tooltip on left" data-toggle="tooltip"data-placement="left">Tooltip on left</button><button data-original-title="Tooltip on top" data-toggle="tooltip"data-placement="top">Tooltip on top</button><button data-original-title="Tooltip on bottom" Data-toggle = "tOOLTIP" data-placement = "booth"> tooltip unten </button> <Taste Data-Original-Title = "Tooltip unten" Data-Toggle = "Tooltip" Data-Placement = "booth"> tOoltip am unteren </button> <Taste Data-Original-Title = Tooltip rechts rechts "rechts" rechts "rechts" rechts "rechts". Data-Toggle = "Tooltip" Data-Placement = "Right"> Tooltip </button>
Warnbox
<Div> <button data-mismiss = "alert" type = "button"> x </button> <h4> Warntitel </h4> <p> Ändern Sie dies und das und versuchen Sie es. </p> </div>
falten
<div ID = "Akkordeion"> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#accordion" href = "#accordion"> Triggerelement#1 </a> </h4> </div> <div> </div> </div> </div> </div> </div> </div> </div> </</div> </</div> </</div> </</div> </</div> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</ph> </
Rotierendes Karussell
<div data-ride = "carouse1" id = "Container"> <%------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Data-Slide-to = "2" data-target = "#Container"> </li> </ol> <%-linke und linke Kontrollschaltflächen-%> <a data-slide = "prev" href = "#container"> <span> </span> </a> <a data-slide = "prev" href = "#container"> </span> </</a.
Das obige ist das JavaScript-Plug-in-Kapitel des Basis-Boostrap-Tutorials, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!