J'ai continué à écrire la disposition de l'article précédent. Dans l'article précédent, j'ai terminé la disposition de la barre de navigation et de la publicité.
Commencez à placer:
Je pense que le rendu final est comme ça, comme suit: J'ai divisé en captures d'écran de trois pages, qui sont trop grandes:
Ensuite, le dernier inachevé se poursuivra:
Étape 5: Ajout du système de grille, j'ai choisi la disposition de trois colonnes Col-MD-4; La grille complète est de 12 et 4 est un tiers de 12. Vous pouvez également disposer et définir plusieurs grilles:
<div id = "tag_container"> <div> <div> <img src = "image / 3.jpg"> <h2> animal1 </h2> <p> hôtel linka vient de dire que Fenghan a vu une grande institution de souvenir envoyée à l'arrière </p> <p> <a href = "#"> cliquez moi </a> </p> </v> src = "image / 3.jpg"> <h2> animal1 </h2> <p> hôtel linka vient de dire que Fenghan a vu une grande institution de souvenirs envoyée à l'arrière </p> <p> <a href = "#"> cliquez sur moi </a> </p> </ div> <v> <img src = "Image / 3.jpg"> <h2> Animal1 </ h2> <p> Linka Hotel "Just"> <h2> que Fenghan a vu une grande institution de recherche de maisons envoyée par moi </p> <p> <a href = "#"> Cliquez sur moi </a> </p> </div> </div> </div> </div> </div>
1) La grille doit être dans un récipient ou une div-coulante, de sorte que l'alignement et le rembourrage appropriés peuvent être automatiquement attribués.
2) Faire l'ID "TAG_CONTAINER" et la partie avec la classe COL-MD-4 est centrée et alignée:
#TAG_CONTAINER .COL-MD-4 {Text-Align: Centre; }Étape 6: Réglez un espacement de ligne et divisez les parties supérieures et inférieures
<hr> </hr>
CSS est
hr .divider {margin: 40px; }Étape 7: La création de la page Tab. L'image suivante est les rendus des trois pages d'onglet:
1) Principe d'onglet page:
<ul role = "tablist"> <li> <a href = "# an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "# an2" role = "tab" data-toggle = "tab"> animal2 </a> </li> <li> <a href = "# an3" role = "tab" data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </v> </div>
La structure de la page de balise est: la liste UL déclare la balise et les étiquettes class = "navAV-tabs" role = "tablist"
Le lien dans la balise Li est marqué role = "tab" data-toggle = "tab" afin que la fonction d'ouverture de la page de la page d'onglet puisse être réalisée. Le href = "# an1" de chaque page d'onglet est lié à la disposition d'affichage suivante.
Structure de mise en page étendue: Dans <v>, chaque page d'onglet a un panneau. Notez que l'ID mappe à la page d'onglet ci-dessus, afin que la page puisse être ouverte. <div id = "an3">
2) Ajouter la mise en page dans la page de balise
<ul role = "tablist"> <li> <a href = "# an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "# an2" role = "tab" data-toggle = "tab"> animal2 </a> </li> <li> <a href = "# an3" role = "tab" data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> <div> <div> <h2> animal1 <span> zootopia </span> </h2> <p> ajdkgjfd voit le prix des aéronefs de technologie de temps développés par les aérecs de technologie. Si l'ambassade des résultats de la Journée de la police de Shiguo, le prix de Ka Song artificiel deuil irjeigrugitajdokgjijrgi </p> </div> <v> <img src = "Image / 1.jpg"> </div> </div> </ div> <v> <iv> <h2> Animal2 <pan> Zootopia </ span> </ h2> <p> ajdkgjfd voit le prix des avions de technologie du temps développés par les avions Time Technology. Si l'ambassade des résultats du jour de la police de Shiguo, le prix de Ka Song artificiel deuil irjeigrugitajdokgjijrgi </p> </ div> <v> <img src = "image / 2.jpg"> </div> </ div> </div> <div id = "an3"> <div> <h2> Animal33 <span> zootopia </span> </h2> <p> ajdkgjfd voit le prix de la technologie du temps. Si l'ambassade de la Journée de la police de Shiguo, le prix de Ka Song Artificiel Depiring Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "Image / 3.jpg"> </div> </div> </div> </div> </div> </div>
1) Réglez la marge supérieure de la page Tab
.Feature {rembourrage: 30px 0}2) Définissez les polices de titre de la page Tab, etc.
. Couleur: # 2A6496; marge: 120px; }
3) Définissez le format de sous-titre de la page Tab:
.Feature-Heading .Text-Mutted {Font-Size: 28px; Couleur: # 999; }Étape 8: Ajoutez le préavis du droit d'auteur, les rendus sont les suivants:
<footer> <p> <a href = "# top"> Retour vers le haut </a> </p> <p> @ 2016 Rongyu System </p> </footer>
Remarque: class = "pull-droite" peut tirer l'élément vers la droite, qui est une caractéristique du CSS de bootstrap.
Étape 9: Ajoutez le bouton contextuel sur:
<div id = "About"> <div> <div> <div> <Button Type = "Button" Data-Dismiss = "MODAL" Aria-Label = "Close"> <span Aria-Hidden = "True"> × </span> </fitton> <h4> À propos de </h4> </v> <div> <p> ZOOTOPIA "est produit par Disney Pictures, Copireated par Rich Moore, Byrne et Gerald Pictures, Copinted, Copired par Rich Moore, par Rich MORDO et exprimé par Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. /.modal-content -> </div> <! - /.modal-dialog -> </div> <! - /.modal-dialog -> </div> <! - /.modal ->
1) La fenêtre contextuelle statique est divisée en trois parties, titre, forme et bouton; Parmi lesquels, nous n'avons besoin que d'un seul bouton et l'autre a commenté. Et ajouter id = sur le point de faciliter le positionnement ci-dessous;
2) Dans la barre de menus sur la barre de navigation, ajoutez un lien de conduite, data-toggle = "modal", et ID correspond à data-target = "# about":
<li> <a href = "#" data-toggle = "modal" data-target = "# about"> À propos de </a> </li>
Étape 10, positionnement du menu
Cliquez sur la colonne de fonctionnalité de la barre de navigation et la page d'onglet correspondante sera ouverte; Un morceau de code JS est nécessaire pour l'implémenter
<Script> $ (document) .ready (function () {$ ("# Demo-Navbar .Dropdown-Menu a"). Cliquez sur (fonction () {var href = $ (this) .attr ('href'); // alert (href); $ ("# tab-list a [href = '" + href + "']"). </cript>1) naviguez dans le positionnement de l'ID $ ("# Demo-Navbar .Dropdown-Menu A") et définissez l'événement de clic;
2) Tab ("'Show") pour ouvrir la page Tab de $ ("# Tab-list a [href ='" + href + "']").
De cette façon, l'apprentissage bootstrap vient de commencer.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage 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.