Les deux articles précédents ne parlent que de la façon d'utiliser des composants, fondamentalement pas sur JS. Ce blog doit être discuté en combinaison avec JS.
Laissez-moi expliquer plusieurs composants
1. Boîte modale
2. Suivi de défilement
3. Page de balise
4. INTÉRIEURS
5. Boîte pop-up
6. Bouton
7. Empilement
8. Page tournante
9. barre latérale
Importez d'abord CSS et JS
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css"> <lin src = "js / jQuery-3.1.0.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script>
1. Boîte modale
Nous utilisons généralement cette boîte modale lors de la connexion ou de la lecture de certaines réglementations, donc la boîte modale est très courante
Écrivez d'abord un bouton pour ouvrir la boîte modale
<! - Data-Target est l'ID de notre boîte modale, et Data-Whathever = "@ ime" est la balise et la valeur de la boîte modale que nous transmettons -> <Button Type = "Button" Data-Toggle = "Modal" Data-Target = "# MyModal" Data-Whatter = "@ iMe"> Ouvrez la boîte modale </ / Button>
Puis écrivez la boîte modale
<div id = "mymodal" role = "dialog" aria-label = "mymodallabel" aria-hidden = "true"> <! - Ceci est une petite boîte modale. Modifier Modal-SM en modal-LG est une grande boîte modale -> <div> <! - Modal Box Head -> <div> <! - Bouton Fermer dans le coin supérieur droit -> <Button Type = "Button" Data-Dismiss = "MODAL" Aria-Label = "MODNALLAL" Contenu de la boîte -> <div> <! - Le contenu du trame modal peut être du texte ou de la table -> <! - <p> Bonjour </p> -> <form> <v> <vabe> Nom d'utilisateur </ label> <entrée type = "Text"> </ div> <v> <boulined> mot de passe </ Label> <entrée type = "Mot de passe"> </v> </ Form> </ Div> <! - Foot modal - Foot -> </vout> </ form> "bouton" bouton "bouton" 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>
Si vous cliquez sur le bouton, puis passez les paramètres à la table dans la zone modale
Ajouter un label de données à l'attribut du bouton: valeur
Les données ci-dessus-whathever = ”@ ime" sont ajoutées à titre d'exemple. Le paramètre avec l'étiquette n'importe quoi et la valeur de @ime est ajouté.
Ce qui suit est l'opération JS
// Méthode $ ("# mymodal"). Sur ("show.bs.modal", fonction (e) {// Obtenez le bouton que vous cliquez sur pour ouvrir var bouton = $ (e.relatedtarget) // Obtenez le paramètre transmis par le bouton Var destinataire = bouton.data ("tout ce qui" modal.find (". modal-title"). text ("hello" + destinataire); // modifie la valeur de l'entrée dans le corps modal.find (". Modal-Body Input"). Val (destinataire)})2. Suivi de défilement
Diaposité vers différents contenus, la page onglet changera
Écrivez d'abord l'attribut corporel
<! - Le décalage est défini sur 70, cette valeur est la meilleure valeur testée ->
<Body Data-Spy = "Scroll" Data-Target = ". Navbar" Data-Offset = "70">
Ensuite, écrivez l'onglet
<! - Le haut du contenu affiché fixé dans la barre d'onglet -> <nav role = "navigation"> <div> <div id = "MyScrollSpy"> <ul> <! - La connexion dans la balise est l'ID du titre ci-dessous -> <li> <a href = "# iwen"> iwen </a> </li> <li> <a href = "# iMe"> ime> <! - Menu déroulant Nest dans la balise -> <li> <a href = "#" data-toggle = "Dropdown"> Menu drop-down <span> </span> </a> <ul role = "menu"> <li> <a href = "# one" tabindex = "- 1"> un </a> </li> <li> <a href = "# # deux" TabIndEx = " </li> <li> <a href = "# trois" tabindex = "- 1"> Trois </a> </li> </ul> </li> </li> </ul> </div> </div> </AV>
Ensuite, écrivez le contenu
<h2 id = "iwen"> @ iwen </h2> <p> C'est une personne qui est une personne </p> <h2 id = "ime"> @ ime </h2> <p> c'est une personne Ceci est une personne </p> <h2 id = "One"> @ One </h2> <p> C'est une personne qui est une personne </p> <h2 id = "deux"> @ deux </h2> <p> c'est une personne Il s'agit d'une personne </p> <h2 id = "trois"> @ trois </h2> <p> c'est une personne, c'est une personne </p> <h2 id = "trois"> @ trois </h2> <p> C'est une personne qui est une personne </p>
Il est recommandé d'écrire le contenu plus longtemps afin que l'effet soit plus évident. Il n'est pas pratique d'écrire trop de mots inutiles ici.
Vous pouvez également écrire certaines méthodes JS
// Méthode $ ("# myscrollspy"). Sur ("active.bs.scrollSpy", fonction (e) {alert ("bonjour");})3. Page de balise
Cliquez sur différentes balises pour afficher différents contenus
Écrivez d'abord la barre d'étiquette
<ul id = "mytab"> <! - Un lien de balise correspond à l'ID de l'onglet-pane ci-dessous -> <li> <a href = "# home" data-toggle = "tab"> home </a> </li> <li> <a href = "# profil" data-toggle = "tab"> Profil </a> </li> <li> <a href = "#" id = "mytabdrop1" data-toggle = "Dropdown"> Menu dropdown <span> </span> </a> <ul role = "menu"> <! - Contrairement aux menus déroulants ordinaires, ajoutez data-toggle = "tab" -> <li> <a href = "# one" tabindex = "- 1" data-toggle = "tab"> un </a> </li> <li> <a href = "# deux"-1 " data-toggle = "tab"> deux </a> </li> </ul> </li> </li> </ul>
Ensuite, écrivez des contenus de différentes balises
<div id = "myTabContent"> <div id = "home"> <p> home </ p> <div id = "Profil"> <p> Profil </p> <div id = "One"> <p> un </p> <div id = "Two"> <p> Two </p>
Vous pouvez initialiser la page onglet affichée avec JS
Il existe plusieurs façons de sélectionner une page d'onglet
$ ('# mytabs a [href = "# profil"]'). tab ('show') // select $ ('# mytabs a: premier'). tab ('show') // sélectionnez la première page d'onglet $ ('# mytabs a: dernier'). onglet ('show') // Sélectionner la page tab ('# # mytabs li: eq (2) a'). (parce que 0 est le premier). S'il s'agit d'une page d'onglet dans le menu déroulant, le numéro doit être ajouté par 1.4. INTÉRIEURS
<p> <! - Si le contenu du titre est vide, le contenu du titre original de données est affiché. Le placement est la position d'affichage, qui peut être définie en haut | en bas | à gauche | droite -> <! - Les paramètres peuvent être définis dans les données - **** ---> Bienvenue à <a data-animation = "false" id = "mytooltip" href = "#" data-toggle = "toolttip" data-placement = "inférieur" Original-Title = "www.jk.com"> mack
Ensuite, vous devez l'initialiser avec JS, sinon il n'aura aucun effet
// Initialiser l'infiltral, pointer à afficher
$ ('[data-toggle = "tooltp"]'). ToolTip ();
5. Boîte pop-up
La boîte contextuelle est similaire à une info
<! - Data-Trigger = "Foucus" Cliquez sur le blanc pour disparaître. Si vous ne l'ajoutez pas, cliquez sur le bouton pour disparaître. Si vous le définissez sur planer, le bouton que vous déplacez s'affiche. Retirez et disparaissez -> <! - Cette boîte contextuelle est intitulée, et le contenu est du contenu -> <bouton type = "bouton" Data-Trigger = "Foucus" Data-Placement = "Bottom" Data-Toggle = "Popover" Data-Contony = "Content"> Pop-up Box </ftont>
Puis l'initialisez avec JS
// Initialiser le popover
$ (". JS-Popover"). Popover ();
6. Bouton
Les deux premiers articles parlent du style de base des boutons. Cette fois, il est avancé, permettant aux boutons d'afficher différents texte lors du chargement.
<! - Vous pouvez définir le texte du bouton lors du chargement -> <Button Type = "Button" Data-wading-tex
Puis utilisez JS pour lier l'événement de clic
// L'événement de clic du bouton de liaison $ (". JS-chargement-btn"). Sur ("cliquez", fonction (e) {// après avoir cliqué, définissez le chargement de l'état, affichant le texte du chargement var btn = $ (this) .button ("Chargement"); // Restore setTimeout (function)7. Empilement
L'effet d'empilement peut économiser beaucoup de commandes d'écran, ce qui est très pratique
C'est pour cliquer sur le bouton pour ouvrir la pile
<! - Href est l'ID du contenu -> <a data-toggle = "effondrement" href = "# collatcheExample"> cliquez pour voir </a> <div id = "collatcheExample"> <div> Bonjour </div> </div>
Ceci est la pile de groupes de panneaux
<div id = "accordéon" role = "tablist"> <div> <div role = "tab" id = "HeadingOne"> <! - Titre affiché -> <h4> <! - Data-Parent Si l'ID du panneau-group -> <a data-toggle = "Collapse" Data-Parent = "# accorde" href = "# collapseone"> élément1 </a> <h4> Sans cachette -> <div id = "collapseone" role = "tabpanel"> <div> bonjour <br> Bonjour <br> Bonjour <br> </div> </div> </div> <v> <div role = "tab" id = "headingtwo"> <h4> <a data-toggle = "collapse" data-parent = "# accorde" href = "# collachet" </h4> </div> <div id = "colllatssetwo" role = "tabpanel"> <div> Bonjour <br> Bonjour <br> Bonjour <br> </div> </div> </div> <div> <div role = "tab" id = "HeadingThree"> <h4> <a data-toggle = "effondrement" data-parent = "# accorde" href = "# collapethree </a) </h4> </ div> <div id = "collapsethree" role = "tabpanel"> <div> Bonjour <br> Bonjour <br> Bonjour <br> </div> </div> </div> </div> </div> </div> </div>
8. Page tournante
Nous pouvons souvent le voir sur la page d'accueil du site Web
<div id = "Carousel-Example-Generic"> <! - Ce sont les trois cercles blancs en dessous de l'indicateur -> <Ol> <li data-target = "# carousel-example-générique" Data-Slide-to = "0"> </li> <li data-target = "# caresel-exemple-generic" data-slide-to = "1"> </li> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "2"> </li> </l> <! - Le contenu de la page de rotation -> <div> <img src = "Images / 4.jpg"> <! - Ajouter du texte -> <div> <h3> U3D </h3> <p> nouvelle version </p> </p> </v> src = "images / 2.jpg"> <div> <h3> u3d </h3> <p> lancement du nouveau produit </p> </div> </div> <v> <img src = "Images / 3.jpg"> <v> <h3> Apple </h3> <p> Apple </p> </v> </v> <! href = "# carrousel-example-générique" data-slide = "prew"> <span> </span> </a> <a href = "# carousel-example-generic" data-slide = "next"> <pan> </span> </a> </ div>
Vous pouvez définir des intervalles et démarrer automatiquement avec JS
// définit l'intervalle sur 2s et le carrousel automatique (". Carousel"). Carrousel ({intervalle: 2000})9. barre latérale
Le contenu principal de la barre latérale est une liste
<! - Pour définir la largeur, cachez-le sur l'écran du téléphone -> <div> <ul> <a href = "#"> Bonjour </a> <a href = "#"> Bonjour </a> <a href = "#"> Bonjour </a> href = "#"> bonjour </a> <a href = "#"> Bonjour </a> <a href = "#"> Bonjour </a> <a href = "#"> Bonjour </a> </ul> </div>
Écrire à nouveau le style
<style> .Affixed-element-top.affix {/ * Si vous voulez être en bas, vous pouvez le changer en bas: 10px; * / top: 10px; } .affixed-element-top.affix-bottom {position: relative; } </ style>Ajouter du js
$ (". JS-Affixed-Element-Top"). Affix ({Offset: {}})C'est l'utilisation de base de Boostrap. Après l'avoir maîtrisé, vous pouvez créer une bonne page Web.
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.