Heute werden wir uns die Auswirkungen der CSS -Komponente und die wichtigeren Klassen ansehen. Diese Klassen sind nicht schwierig. Der Schlüssel besteht darin, sie kompetent zu meistern, sie in Kombination zu verwenden und flexibel zu verwenden. Für Artikel über den CSS -Stil und das Layout in den ersten beiden Artikeln können Sie sie in den vorherigen Artikeln lesen.
1. Navigationskomponenten
Ich habe selbst eine Navigation gemacht. Derzeit gibt es nur ein Menü der ersten Ebene. Im nächsten Artikel wird ein Menü der zweiten Ebene angegeben, das JS-Plug-Ins betrifft, sodass ich es hier nicht beschreiben werde.
<! 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> Menü zweiter Ebene </title> <style>. SideBar-Menu {Margin: 20px Auto; Breite: 180px;}/*Schreiben Sie den Stil der Maus-Sliding*/. nav-pills li a: hover {Hintergrundfarbe: #337ab7; Farbe: #fff;} </style> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><body><!-- bootstrap production navigation menu--><div> <ul> <li role="presentation"><a href="#"><span></span>Home</a></li> <li role="presentation"><a href="#"><span></span>About me</a></li> <li role="presentation"><a href="#"><span></span>Those years</a></li> <li ROLLE = "Präsentation"> <a href = "#"> <span> </span> fehlt </a> </li> <li rollen = "Präsentation"> <a href = "#"> <span> </span> Message Board </a> </li> <li rolle = "präsentation"> <a href = " </ul> </div> </body> </html>Die Effekte sind wie folgt:
Die folgenden Punkte sollten in der Navigation festgestellt werden:
1: Die Navigationskomponente hängt von der NAV -Klasse ab. (Das heißt, wenn Sie andere Klassen verwenden, müssen Sie diese Klasse schreiben)
2: Stellen Sie die Zugänglichkeit von Navigationskomponenten sicher (Hinzufügen von Rollenattribut).
3: Zu den beteiligten Klassen gehören Navi-TABs, Navigations-Pills (Make Navigation Capsules), Navigationsstapel (horizontale Navigation in vertikale Navigation), navigifiziert (Navigation machen Navigationsanordnung gleichermaßen)
4: Für die deaktivierte Klasse wird beim Hinzufügen von Links auf der Navigationsseite (einschließlich Registerkarten und Navigationsseiten) nur auf der Oberfläche deaktiviert (die Farbe wird grau, die Mausform ändert sich) und die tatsächliche Funktion besteht immer noch.
5: Verwenden Sie die Navigation mit Dropdown-Menü.
Schauen wir uns den folgenden Unterabschnitt an: Sie können Code einfügen und selbst testen und keine Screenshots mehr machen.
<!-Die Navigation hängt von der NAV-Klasse-Nav-Tabs-Klasse-NAV-Klasse ab-> <ul> <li rollen = "Präsentation"> <a href = "#"> home </a> </li> --- Bitte Rollenattribut addieren <li rollen = "Präsentation"> <a href = "#"> Profil </a> </li rollen = "> <a href ="#"#"#"#"> Nachrichten "> <a href ="#"#"#"> monds"> </li> <> <a href = " </ul><!--Capsule tabs vertically arranged nav-stacked--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <!--Aligning navigation at both ends nav-justified to achieve navigation column alignment--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <br><br>
Schauen wir uns den Navigationsstatus mit dem Dropdown-Menü an:
<ul> <li role="presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown<span></span> </a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Action 111</a></li> <li> <a href = "#"> action 222 </a> </li> <li> <a href = "#"> action 333 </a> </li> </li> </li> <li> <a href = "#"> action 333 </a> </li> </li> </li> <li> <a href = href Verwenden von leerem Li oder Spannweite. <li rollen = "Präsentation"> <a href = "#"> profile </a> </li> <li rollen = "Präsentation"> <a href = "#"> Nachrichten </a> </li> </ul>
Für die Verwendung der Dropdown -Menüklasse Dropdown ist das grundlegende Format wie das oben genannte oder wenn Sie Link A in Taste usw. verwandeln, können Sie es flexibel verwenden.
2. Navigationsleistenkomponente
Notiz:
1: Die Navigationsleiste soll alle Komponenten horizontal anordnen und die Komponenten einwickeln, ähnlich wie die horizontale Navigation
2: Stellen Sie die Zugänglichkeit sicher. Verwenden Sie das <nav> Tag oder <div rollen = "navigation">
3: Zu den an Navigationsstangen beteiligten Klassen gehören: Navi-Inverse (um die Hintergrundfarbe als Schwarz und Text weiß zu implementieren), naviabbärt-top-top | naviabbärer Bottom (feste Navigationsstangen oben und unten)
Navbar-Links | Navbar-Right (normalerweise fügen Sie Navbar-Recht zum letzten Element hinzu), navi-text, naval-link (setzen
Verwenden Sie diese Klasse, um den Effekt der vertikalen Zentrierung zu erreichen), Navigationsform (um vertikale Ausrichtung zu erreichen), Navber-Brand (Set Brand Icon), Navi-Collapse (Zusammenbruch)
Schauen wir uns den Effekt der Navigations-Collapse-Faltung an. Der Code lautet wie folgt:
<!-- Navigation bar collapsed means folding--><nav> <div> <div> --Navigation bar header<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span> </span> </button> <a href = "#"> brand </a> </div> <div id = "bs-example-navbar-collapse-1">-falting-Falten <ul> <li> <a href = "#"> link </span> </a> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <a href = "#"#"#"#"#"> href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something sonst hier </a> </li> <li> <a href = "#"> getrennter Link </a> </li> <li rolle = "separator"> </li> <li> <a href = "#"> Ein weiterer getrennter Link </a> </li> </li> </li> </ul> <form. Typ = "Senden"> Senden </button> </form> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "Dropdown" rollen = "button" aria-haspopup = "true" aria-expanded = "aa> <lace"> dropdown </span> </span> </span> </span; href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </li> </li> </div><!-- navbar-collapse 可以可以可--><div> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false"> <span> Umkippungsnavigation </span> <span> </span> </span> </span> </span> </span> </button> </button> </button> </button> </button> </button> </button
Der Effekt ist wie folgt:
Das heißt, wenn mein Browser -Bildschirm schrumpft, werden die ursprünglichen Komponenten auf der rechten Seite der Markenlinie zu gefalteten Linien (drei horizontale Linien). Klicken Sie auf die drei horizontale Schaltfläche und die Komponente wird angezeigt.
3. Paginationskomponenten
Notiz:
1: Verwenden Sie Klassenpagination (Fügen Sie die Pagination-LG-Klasse hinzu, um sie größer zu machen)
2: Seitbetriebsausrichtung erreichen und Seitenumziehungsausrichtung implementieren (vorne und hinten befinden sich an beiden Enden).
Der Code ist wie folgt:
<!-Paginierungskategorie-> <nav> <ul> <li> <a href = "#" aria-label = "vorher"> <span aria-hidden = "true"> «</span> </a> </li> <li> <a href ="#"> 1 </li> <a> <a href =" href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> <li> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" ursach aria-hidden = "true"> »» »</span> </a> </li> </ul> </nav>
Wenn Sie das Paging implementieren, fügen Sie einfach <ul> hinzu.
Der Seitenwende -Effekt lautet wie folgt: Verwenden Sie hauptsächlich die Pager -Klasse
<!-Flip-up-> <nav> <ul> <li> <a href = "#"> vorher </a> </li> <li> <a href = "#"> Weiter </a> </li> </ul> </nav> <! aria-hidden = "true"> ← </span> älter </a> </li> <li> <a href = "#"> neuer <span aria-hidden = "true"> → </span> </a> </li> </ul> </nav>
Die Auswirkungen der oben genannten zwei sind wie folgt:
4. Abzeichen
Funktion: Präsentieren Sie die Informationen in auffälligen Zahlen.
<!-Badge-> <a href = "#"> Inbox <span> 42 </span> </a> <button type = "button"> message <span> 4 </span> </button>
Die Effekte sind wie folgt:
Das Hinzufügen dieser Art von Abzeichenklasse kann auch mit Navigation usw. verwendet werden.
5. Miniaturansichtenkomponente
Verwenden Sie es mit Rastersystem und Miniaturansicht. Der Code ist wie folgt: Kann von dir selbst getestet werden
<!-- Thumbnail thumbnail --><div> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> <!-- Second --> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> <!-- Third --> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href = "#" rollen = "button"> button </a> </p> </div> </div> <!-dritter-> <div> <img src = "111.png"> <div> <h3> Dumbnail label </h3> <pngs </divf = "#" rollen = "button"> button "> button"> button "> button"> button "> button </div> </div> </div> </div> </div> </div>
6. Schließbare Warnbox
Verwenden Sie die Klasse: Alarm-Dismizible und eine Schaltfläche werden wie folgt veröffentlicht:
<!-Geben Sie eine Schließung für das Warnfeld an-> <div rollen = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-versteckt = "true"> × </span> --add Aria-Hidden Attribut </button> <strongs </dosidy </strong> Besser. Stellen Sie auf allen Geräten das korrekte Verhalten sicher ->
In Bezug auf die Szene können Sie sie selbst ersetzen. Keine Beschreibung mehr. Stellen Sie die Alarm-Link ein, um die Farbe festzulegen, die dem aktuellen Warnbox entspricht.
7. Fortschrittsbalken
Verwenden Sie Klasse: Fortschritts- und Fortschrittsbalken, um die Animation zu implementieren
<!-Progress bar-> <div> <div rollen = "progreshbar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60% </div> </div> <!-Setzen Sie die minimale Breite-> <div> <divaluemin = progreshin = "0" 0 "0" 0 "0" 0 "0" 0 "0", " aria-valuemax = "100"> 80% </div> </div> <div> <div rollen = "progressBar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-width: 2em;
Verwenden Sie, um den Fortschrittsbal des Animationseffekts zu erreichen, um den Animationseffekt zu erzielen und aktiv hinzuzufügen. Der Code lautet wie folgt: Keine Screenshots mehr
<!-- Use progress-bar-striped in the stripe class --><div> <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> <span>40% complete</span>100% </div></div>
Sie können auch die Farbe der Fortschrittsbalkenstreifen in Kombination mit der Szenenfarbe ändern.
8. Listengruppe, Eingabegruppenkomponenten
Schauen wir uns zunächst die Listengruppe an, hauptsächlich mit der Listengruppenklasse, und zweitens werden die Listenelemente mit List-Gruppen-Element geschrieben. Der Code ist wie folgt:
<!-List Group-> <ul> <li> <Pan> 3 </span> 1111 </li> <li> <Pan> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <! href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <!-Button-Button-Button-Button-Button, Div und kann div. type="button">2222</button> <button type="button">3333</button> <button type="button">4444</button><!--List group item--><div> <a href="#"> <h4>list group item</h4> <p>11111</p> </a> <a href="#"> <h4>list group item</h4> <p> 22222 </p> </a> </div>
Schauen wir uns die Eingabegruppe an und verwenden Sie die Eingangsgruppenklasse, um die Komponenten zusammenzuwickeln. Der Code ist wie folgt:
<!-Eingabegruppe-> <div>-Die Komponenten sind in der Inout-Gruppen <span> <schalttype = "button"> go </button> </span> <Eingabe type = "text" aria-label = "text"> </div> enthalten
9. Einbetten Sie den Inhalt reaktionsschneller Merkmale ein
Verstehen Sie, was es bedeutet und was eingebetteter Inhalt ist? Wie kann man es einbetten? Wie kann man also antworten?
Einbettung: Verwenden Sie Tags wie <Iframe>, <Bed>, <video> und <Object>, um externe Dateiinhalte einzuführen. Ich glaube, dass jeder die neuen Attribute in HTML5 kennt. Video, Radio usw.
Antwort: Erstellen Sie automatisch eine feste Skala basierend auf der Breite des eingebetteten externen Containers, sodass der Browser die Größe des Videos oder des Inhalts automatisch bestimmen kann und auf verschiedenen Geräten skalieren kann.
Wenn Sie möchten, dass der endgültige Stil anderen Eigenschaften entspricht, können Sie auch eine abgeleitete .embed-responsive Elementklasse ausdrücklich verwenden.
Der Code ist wie folgt:
<div> <frame src = "..."> </iframe> </div> <div> <frame src = "..."> </iframe> </div>
Schauen wir uns an, was einhöre, reagierende 16BY9 und ein-responsiv-4By3-Mittelwert.
Schauen wir uns die Konsole an:
.Embed-responsiv-4by3 {--- 4 repräsentiert horizontal, 3 repräsentiert vertikal, dh ein Skalierungsverhältnis, dh eine Skala von 4: 3 Padding-Bottom: 75%;} .. Einbett-Responsive-16by9 {Padding-Bottom: 56,25%;Halten Sie das Seitenverhältnis bei, wenn die Breite bei 100%berechnet wird, ist es 100% * 3/4 = 75%. Setzen Sie zu diesem Zeitpunkt das Seitenverhältnis, indem Sie seine Polsterbotoms festlegen. Wenn Sie den Browser zoomen,
Halten Sie dieses Skalierungsverhältnis für die Skalierung.
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.