Cette fois, nous examinerons l'utilisation des composants JS. Cet article sera un peu long. J'espère que tout le monde pourra le lire patiemment et je crois qu'il y aura beaucoup de gains. De nombreux amis du jardin m'ont ajouté à mes amis et ont exprimé leur style d'écriture. C'est simple et clair. Ici, merci encore pour votre soutien. D'une part, ma propre technologie est limitée et j'écris des choses relativement basiques. D'un autre côté, j'écris des choses en fonction de ma propre compréhension et exprime des choses complexes dans le langage le plus simple. Par conséquent, s'il y a quelque chose qui ne va pas avec l'écriture, donnez-moi quelques corrections.
1. Référence du fichier JS
Remarque: jQuery doit être introduit avant d'autres fichiers JS, car d'autres plugins reposent sur jQuery.
<! - <script src = "js / jQuery-1.11.3.min.js"> </ script> Fichier de chargement importé localement -> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> - doit introduire avant Bootstrp.Min.js <js src = "js / bootstrap.min.js"> </ script>
2. Attributs de données
Fonction: Grâce à l'attribut de données, vous pouvez utiliser n'importe quel plug-in bootstrap sans écrire de code JS. Les plug-ins de menu de référence mentionnés précédemment, tels que data-toggle = "dropdown" et d'autres menus de référence.
Donc, comme il y a une fonction d'activation, comment désactiver la fonction? Ajoutez le code suivant à JavaScript:
<script type = "text / javascript"> $ (document) .off ('. data-api'); </cript>Si vous souhaitez désactiver les fonctions d'un plug-in spécifique, ajoutez le code suivant:
<script type = "text / javascript"> // Fermez la fonction de plug-in de la boîte d'invite $ (document) .off ('. alert.data-api'); </cript>Tous les plugins JS sont essentiellement les étapes suivantes:
1: Comment l'utiliser? --- Comment écrire la classe correspondante?
2: Comment appeler? --- Après avoir écrit la classe, comment faire en sorte que le cours qu'il écrit prenne effet?
3: Traitement des événements - y compris l'occurrence avant que l'action ne soit déclenchée et l'occurrence après le démarrage de l'action
Remarque: Toutes les actions se produisent avant le déclenchement, Bootstrap fournit à prévenir Default, qui implémente l'arrêt de l'action avant son exécution. Le code est le suivant:
$ ('# mymodal'). sur ('show.bs.modal', fonction (e) {if (! data) return e.PreventDefault () // empêche l'affichage de la boîte modale, bien sûr, vous pouvez également changer pour empêcher l'apparence d'autres plugins})Remarque: Bootstrap ne prend pas de mesures de réparation pour les navigateurs qui désactivent JavaScript. Par conséquent, nous devons écrire un morceau de code pour nous remédier, et je crois que tout le monde le sait.
<noscript> Votre navigateur ne prend pas en charge JavaScript, veuillez télécharger le dernier navigateur </noscript>
3. Composant de boîte modale (modal.js)
Note:
1: il n'est pas pris en charge pour ouvrir plusieurs boîtes modales en même temps
2: La boîte modale doit être située autant que possible à l'élément de l'enfant du corps pour éviter d'autres composants affectant l'affichage et la fonction de la boîte modale.
3: Instructions de terminal mobile
4: Améliorer l'accessibilité - Add Role Attribut
5: La vue peut être intégrée dans la boîte modale, c'est-à-dire, data-toggle = "modal"
Regardons la colonne ci-dessous. Cliquez sur le bouton et une boîte modale apparaîtra. En ce qui concerne les propriétés ici, si vous avez lu l'article précédent, je pense que ce n'est pas difficile à comprendre. Je ne l'expliquerai pas en détail ici. Vous pouvez publier le code pour le tester vous-même:
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, premier, et 1"> <! - Le bilan de device ci-dessus? Tout autre contenu * doit * les suivre! -> <Title> </ Title> <link href = "css / bootstrap.css" rel = "Stylesheet"> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <link href = "css / style.css" rel = "sylelesheet"> </ head> <body> <body> <bouton Type = "bouton =" bouton " data-toggle = "modal" data-target = ". bs-example-modal-lg"> Une grande boîte modale apparaît </futton> <div id = "mymodal" tabindex = "- 1" role = "dialog" aria-labelledby = "mylargemodallabel"> <v> - grande boîte modale <v> <v> <bouton type = "Button" Button "Button ' Aria-Label = "Close"> <span aria-hidden = "true"> × </span> </ bouton> <h4> Title modal </h4> </div> <div> <p> un beau corps… </p> </v> <v> <Button Type = "Button" Data-Dismiss = "Modal"> Fermer </ Button> <Button type = "Button"> Button> Sauver </div> </div> <! - Modifiez la taille de la boîte modale et ajoutez la classe modal-sm -> <bouton type = "Button" data-toggle = "modal" data-target = ". bs-example-modal-sm"> une petite boîte modale apparaît </ bouton> <div id = "myModal" tabindex = "- 1" role = "Dialog" " aria-labelledby = "mylargemodallabel"> <div> --- petite boîte modale <div> <v> <button type = "Button" data-dimismis = "modal" aria-label = "close"> <span aria-hidden = "true"> × </ span> </spink> <h4> Titre modal </h4> </v> <div> <Button Type = "Button" Data-Dismiss = "Modal"> Close </futton> <Button Type = "Button"> Enregistrer les modifications </futton> </div> </div> </div> </div> </div> <! - Les effets d'animation sont interdits, il suffit de supprimer le fondu -> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> <script type = --- Appeler ce code pour faire fonctionner le plugin </cript> </body> </html>
L'effet est le suivant:
Combiné avec des boîtes modales , vous pouvez également ajouter d'autres fonctions au contenu du corps, telles que les boîtes d'entrée intégrées dans le formulaire, etc., et aucun code n'est publié ici.
Pour les événements dans la boîte modale , ajoutez le code suivant dans JavaScript, comme indiqué ci-dessous:
Copiez le code comme suit: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> <script type = "text / javascript"> $ ("# myModal"). --- Appeler ce code pour faire en sorte que la boîte modale du plug-in prenne effet et affiche $ ('# myModal'). On ('Hidden.bs.modal', fonction (e) {
alerte ("111");
}) --- Cet événement signifie que l'événement d'alerte sera déclenché après la fermeture de la boîte modale </cript>
Jetons un coup d'œil à la façon dont la boîte modale est intégrée dans la vidéo. Nous devons ajouter du code, de la lecture automatique, de l'arrêt et d'autres fonctions. Jetons un coup d'œil au code d'abord
<a href = "#" data-toggle = "modal" data-target = "# videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyma===. aria-labelledby = "vidéomodal" aria-hidden = "true"> <div> <div> <v> <button type = "Button" data-dismiss = "modal" aria-hidden = "true"> × </ button> <v> <iframe src = ""> </ iframe> </ div> </v> </v> </div> </div> </ div> </v> </v> </ving src = "js / jQuery-1.11.3.min.js"> </ script> Fichier de chargement local -> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </cript> <script src = "js / bootstrap.min.js"> </ script> type = "text / javascript"> // afficher la fonction autoplaymodal () {var Trigger = $ ("body"). find ('[data-toggle = "modal"]'); trigger.click (function () {var themodal = $ (this) .data ("cible"); var videosrc = $ (this) .attr ("data-thevideo"); var videosrcauto = videosrc + "? autoplay = 1"; $ (themodal + 'iframe'). Button.close '). Cliquez sur (fonction () {$ (themodal +' iframe '). att (' src ', vidéosrc);});}); }); }); }); } // appelle la fonction $ (document) .ready (function () {autoplayModal ();}); </cript> <noscript> Ne prend pas en charge le navigateur JavaScript </noscript>L'effet n'est plus des captures d'écran, le SRC ci-dessus introduit l'adresse de Youku.
4. Composant de surveillance de défilement
Listé dans la barre de navigation, c'est-à-dire changer automatiquement les onglets en fonction de la position de défilement. Regardons le code.
1: Assurez-vous que la barre de défilement apparaît.
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"> À propos de </a> </li> <li> <a href = "# About"> About </a> </li> <li> <a href = "#" Data-Toggle = "Dropdown" Menu drop-down <b> </b> </a> <f <li> href = "# one"> un </a> <li> <a href = "# deux"> deux </a> <li> <a href = "# trois"> trois </a> </ul> </li> </ul> </div> </div> </AV> <! - Contenu présenté -> <h1 id = "Home"> Home </h1> <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "à propos"> À propos de </h1> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <hr> <h1 id = "one"> un </h1> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id = "deux"> deux </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
Comprenez la signification de la compensation des données: c'est-à-dire le décalage du haut lorsque la position de défilement est. Deuxièmement, son traitement d'événements est similaire à l'utilisation des boîtes modales et ne sera pas expliqué.
Les effets sont les suivants:
5. Composant de la boîte d'invite
Avis:
1: Utilisez Data-Toggle = "Tool Intip"
2: le placement de données représente la direction de la boîte rapide, il y a quatre directions, gauche, droite, bas, haut
3: L'animation des données consiste à définir son effet d'animation sur FALSE, c'est-à-dire qu'après que la souris est déplacée, elle passe de l'original progressif dans et vers une apparence instantanée, sans effet tampon.
<div> <p> <! - Easing -> Ceci est un titre de test, <a href = "#" "id =" clickevent "data-toggle =" toolpp "data-placement =" inférieur "data-original-title =" cnblog.com/jtjds "data-animation =" false "> cliquez moi, souvenez-vous </p> </jtjds <! - <! src = "js / jQuery-1.11.3.min.js"> </ script> Fichier de chargement local -> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </cript> <script src = "js / bootstrap.min.js"> </ script> Type = "Text / JavaScript"> $ ('[Data-Toggle = "ToolTip"]'). ToolSip (); // Initialize $ ('# Clickevent'). est affiché}) </script>6. Composant de cadre pop-up
Avis:
1: La boîte contextuelle ajoute une petite couche suspendue à n'importe quel élément pour stocker des informations non principales.
2: Lorsque la longueur du contenu est 0, la boîte contextuelle ne sera pas affichée. Utilisez Data-Toggle = "Popover"
3: s'appuyer sur le plug-in de la boîte d'invite et doit être initialisé manuellement (voir l'initialisation en javascript)
Regardez le code suivant et plus de captures d'écran:
Copiez le code comme suit: <! - Cliquez sur le bouton pour faire apparaître, puis cliquez sur le bouton pour masquer ->
<Button Type = "Button" Data-Toggle = "Popover" Data-Contint = "Et voici un contenu étonnant, c'est très engageant, non?"> Cliquez sur moi pour faire apparaître / masquer la boîte popup </fonticieuse>
Lorsque vous cliquez sur le bouton, il apparaît, puis cliquez sur le bouton et disparaît. Que dois-je faire si je veux cliquer dessus dans un espace vide et le masquer?
Ajoutez simplement Data-Trigger = "Focus" pour masquer la mise au point, le déclencheur signifie déclencheur.
Copiez le code comme suit: <! - Cliquez sur le bouton pour faire apparaître, cliquez sur n'importe quel espace vide pour le masquer. Il est préférable d'utiliser la balise A, bien sûr, vous pouvez également utiliser le bouton ->>
<a tabindex = "0" id = "mypopover" role = "bouton" data-toggle = "popover"
Data-Trigger = "Focus" Data-Content = "et c'est un beau contenu"> Cliquez sur moi pour disparaître </a>
7. Composant de la boîte d'avertissement
Avis:
1: Utilisez Data-Dismiss = "Alert"
2: Le plug-in peut ajouter des clics et disparaître au message d'avertissement
3: Lorsque vous utilisez le bouton Fermer, c'est-à-dire lorsque la classe de clôture est utilisée, ce doit être le premier élément enfant de l'alerte et le texte n'est pas autorisé à apparaître avant lui.
Regardons le code:
<! - Boîte d'avertissement -> <div id = "MyAlert"> <Button Type = "Button" Data-Dismiss = "Alert" Aria-Label = "Close"> <Span Aria-Hidden = "True"> × </span> </ Button> <span> Bienvenue </ Span> <Button Type = "Button"> Détails </sponse> </v> <div Id = "MyAlert1"> <Button Type = "Button" aria-label = "close"> <span aria-hidden = "true"> × </span> </sponse> <span> bienvenue </span> <bouton type = "Button"> Détails </ Button> </div>
S'il y a plusieurs boîtes d'avertissement dans JavaScript et que vous souhaitez fermer une boîte d'avertissement, ajoutez le code suivant en JavaScript, comme suit:
$ ("# myAlert"). alert ('close') // Lorsque la première boîte d'avertissement est fermée, ou lorsque #MyLeert est remplacé par # myAlert1, la deuxième boîte d'avertissement fermera $ ('# myAlert1'). sur ('clôturé.8. Composant de bouton
Avis:
1: Basculez l'état du bouton (désactivé ou allumé) - Ceci est réalisé à l'aide de AutoChosplelet = "OFF"
2: Faire plusieurs boutons en barres d'outils, etc.
3: Définissez l'état de chargement en définissant des données-chargement-text = "Loading ..."
<! - Button -> <Button Type = "Button" id = "MyButton" Data-wading-text = "Loading ..." AutoCerletelet = "OFF"> Chargement State </ Button> <Button Type = "Button" Data-Toggle = "Button" Aria-Primpe = "False" AutoCompletee Type = "Checkbox" AutoChatletele = "OFF" Checked> Home </ Label> <Belle> <Input Type = "Checkbox" AutoToPlelet = "OFF"> Message </ Label> <Beld> <INPUT TYPE = "Checkbox" AutoC Acomplete = "OFF"> Profil </ Label> </div>
Si vous souhaitez modifier le contenu après avoir cliqué sur le bouton, ajoutez des données-complete-text = "xxxx" et ajoutez le code JavaScript comme suit:
Copiez le code du code comme suit: <! - Après avoir cliqué sur Triggers, modifiez le contenu de Texte-Text-Text représente le contenu fini ->
<Button Type = "Button" DATA-COMPLETE-Text = "Finish" AutoCLEPLETE = "OFF"> Le contenu changera automatiquement après avoir cliqué sur </futton> <script> $ ('. MyBtn'). On ('click', function () {$ (this) .button ('complete') // Le contenu deviendra fini}) </script>
Pour définir le bouton sur l'état de commutation et définir l'heure sur l'état de commutation, vous pouvez ajouter le code suivant à JavaScript:
<Script> $ ('# mybutton'). sur ('cliquez', fonction (e) {var btn = $ (this) .button ('charging'); setTimeout (function (e) {btn.button ('reset'); // set restore sur état d'origine}, 3000)}) </script>9. Assemblage du cadre pliant
Remarque: utilisez data-toggle = "effondrement" pour voir le code:
<a role = "bouton" data-toggle = "effondrement" href = "# collatseExample" aria-exided = "false" aria-controls = "collatcheExample"> lien avec href </a> <div id = "collatseExample"> <div> Bonjour, c'est le test! </div> </div>
De plus, il peut être utilisé en combinaison avec des groupes de panneaux, comme indiqué ci-dessous:
<! - Groupe de panneaux -> <div id = "mypanel" role = "tablist"> <! - premier panneau -> <div> <div role = "tab" id = "headingone"> <h4> <a data-toggle = "effondrement" data-parent = "# mypanel" href = "# collatcheOne"> home </a> </h4> </v> <! role = "tabpanel"> <div> Bonjour à propos de moi </div> </div> </div> <! - Deuxième panneau -> </div>
En cliquant sur la maison pour contrôler la partie de contenu, il s'agit de définir son HREF = "# CollapseOne" qui est l'ID correspondant au contenu.
En ce qui concerne les événements, similaires à ceux utilisés plus tôt, ces composants ont une utilisation de temps similaire, comme suit
<script type = "text / javascript"> $ ('# mypanel'). on ('Hidden.bs.collapse', function () {alert ("2222");}) </script>10. Composant coulissant des voitures
Remarque: Utilisez des données-ride = "Carrousel", comme le carrousel que nous fabriquons habituellement. Regardons d'abord le code du diagramme du carrousel que j'ai fait:
<div id = "MyContainer"> --- Remarquez la cible de Data-Target <div id = "carousel1" data-ride = "Carousel"> <Ol> --Indicators représente l'indication de glissement, c'est-à-dire dont l'on glisse à partir de laquelle <li data-target = "# carousel1" data-slide-to = "0"> </li> - diaporama de la première one <lis-target) Data-Slide-to = "1"> </li> <li data-target = "# carousel1" data-slide-to = "2"> </li> </l> <! - Rendaring Content -> <div role = "listbox"> <div> <img src = "bg.jpeg"> <v> - CARUSEL-caption porte-t-cort <p> Sunshine Humeur, vous et moi irez avec vous </p> </div> </div> <div> <img src = "timg.jpg"> </div> <v> <! <span aria-hidden = "true"> </span> <span> précédent </span> </a> <a href = "# carousel1" role = "Button" data-Slide = "Next"> <span aria-hidden = "true"> </span> <span> suivant </span> </a> </v> </v>
Les effets sont les suivants:
En ce qui concerne la vitesse de glissement, vous pouvez ajouter directement Data-Interval = "2000" pour définir la baisse de l'interrupteur de 2 secondes, mais le problème avec cette méthode est que
Lorsque vous actualisez le navigateur, vous devez cliquer manuellement les boutons gauche et droit avant de pouvoir changer. La meilleure façon est de le définir en JavaScript. Comme indiqué dans le code suivant
<script type = "text / javascript"> $ (". Carousel"). Carousel ({interval: 2000;}) </script>11. Composants d'apixe
Remarque: utilisez la position: fixe pour le positionnement, utilisez des données-pypy = "affix" combinées avec des données pour obtenir la surveillance, et lorsqu'un certain événement se produit, il est décalé. Veuillez lire le code suivant:
<div> <! - Disposition du système de grille -> <div> <ul> <li> 1111111111 </li> <li> 222222222222 </li> <li> 333333333333333 </li> <li> 4444444444444444444 </li> </li> <li> 5555555555 </li> <li> 666666666666 </li> <li> 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <div > <ul> <li>1111111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>4444444444444444444444444444</li> <li>5555555555</li> <li> 6666666666666 </li> <li> 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> <script type = }}) $ ('. JS-Affixed-Element-Bottom'). Affix ({Offset: {Bottom: 200} --- Lorsque la souris roule en bas, le div passera automatiquement à 200px du bas}) </ script>Le composant JS est presque ici, et l'apprentissage du cadre de Bootstrap est presque terminé. Le prochain article est terminé. J'ai l'intention de concevoir une page spécifiquement avec Bootstrap pour la créer et la partager avec vous. Si vous apprenez également le framework Bootstrap, veuillez communiquer et apprendre!
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.