Dieses Mal werden wir uns die Verwendung von JS -Komponenten ansehen. Dieser Artikel wird ein bisschen lang sein. Ich hoffe, jeder kann es geduldig lesen und ich glaube, es wird viele Gewinne geben. Viele Gartenfreunde fügten mich meinen Freunden hinzu und drückten sie aus wie mein Schreibstil. Es ist einfach und klar. Hier, nochmals vielen Dank für Ihre Unterstützung. Einerseits ist meine eigene Technologie begrenzt und ich schreibe Dinge relativ einfach. Andererseits schreibe ich Dinge, die auf meinem eigenen Verständnis basieren und komplexe Dinge in der einfachsten Sprache ausdrücken. Wenn mit dem Schreiben etwas nicht stimmt, geben Sie mir bitte einige Korrekturen.
1. JS -Dateireferenz
Hinweis: JQuery muss vor anderen JS -Dateien eingeführt werden, da andere Plugins auf JQuery beruhen.
<!-<script src = "js/jQuery.11.3.min.js"> </script> Lokal importierte Ladedatei-> <script src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min src = "js/bootstrap.min.js"> </script>
2. Datenattribute
Funktion: Über das Datenattribut können Sie ein beliebiges Bootstrap-Plug-In verwenden, ohne JS-Code zu schreiben. Die zuvor erwähnten Referenzmenü-Plug-Ins wie Data-Toggle = "Dropdown" und andere Referenzmenüs.
Wie kann man die Funktion deaktivieren, da es eine Funktion zum Einschalten gibt? Fügen Sie JavaScript den folgenden Code hinzu:
<script type = "text/javaScript"> $ (document) .off ('. data-api'); </script>Wenn Sie die Funktionen eines bestimmten Plug-Ins deaktivieren möchten, fügen Sie den folgenden Code hinzu:
<script type = "text/javaScript"> // Schließen Sie die Plug-In-Funktion des Eingabeaufforderungsfelds $ (Dokument) .off ('. alert.data-api'); </script>Alle JS -Plugins sind im Grunde die folgenden Schritte:
1: Wie benutzt man es? --- Wie schreibe ich die entsprechende Klasse?
2: Wie rufst ich an? --- Wie kann nach dem Schreiben der Klasse die Klasse, die sie schreibt, wirksam machen?
3: Ereignisverarbeitung-einschließlich des Ereignisses, bevor die Aktion ausgelöst wird, und das Vorkommen nach Beginn der Aktion
HINWEIS: Alle Aktionen treten vor dem Auslösen auf. Bootstrap bietet Verhinderung aus, was implementiert, dass die Aktion vor ihrer Ausführung gestoppt wird. Der Code ist wie folgt:
$ ('#MyModal'). On ('show.bs.modal', function (e) {if (! data) return e.preventDefault () // Verhindern Sie die Anzeige der Modal -Box. Natürlich können Sie auch das Erscheinungsbild anderer Plugins verhindern})Hinweis: Bootstrap führt keine Abhilfemaßnahmen für Browser, die JavaScript deaktivieren. Daher müssen wir ein Stück Code schreiben, um uns selbst zu beheben, und ich glaube, jeder weiß es.
<Noscript> Ihr Browser unterstützt JavaScript nicht. Bitte laden Sie den neuesten Browser </noscript> herunter
3. Modal Box Component (modal.js)
Notiz:
1: Es wird nicht unterstützt, mehrere Modalboxen gleichzeitig zu öffnen
2: Die Modalbox sollte sich so weit wie möglich am Körperkörperelement befinden, um andere Komponenten zu vermeiden, die die Anzeige und Funktion des Modalboxs beeinflussen.
3: Anweisungen des mobilen Terminals
4: Verbesserung der Barrierefreiheit-Rollenattribut
5: Die Ansicht kann in das Modal-Box eingebettet werden, dh data-toggle = "modal"
Schauen wir uns die Spalte unten an. Klicken Sie auf die Schaltfläche und ein Modalfeld wird angezeigt. Wenn Sie den vorherigen Artikel hier gelesen haben, ist es glaube, dass es nicht schwer zu verstehen ist, wenn Sie den vorherigen Artikel gelesen haben. Ich werde es hier nicht ausführlich erklären. Sie können den Code veröffentlichen, um sie selbst zu testen:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> </title> <link href = "css/bootstrap.css" rel = "styleSheet"> <link href = "css/bootstrap.min data-toggle = "modal" data-target = ". bs-example-modal-lg"> Ein großes Modal-Box taucht auf. ARIA-Label = "Close"> <span aria-hidden = "true"> × </span> </button> <h4> Modal-Titel </h4> </div> <p> Ein feiner Körper… </p> </div> <div> <button type = "button" data-dismiss = "modal"> close </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> </button> button> </button> </button> </button> </button> </button = button = ". </div> </div> <!-Ändern Sie die Größe des Modal-Feld aria-labelledBy = "Mylargemodallabel"> <div> --- kleines Modal-Box <div> <button type <Div> <button type = "button" data-dismiss = "modal"> schließen </button> <button type = "button"> Änderungen speichern </button> </div> </div> </div> </div> </div> <!-Animationseffekte sind verboten, löschen Sie die Fade-> <Skript src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ ("#myModal"). --- Rufen Sie diesen Code an, damit das Plugin funktioniert </script> </body> </html>Der Effekt ist wie folgt:
In Kombination mit Modalboxen können Sie dem Körperinhalt auch andere Funktionen hinzufügen, z.
Fügen Sie für Ereignisse im Modalfeld den folgenden Code in JavaScript hinzu, wie unten gezeigt:
Kopieren Sie den Code wie folgt: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascrict"); --- Rufen Sie diesen Code an, damit das Plug-in-Modalfeld wirksam wird und $ ('#MyModal'). On ('Hidden.bs.modal', Funktion (e) {angezeigt wird
Alert ("111");
}) --- Dieses Ereignis bedeutet, dass das Alarmereignis nach dem Schließen des Modal Box </script> ausgelöst wird
Schauen wir uns an, wie die Modalbox in das Video eingebettet ist. Wir müssen Code, automatische Wiedergabe, Stopp und andere Funktionen hinzufügen. Schauen wir uns zuerst den Code an
<a href = "#" data-toggle = "modal" data-target = "#videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduym==.htmL"> Video> Video> </a> <dividmod = "victindex" tabindex aria-labelledBy = "videomodal" aria-hidden = "true"> <div> <div> <button type src = "js/jQuery-1.11.3.min.js"> </script> Lokale Ladedatei-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min type = "text/javaScript"> // function function autoplaymodal () {var trigger = $ ("body"). find ('[data-toggle = "modal"]'); Trigger.click (function () {var themodal = $ (this) .data ("target"); var videosrc = $ (this) .Attr ("data-thevideo"); var videosrcauto = videosrc+"autoplay = 1"; $ (themodal+'iframe'). button.close '). click (function () {$ (themodal+' iframe '). attr (' src ', videosrc);}); }); }); }); } // Die Funktion $ (Dokument) .Ready (function () {autoplayModal ();}); </script> <noscript> Unterstützt den JavaScript -Browser </noscript> nichtDer Effekt ist keine Screenshots mehr, die oben genannte SRC führt die Adresse von Youku vor.
4. Scrollenüberwachungskomponente
In der Navigationsleiste gelistet, dh die Registerkarte automatisch entsprechend der Bildlaufposition. Schauen wir uns den Code an.
1: Stellen Sie sicher, dass die Bildlaufleiste angezeigt wird.
2: Usually add data-spy to body, that is, use data-spy="scroll" <body data-spy="scroll" data-target=".navbar" data-offset="70"> <div id="myScrollspy"> <nav role="navigation"> <div> <div id="navbar-scroll"> <ul> <li><a href="#home">home</a></li> <li><a href="#message">message</a></li> <li><a href="#about">about</a></li> <li> <a href="#about">about</a></li> <li> <a href="#" data-toggle="dropdown">Drop-down Menu<b></b></a> <ul> <li><a href = "#Eins"> eins </a> <li> <a href = "#zwei"> zwei </a> <li> <a href = "#drei"> drei </a> </ul> </li> </ul> </div> </div> </nav> <! <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "über"> über </h1> <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <hr> <h1 id = "eins"> ein </h1> <P> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id = "zwei"> zwei </h1> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
Verstehen Sie die Bedeutung von Data-Offset: Das heißt, der Offset von oben, wenn die Bildlaufposition ist. Zweitens ähnelt die Ereignisverarbeitung der Verwendung von Modalboxen und wird nicht erklärt.
Die Effekte sind wie folgt:
5. Eingabeaufforderungskastenkomponente
Beachten:
1: Verwenden Sie data-toggle = "tooltip"
2: Die Datenerlagerung repräsentiert die Richtung des Eingabeaufforderung. Es gibt vier Richtungen links, rechts, unten, oben
3: Die Datenanimation soll ihren Animationseffekt auf False setzen, dh nach Übergang der Maus wechselt sie von der ursprünglichen Ein- und Ausschaltung in ein sofortiges Erscheinungsbild, ohne zu pufferner Effekt.
<div> <p> <!-Lockern-> Dies ist ein Testtitel, <a href = "#" id = "clickevvent" data-toggle = "tOoltip" data-placement = "boden" data-original-title = "cnblog.com/jtjds" Data-Animation = "false"> klicken Sie sich erinnern. src = "js/jQuery-1.11.3.min.js"> </script> Lokale Ladedatei-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min type = "text/javaScript"> $ ('[data-toggle = "tooltip"]). wird angezeigt}) </script>6. Popup-Rahmenkomponente
Beachten:
1: Die Popup-Box fügt jedem Element eine kleine suspendierte Ebene hinzu, um Nicht-Main-Informationen zu speichern.
2: Wenn die Inhaltslänge 0 beträgt, wird das Popup-Box nicht angezeigt. Verwenden Sie data-toggle = "popover"
3: Verlassen Sie sich auf das Plug-In der Eingabeaufforderung und müssen manuell initialisiert werden (siehe Initialisierung in JavaScript).
Schauen Sie sich den folgenden Code und keine Screenshots mehr an:
Kopieren Sie den Code wie folgt: <!-Klicken Sie auf die Schaltfläche, um zu angezeigt. Klicken Sie dann auf die Schaltfläche, um auszublenden->
<button type = "button" data-toggle = "popover" data-content = "und hier ist ein erstaunlicher Inhalt, es ist sehr ansprechend, oder?"> Klicken Sie auf mich, um Popup-Box </button> zu popup/ausblenden </button>
Wenn Sie auf die Schaltfläche klicken, wird es angezeigt. Klicken Sie dann auf die Schaltfläche und verschwinden. Was soll ich tun, wenn ich in einem leeren Raum darauf klicken und es verbergen möchte?
Fügen Sie einfach Data-Trigger = "Focus" hinzu, um den Fokus auszublenden. Trigger bedeutet Auslöser.
Kopieren Sie den Code wie folgt: <!! Klicken Sie auf die Schaltfläche, um zu angezeigt, und klicken Sie auf einen beliebigen leeren Speicherplatz, um ihn auszublenden. Es ist am besten, das A-Tag zu verwenden. Natürlich können Sie auch die Schaltfläche verwenden->
<a tabindex = "0" id = "myPoPover" rollen = "button" data-toggle = "popover"
Data-Trigger = "Focus" Data-Content = "und dies ist ein schöner Inhalt"> Klicken Sie auf mich, um zu verschwinden </a>
7. Warnboxkomponente
Beachten:
1: Verwenden Sie data-dismiss = "alarm"
2: Das Plug-In kann Klicks hinzufügen und der Warnmeldung verschwinden
3: Wenn die Taste Schließung verwendet wird, muss sie, wenn die enge Klasse verwendet wird, das erste untergeordnete Element der Warnung sein, und der Text darf nicht vor ihm erscheinen.
Schauen wir uns den Code an:
<!-Warnbox-> <div id = "myAlert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-versteckt = "true"> × </span> </button> </span> willkommen </span> </"Button". ARIA-Label = "Close"> <span aria-hidden = "true"> × </span> </button> <span> Willkommen </span> <button type = "button"> details </button> </div>
Wenn es in JavaScript mehrere Warnboxen gibt und Sie ein Warnfeld schließen möchten, fügen Sie den folgenden Code in JavaScript hinzu: folgt:
$ (" #myalert"). alert ('close') // Wenn das erste Warnfeld geschlossen ist oder wenn #Moyalert durch #myAlert1 ersetzt wird, schließt das zweite Warnfeld $ (' #myalert1'). Am ('geschlossen.bs.alert', Funktion () {alert ("close").8. Knopfkomponente
Beachten:
1: Schalten Sie den Status der Taste (deaktiviert oder eingeschaltet)-dies wird mit autocomplete = "off" erreicht.
2: Machen Sie mehrere Tasten zu Symbolleisten usw.
3: Setzen Sie den Ladestatus durch Einstellen von Datenlade-Text = "Laden ..."
<!-button-> <button type = "button" id = "mybutton" data-loading-text = "laden ..." autocomplete = "off"> ladenstatus </button> <button type = "button" data-toggle = "button" ark-pressing type = "checkbox" autocpromplete = "off" checked> home </label> <label> <Eingabe type = "CheckBox" autoComplete = "off"> meldung </label> <label> <Eingabe typ
Wenn Sie den Inhalt nach dem Klicken auf die Schaltfläche ändern möchten, fügen Sie data complete-text = "xxxx" hinzu und fügen Sie den JavaScript-Code wie folgt hinzu:
Kopieren Sie den Code-Code wie folgt: <!-Nach dem Klicken auf Trigger ändern die Inhaltsdaten-Complete-Text den fertigen Inhalt->
<schaltetyp = "button" data-complete-text = "fundieren" autocplete = "off"> Der Inhalt ändert sich automatisch nach Klicken auf </button> <script> $ ('. MyBTN'). Auf ('klicken', function () {$ (this) .button ('complete') // Der Inhalt wird beendet}) </script> </script>} </script>} </script>
So setzen Sie die Schaltfläche so ein, dass der Status umgeschaltet wird und die Zeit zum Switch -Status festgelegt wird. Sie können JavaScript den folgenden Code hinzufügen:
<Script> $ ('#myButton'). on ('click', function (e) {var btn = $ (this) .button ('laden'); setTimeout (Funktion (e) {btn.button ('Reset'); // Set restore auf Originalstatus}, 3000)}) </script> </script>) </script>)9. Klapprahmenbaugruppe
HINWEIS: Verwenden Sie Data-Toggle = "Collapse", um den Code anzuzeigen:
<a rollen = "button" data-toggle = "collapse" href = "#collapseExample" aria-expanded = "false" aria-controls = "collapseExample"> Link mit href </a> <div id = "collapseExample"> <div> Hallo, das wird test! </div> </div>
Darüber hinaus kann es in Kombination mit Panelgruppen verwendet werden, wie unten gezeigt:
<!-Panel Group-> <div id = "mypanel" rolle = "cablist"> <!-Erstes Panel-> <div> <div rollen = "tab" id = "headingOne"> <h4> <a datentoggle = "collapse" data-parent = "#mypanel" href = "#collapseone"> home </a; id = "collapseone" rollen = "tabpanel"> <div> Hallo über mich </div> </div> </div> <!-zweites Panel-> </div>
Wenn Sie nach Hause klicken, um den Inhaltsteil zu steuern, soll er seine href = "#collapseone" festlegen, die der ID entspricht, die dem Inhalt entspricht.
In Bezug auf Ereignisse, ähnlich wie früher, haben diese Komponenten eine ähnliche Zeitverwendung, wie folgt
<script type = "text/javaScript"> $ ('#mypanel'). on ('hidden.bs.collapse', function () {alert ("2222");}) </script>10. CAROSEL -Schiebetkomponente
HINWEIS: Verwenden Sie data-ride = "Carousel", wie das Karussell, das wir normalerweise machen. Schauen wir uns zuerst den Carousel -Diagrammcode an, den ich erstellt habe:
<div id = "myContainer"> --- Beachten Sie das Ziel von Daten-Ziel <div id = "carousel1" data-ride = "carousel"> <ol>-Indikatoren repräsentieren gleitende Indikation, das heißt, eine gleitet, von welcher ein <li data-target = "#carousel1 Data-Slide-to =" 0 "0"> </li>-Slide aus dem ersten Eins-Ein-von-und-"-Daten-Target"#"0"> </li>---------#)-aus dem ersten Ein-Ein-von-und-"-Daten-Target"#"0"> </li>--------#: data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <!-- Rendering content--> <div role="listbox"> <div> <img src="bg.jpeg"> <div> --carousel-caption carries added text, etc. <h3>green sunshine</h3> <p> Sonnenschein Stimmung, Sie und ich werden mit Ihnen </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <img src = "xx.jpg"> </div> </div> <!-zwei Tags auf der linken und rechten-#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" "Rolle =" -Ston-Schleuder <span aria-hidden = "true"> </span> <span> vorher </span> </a> <a href = "#carousel1" rollen = "button" data-Slide = "next"> <span aria-hidden = "true"> </span> <span> Weiter </span> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Die Effekte sind wie folgt:
In Bezug auf die Geschwindigkeit des Gleites können Sie direkt Dateninterval = "2000" hinzufügen, um den 2-Sekunden-Schalter zu setzen, aber das Problem mit dieser Methode ist das
Wenn Sie den Browser aktualisieren, müssen Sie manuell auf die linken und rechten Tasten klicken, bevor Sie wechseln können. Der beste Weg ist, es in JavaScript festzulegen. Wie im folgenden Code gezeigt
<script type = "text/javaScript"> $ (". Carousel"). Carousel ({Intervall: 2000;}) </script>11. Affix -Komponenten
HINWEIS: Verwenden Sie die Position: Verwenden Sie für die Positionierung datenspy = "Affix" in Kombination mit Datenausschüssen, um eine Überwachung zu erreichen, und wenn ein bestimmtes Ereignis auftritt, ist es ausgefallen. Bitte lesen Sie den folgenden Code:
<div> <!-Layout des Gittersystems-> <div> <ul> <li> 11111111111 </li> <li> 22222222222 </li> <li> 333333333333333333 </li> 444444444444444444444444444444444444444 </li> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </li> <li> 5555555555 </li> <li> 666666666663 </li> <li> 77777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <div > <ul> <li>1111111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>4444444444444444444444444444</li> <li>5555555555</li> <li> 6666666666666 </li> <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script = "text/javascript"> $ ('.'. }}) $ ('. JS-AFFIXED-ELEMENT-BOTTOM').Die JS -Komponente ist fast hier und das Lernen des Rahmens von Bootstrap ist fast vorbei. Der nächste Artikel ist vorbei. Ich habe vor, eine Seite speziell mit Bootstrap zu entwerfen, um sie zu erstellen und mit Ihnen zu teilen. Wenn Sie auch das Bootstrap -Framework lernen, kommunizieren Sie bitte und lernen Sie!
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
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.