Ich habe das Layout des vorherigen Artikels weiter geschrieben. Im vorherigen Artikel habe ich das Layout der Navigationsleiste und der Werbung abgeschlossen.
Stellen Sie an:
Ich denke, das endgültige Rendering ist wie folgt wie folgt: Ich habe in drei Seiten Screenshots unterteilt, die zu groß sind:
Dann wird der letzte unvollendete fortgesetzt:
Schritt 5: Hinzufügen des Netzsystems habe das Layout von drei Spalten COL-MD-4 gewählt. Das vollständige Gitter ist 12 und 4 ist ein Drittel von 12. Sie können auch mehrere Gitter reagiert und festlegen:
<div id = "tag_container"> <div> <div> <img src = "Image/3.jpg"> <h2> Animal1 </h2> <p> Linka Hotel hat gerade gesagt Src = "Image/3.jpg"> <h2> Animal1 </h2> <p> Linka Hotel sagte gerade, Fenghan habe eine große Souvenir -Institution gesehen, die nach hinten geschickt wurde. Fenghan sah eine große Haussuchinstitution, die von mir gesendet wurde.
1) Das Raster muss sich in einem Container- oder Container-Fluent-Div befinden, sodass die angemessene Ausrichtung und Polsterung automatisch zugeordnet werden können.
2) Machen Sie die ID "tag_container" und der Teil mit der Klasse Col-MD-4 ist zentriert und ausgerichtet:
#TAG_Container .col-md-4 {text-align: center; }Schritt 6: Stellen Sie einen Linienabstand ein und teilen Sie die oberen und unteren Teile auf
<hr> </hr>
CSS ist
hr .divider {margin: 40px; }Schritt 7: Die Erstellung der Registerkartenseite. Das folgende Bild sind die Renderings der drei Registerkarten -Seiten:
1) Prinzip der Registerkarte:
<ul rollen = "Tablist"> <li> <a href = "#an1" rollen = "tab" data-toggle = "tab"> Animal1 </a> </li> <li> <a href = "#an2" rollen = "tab" data-toggle = "tab"> tin2 </a> <li> <li> <a href = "#"#"#"#"#"#"#"#"tab" tab "tab". Data-toggle = "tab"> Animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
Die Tag-Seitenstruktur lautet: UL-Liste deklariert das Tag- und Beschriftungen class = "nav-tabs" rollen = "bablist"
Der Link im LI-Tag ist die rolle = "tab" data-toggle = "tab", damit die Funktion des Öffnens der Seite der Registerkarte erreicht werden kann. Das HREF = "#an1" jeder Registerkarte ist mit dem folgenden Anzeiglayout verknüpft.
Erweiterte Layoutstruktur: In <div> verfügt jede Registerkartenseite über ein Panel. Beachten Sie, dass die ID auf die oben genannte Registerkartenseite kartiert, damit die Seite geöffnet werden kann. <div id = "an3">
2) Fügen Sie das Layout auf der Tag -Seite hinzu
<ul rollen = "Tablist"> <li> <a href = "#an1" rollen = "tab" data-toggle = "tab"> Animal1 </a> </li> <li> <a href = "#an2" rollen = "tab" data-toggle = "tab"> tin2 </a> <li> <li> <a href = "#"#"#"#"#"#"#"#"tab" tab "tab". data-toggle = "tab"> Animal3 </a> </li> </ul> <div> <div id = "an1"> <div> <h2> Animal1 <span> Zootopia </span> </h2> <p> AJDKGJFD sieht den Preis der Zeittechnologie-Flugzeuge, die von den Time-Technologi-Flugzeugen entwickelt wurden. If the Embassy Shiguo Police Day results cost, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/1.jpg"> </div> </div> </div> <div> <div> <h2>Animal2 <span>Zootopia</span></h2> <p> ajdkgjfd sieht den Preis für Zeittechnologieflugzeuge, die vom Zeittechnologieflugzeug entwickelt wurden. If the Embassy Shiguo Police Day results cost, the price of Ka song artificial mourning irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/2.jpg"> </div> </div> </div> <div id="an3"> <div> <div> <h2>Animal3 <span> Zootopia </span> </h2> <p> ajdkgjfd sieht den Preis für Zeittechnologieflugzeuge. Wenn der Tag der Botschaft Shiguo den Tag der Botschaft entsteht, ist der Preis für künstliche Trauer von Ka Song Irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "Image/3.JPG"> </div> </div> </div> </div> </div> </div> </div> </div> </div>
1) Stellen Sie den oberen Rand der Registerkartenseite ein
.Feature {Padding: 30px 0}2) Setzen Sie die Titelschriften der Registerkartenseite usw.
.Feature-Heading {Schriftgröße: 50px; Farbe:#2a6496; Rand: 120px; }3) Legen Sie das Untertitelformat der Registerkartenseite fest:
.Feature-Heading .Text-Mute {Schriftgröße: 28px; Farbe: #999; }Schritt 8: Fügen Sie den unteren Copyright -Hinweis hinzu, die Renderings sind wie folgt:
<fose> <p> <a href = "#top"> zurück nach oben </a> </p> <p>@2016 Rongyu System </p> </footer>
HINWEIS: class = "Pull-Light" kann das Element nach rechts ziehen, was eine Funktion von Bootstraps CSS ist.
Schritt 9: Fügen Sie die Popup-Taste hinzu:
<div id = "about"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-versteckt = "true"> × </span> </button> <h4> Über </h4> </div> <Pl. von Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. Simmons [1]. /.
1) Das statische Popup-Fenster ist in drei Teile unterteilt, Titel, Form und Knopf. Darunter brauchen wir nur einen Knopf und die andere kommentierte sich aus. Und fügen Sie ID = hinzu, um die Positionierung unten zu erleichtern;
2) In der Menüleiste über die Navigationsleiste fügen Sie Toggle-Link hinzu, data-toggle = "modal", und die ID entspricht Data-Target = "#About":
<li> <a href = "#" data-toggle = "modal" data-target = "#about"> über </a> </li>
Schritt 10, Menüpositionierung
Klicken Sie auf die Feature -Spalte der Navigationsleiste und die entsprechende Registerkarte wird geöffnet. Ein Stück JS -Code ist erforderlich, um ihn zu implementieren
<Script> $ (Dokument) .Ready (function () {$ ("#Demo-navbar .dropdown-menu a"). click (function () {var href = $ (this) .attr ('href'); // alert (href); $ ("#tab-list a [href = '"). </script>1) Navigieren Sie durch die ID-Positionierung $ ("#Demo-Navbar .Dropdown-Menu a") und legen Sie das Klickereignis fest.
2) Registerkarte ("'' show"), um die Registerkarte von $ ("#tablist a [href = '" + href + "']") zu öffnen.
Auf diese Weise hat Bootstrap Learning gerade erst begonnen.
Wenn Sie noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -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.