Die beiden vorherigen Artikel sprechen nur darüber, wie Komponenten verwendet werden, im Grunde nicht über JS. Dieser Blog sollte in Kombination mit JS besprochen werden.
Lassen Sie mich mehrere Komponenten erklären
1. Modal Box
2. Scrollenüberwachung
3. Tag Seite
4. Tooltips
5. Popup-Box
6. Knopf
7. Stapeln
8. rotierende Seite
9. Seitenleiste
Importieren Sie CSS und JS zuerst
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/css/bootstrap.min.css"><Script src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Modal Box
Normalerweise verwenden wir diese Modalbox, wenn wir uns anmelden oder bestimmte Vorschriften lesen, sodass die Modalbox sehr häufig ist
Schreiben Sie zuerst eine Schaltfläche, um das Modalfeld zu öffnen
<!-Data-Target ist die ID unseres modalen Feldes, und data-the was auch immer = "@ime" ist das Tag und den Wert des modalen Feldes, das wir in-> <button type = "button" -Toggle = "modal" data-target = "#MyModal" Data-thywayer = "@iMe"> Das Modal Box </button> myModal "übergeben.
Schreiben Sie dann die Modalbox
<div id = "myModal" rollen = "Dialog" aria-label = "myModallabel" aria-hidden = "true"> <!-Dies ist eine kleine Modalbox. Modal-sm in modal-lg ändern ist ein großes modales box-> <div> <!-modal box head-> <div> <!-schließen in der oberen rechten ecke-> <button = "button" data-dismiss = "modal" aria-label = "close"> <span aria-versteckt = "true"> × </span> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> <! box content--> <div> <!--Modal frame content can be text or table--> <!--<p>hello</p>--> <form> <div> <label>username</label> <input type="text"> </div> <div> <label>password</label> <input type="password"> </div> </form> </div> <!--Modal frame foot--> <div> <button type="button" data-dismiss="modal"> Close </button> <button type="button"> Save</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Wenn Sie auf die Schaltfläche klicken und dann die Parameter an die Tabelle im Modalfeld übergeben
Fügen Sie das Attribut der Schaltfläche Datenmarke hinzu: Wert
Das obige Daten-was auch immer = "@ime" wird als Beispiel hinzugefügt. Der Parameter mit der Beschriftung, was auch immer und der Wert von @ime hinzugefügt wird.
Das Folgende ist die JS -Operation
// Methode $ ("#MYMODAL"). On ("show.bs.modal", function (e) {// Die Schaltfläche Erhalten Sie klicken, um var zu öffnen modal.find (". Modal-title"). Text ("Hallo"+Empfänger); // Ändern Sie den Wert der Eingabe in der Körpermodal.find (". Modal-Body-Eingabe"). Val (Empfänger)})2. Scrollenüberwachung
Schieben Sie sich zu verschiedenen Inhalten, die Registerkartenseite ändert sich
Schreiben Sie zuerst das Körperattribut
<!-Offset ist auf 70 gesetzt, dieser Wert ist der beste Wert->
<body data-spy = "scroll" data-target = ". navbar" data-offset = "70">
Schreiben Sie dann die Registerkarte
<!--The top of the displayed content fixed in the tab bar--> <nav role="navigation"> <div> <div id="myScrollspy"> <ul> <!--The connection in the tag is the id of the title below--> <li><a href="#iwen">iwen</a> </li> <li><a href="#ime">ime</a> </li> <!-Nest Dropdown-Menü im Tag-> <li> <a href = "#" data-toggle = "Dropdown"> Dropdown-Menü <span> </span> </a> <ul rollen = "Menü"> <li> <a href = "#eins" tabindex = "-1"-1 "> </li> <li> <a href ="#"#"#"#"#"-1"-1 "> xa> <a <a href </li> <li> <a href = "#drei" tabindex = "-1"> drei </a> </li> </ul> </li> </li> </ul> </div> </div> </nav>
Dann schreiben Sie den Inhalt
<H2 id = "iwen">@iwen </h2> <p> Dies ist eine Person. Dies ist eine Person </p> <h2 id = "ime">@ime </h2> <p> Dies ist eine Person. Dies ist eine Person. id = "zwei">@zwei </h2> <p> Dies ist eine Person. Dies ist eine Person </p> <H2 id = "drei">@drei </h2> <p> Dies ist eine Person. Dies ist eine Person </p> <h2 id = "drei">@drei </h2> <p> Die Person ist eine Person </p>
Es wird empfohlen, den Inhalt länger zu schreiben, damit der Effekt offensichtlicher wird. Es ist nicht bequem, hier zu viele nutzlose Wörter zu schreiben.
Sie können auch einige JS -Methoden schreiben
// Methode $ ("#myscrollSpy"). On ("Activate.bs.scrollSpy", Funktion (e) {alert ("Hallo");})3. Tag Seite
Klicken Sie auf verschiedene Tags, um verschiedene Inhalte anzuzeigen
Schreiben Sie zuerst die Tag -Leiste
<ul id = "mytab"> <! data-toggle="dropdown"> dropdown menu<span></span> </a> <ul role="menu"> <!-- Unlike ordinary drop-down menus, add data-toggle="tab"--> <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li> <li><a href="#two" tabindex="-1" data-toggle = "tab"> zwei </a> </li> </ul> </li> </li> </ul>
Schreiben Sie dann Inhalte verschiedener Tags
<div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "profile"> <p> Profil </p> <div id = "eins"> <p> Ein </p> <div id = "zwei"> <p> Two </p>
Sie können die angezeigte Registerkarte mit JS initialisieren
Es gibt verschiedene Möglichkeiten, eine Registerkartenseite auszuwählen
$ ('#mytabs a [href = "#profile"]'). tab ('show') // Wählen Sie $ ('#mytabs a: First'). Tab ('show') // Wählen Sie die erste Registerkarte Seite $ ('#mytabs a: last'). Tab ('Show'). (Weil 0 der erste ist). Wenn es sich um eine Registerkarte im Dropdown-Menü handelt, sollte die Nummer um 1 hinzugefügt werden.4. Tooltips
<p> <!-Wenn der Titelinhalt leer ist, wird der Inhalt des Daten-Original-Titels angezeigt. Die Platzierung ist die Anzeigeposition, die nach oben | unten | links | rechts eingestellt werden kann-> <!-Die Parameter können in den Daten festgelegt werden-**** ---> Willkommen bei <a data-Animation = "False" id = "mytooltip" href = "#" data-toggle = "tooltip" Data-Placement = "bottom" data-original-original-original-title </p>
Dann müssen Sie es mit JS initialisieren, sonst hat es keine Wirkung
// Initialisieren Sie Tooltip, zeigen Sie auf Anzeige
$ ('[data-toggle = "tooltip"]'). tOoltip ();
5. Popup-Box
Die Popup-Box ähnelt einem Tooltip, zeigt jedoch reichere als der Tooltip und wird auch häufiger verwendet.
<!-Data-Trigger = "Foucus" Klicken Sie auf das Leerzeichen, um zu verschwinden. Wenn Sie es nicht hinzufügen, klicken Sie auf die Schaltfläche, um zu verschwinden. Wenn Sie es auf schweben lassen, wird die Schaltfläche angezeigt, die Sie verschieben, angezeigt. Entfernen und verschwinden-> <!-Dieses Pop-up-Box trägt den Titel, und der Inhalt ist Inhalt-> <Schaltfläche type = "Button" data-Trigger = "foucus" data-placement = "boden" data-toggle = "popover" data-content = "Inhalt"> Popup-Feld </button>
Dann initialisieren Sie es mit JS
// Popover initialisieren
$ (". JS-Popover"). Popover ();
6. Knopf
Die ersten beiden Artikel sprechen über den grundlegenden Stil der Schaltflächen. Diesmal ist es fortgeschritten, sodass Schaltflächen beim Laden unterschiedlicher Text anzeigen können.
<!!
Verwenden Sie dann JS, um das Klickereignis zu binden
// The click event of the binding button $(".js-loading-btn").on("click", function (e) {// After clicking, set to loading status, displaying the text of loading var btn = $(this).button("loading");// Restore setTimeout(function (e) { btn.button("reset") }, 3000) })7. Stapeln
Stapeleffekt kann viele Bildschirmsteuerungen sparen, was sehr praktisch ist
Dies soll auf die Schaltfläche klicken, um den Stapel zu öffnen
<!-HREF ist die ID des Inhalts-> <a data-toggle = "collapse" href = "#collapseExample"> Klicken Sie auf die Anzeige </a> <div id = "collapseExample"> <div> Hallo </div> </div>
Dies ist der Stapel von Panelgruppen
<div ID = "Akkordeon" rollen = "Tablist"> <div> <div rollen = "tab" id = "headingOne"> <!-Titel angezeigt-> <H4> <!-Data-Eltern, wenn die ID der Panel-Gruppe-> <a data-toggle = "collapse" Data-parent = "##adcondion"-#"#"#"#collapseone"> collapseone "> collapseone"-add. open, without hiding--> <div id="collapseOne" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingTwo"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <divs id = "collapsetwo" rollen = "tabpanel"> <div> Hallo <br> Hallo <br> Hallo <br> </div> </div> </div> <div> <div> <div> <Divrolle = "tab" id = "headingThree"> <h4> <a Data-toggle = "collapse" data-parent = "#################" href="#collapseThree">item1</a> </h4> </div> <div id="collapseThree" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> </div> </div> </div> </div>
8. rotierende Seite
Wir können es oft auf der Homepage der Website sehen
<div id = "carousel-example-generic"> <! Data-target = "#Carousel-example-generische" Daten-Slide-to = "2"> </li> </ol> <!-Der Inhalt der Rotationsseite-> <div> <img src = "Bilder/4.JPG"> <!-Text hinzufügen-> <H3> u3d </h3> <p> Neue Version. src="images/2.jpg"> <div> <h3>U3D</h3> <p>New product launch</p> </div> </div> <div> <img src="images/3.jpg"> <div> <h3>Apple</h3> <p>Apple</p> </div> </div> <!--The arrows on the left and right of the rotation page--> <a href = "#Carousel-example-generic" data-slide = "prew"> <span> </span> </a> <a href = "#Carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>
Sie können Intervalle festlegen und automatisch mit JS beginnen
// das Intervall auf 2s einstellen und automatisch Karussell $ (". Carousel"). Carousel ({Intervall: 2000})9. Seitenleiste
Der Hauptinhalt der Seitenleiste ist eine Liste
<!-Um die Breite festzulegen, verstecken Sie sie auf dem Telefonbildschirm-> <div> <ul> <a href = "#"> Hallo </a> <a href = "#"> Hallo </a> <a href = "#"> Hallo </a> <a href = "#"> Hallo </a> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" href = "#"> Hallo </a> <a href = "#"> Hallo </a> <a href = "#"> Hallo </a> <a href = "#"> Hallo </a> </ul> </div>
Schreiben Sie noch einmal Stil
<Style> .Affixed-Element-top.affix { /*Wenn Sie unten sein möchten, können Sie es auf unten ändern: 10px;* / top: 10px; } .Affixed-Element-top.affix-bottom {Position: relativ; } </style>Fügen Sie einige js hinzu
$ (". JS-AFFixed-Element-Top"). Affix ({Offset: {}})Dies ist die grundlegende Verwendung von Boostrap. Nach dem Mastering können Sie eine gute Webseite erstellen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.