Bootstrap -Layoutkomponenten
1. Bootstrap -Schriftikone
(1) L -Symbollistenlink
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Verwendung
Um Symbole zu verwenden, verwenden Sie einfach den folgenden Code. Bitte behalten Sie den entsprechenden Platz zwischen dem Symbol und dem Text. Keine CSS von Glyphicon.
<span> </span>
(3) Customized Font -Symbol
Wir haben gesehen, wie man Schriftsymbole verwendet, und als nächstes werden wir sehen, wie man Schriftarten anpassen.
Wir beginnen mit dem obigen Beispiel und passen das Symbol an, indem wir die Schriftgröße, die Farbe und das Anwenden von Textschatten ändern.
A. benutzerdefinierte Symbole
<button type = "button"> <span> </span> user </button>
B. Customisierte Schriftgröße
Durch Erhöhen oder Verringern der Schriftgröße des Symbols können Sie das Symbol größer oder kleiner aussehen lassen.
<button type = "button" style = "font-size: 60px"> <span> </span> user </button>
C. Schriftfarbe anpassen
<button type = "button" style = "color: rgb (212, 106, 64);"> <span> user </button>
D. Textschatten anwenden
<button type = "button" style = "text-shadow: schwarz 5px 3px 3px;"> <span> </span> user </button>
2. Bootstrap Dropdown-Menü
(1) Das Dropdown-Menü ist schaltbar und ein Kontextmenü, in dem der Link in einem Listenformat angezeigt wird. Dies kann durch Interaktion mit dem Dropdown -Menü (Dropdown) JavaScript -Plugin erreicht werden.
Um das folgende Menü zu verwenden, fügen Sie einfach ein Dropdown-Menü in der Klasse hinzu .dropdown.
<Div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown"> Thema <span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rolle = "Präsentation"> <a rollen = "Menuitem" </li> <-1 "href =" <a role="menuitem" tabindex="-1" href="#">Data Mining</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> Data Communication/Network</a> </li> <li role="presentation"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href = "#"> getrennte Links </a> </li> </ul> </div>
(2) ausrichten
Richten Sie das Dropdown-Menü genau aus, indem Sie.
(3) Titel
Sie können den Dropdown-Header mit Klassen verwenden, um dem Etikettenbereich des Dropdown-Menüs einen Titel hinzuzufügen.
3.. Bootstrap -Knopfgruppe
(1) Die Schaltflächengruppe ermöglicht es, mehrere Tasten auf derselben Zeile gestapelt zu werden. Dies ist sehr nützlich, wenn Sie die Tasten miteinander ausrichten möchten.
(2) Nisten
Sie können eine andere Knopfgruppe innerhalb einer Knopfgruppe nisten, dh eine andere .BTN-Gruppe innerhalb einer .BTN-Gruppe. Dies wird verwendet, wenn Sie das Dropdown-Menü in Kombination mit einer Reihe von Schaltflächen verwenden.
4. Bootstrap-Taste Dropdown-Menü
Verwenden Sie die Bootstrap-Klasse, um der Schaltfläche ein Dropdown-Menü hinzuzufügen. Um einer Schaltfläche ein Dropdown-Menü hinzuzufügen, platzieren Sie einfach die Schaltfläche und das Dropdown-Menü in einer .BTN-Gruppe. Sie können auch <span> </span> verwenden, um Schaltflächen als Dropdown-Menüs anzuzeigen.
<Div> <button type = "button" data-toggle = "Dropdown"> Standard <span> </span> </button> <ul rollen = "Menü"> <li> <a href = "#"> </a> </li> <li> <a href = "#"> Andere </li> <li> <a href = " href = "#"> Andere </a> </li> <li> </li> <li> <a href = "#"> Abnahmebereich </a> </li> </ul> </div>
(1) Das Dropdown-Menü der Split-Taste
Das Dropdown-Menü der Split-Schaltfläche verwendet ungefähr den gleichen Stil wie die Taste des Dropdown-Menüs, fügt dem Dropdown-Menü die ursprüngliche Funktionalität hinzu. Auf der linken Seite der Split-Taste befindet sich die ursprüngliche Funktion, und rechts befindet sich der Umschalter, der das Dropdown-Menü anzeigt.
<Div> <button type = "button"> Standard </button> <button type = "button" data-toggle = "Dropdown"> <span> </span> <span> Wechseln Sie das Dropdown-Menü </span> </button> <ul rollen = "Menü"> <li> <a href = "#"> Funktion </li> <li> <ai> <a href = " href = "#"> Andere </a> </li> <li> </li> <li> <a href = "#"> Disased Link </a> </li> </ul> </div>
(2) Dropdown-Menü der Größe der Schaltfläche
Sie können das Dropdown-Menü mit Schaltflächen verschiedener Größen verwenden: .BTN-Large, .BTN-SM oder .BTN-XS.
(3) Pull-up-Menü für Tasten
Das Menü kann auch nach oben ausgestreckt werden. Fügen Sie einfach dem übergeordneten .BTN-Gruppen-Container.
<div> </div>
5. Bootstrap -Eingangsboxgruppe
Geben Sie die Boxgruppe ein. Die Eingabefeldgruppe erstreckt sich vom Formularregel. Mit Eingabefeldgruppen können Sie textbasierte Eingangsfelder problemlos als Präfixe und Suffixe als Präfixe und Suffixe hinzufügen.
Durch Hinzufügen von Inhalten von Präfix und Suffixe in das Eingabefeld können Sie der Benutzereingabe gemeinsame Elemente hinzufügen. Sie können beispielsweise ein Dollar -Schild hinzufügen oder @ vor dem Twitter -Benutzernamen oder anderen öffentlichen Elementen hinzufügen, die von der Anwendungsschnittstelle erforderlich sind.
Die Schritte zum Hinzufügen eines Präfix- oder Suffix-Elements zu .Form-Control sind wie folgt:
A. Platzieren Sie das Präfix- oder Suffixelement in einer <div> mit der Klasse .Input-Gruppe.
B. Stellen Sie dann im selben <div> zusätzlichen Inhalt in der <span> der Klasse ein.
C. Platzieren Sie die <spannung> vor oder hinter das <eingabe> -Element.
Um die Kompatibilität des Cross-Browsers aufrechtzuerhalten, vermeiden Sie die Verwendung von <Select> -Elementen, da sie den Effekt in einem Webkit-Browser nicht vollständig ausführen. Wenden Sie auch die Gruppe der Eingabefeldgruppe nicht direkt auf die Formgruppe an, die Gruppe Eingabebox ist eine isolierte Komponente.
<Formrolle = "Form"> <div> <span> $ </span> <Eingabe type = "text" placeholder = "TwitterHandle"> <span> .00 </span> </div> </form>
(1) Geben Sie die Größe der Boxgruppe ein
Sie können die Größe der Eingangsbox-Gruppe ändern, indem Sie Klassen relativer Formgrößen zu .Input-Gruppen (z. B. .Input-Gruppen-LG, Eingangsgruppe-SM, Eingangsgruppe-XS) in .Input-Gruppe hinzufügen. Der Inhalt im Eingangsfeld wird automatisch geändert.
(2), Kontrollkästchen und Radio-Plug-Ins
Sie können Kontrollkästchen und Radio -Plugins als Präfixe oder Suffix -Elemente für Eingabefeldgruppen verwenden
<Div> <span> <Eingabe type = "CheckBox"> </span> <Eingabe type = "text"> </div>
(3) Tastenplug-In
Sie können die Schaltfläche auch als Präfix- oder Suffix -Element der Eingabefeldgruppe verwenden. Zu diesem Zeitpunkt fügen Sie keine .Input-Gruppen-Addon-Klasse hinzu. Sie müssen die Klasse .Input-Gruppen-btn verwenden, um die Taste zu wickeln. Dies ist erforderlich, da der Standard -Browserstil nicht umgeschrieben wird.
<Div> <span> <button type = "button"> go! </button> </span> <Eingabe type = "text"> </div>
(4) Schaltfläche mit Dropdown-Menü
Das Hinzufügen einer Taste mit einem Dropdown-Menü zur Eingabefeldgruppe ist einfach in eine .Input-Gruppen-BTN-Klasse eingewickelt.
<Div> <div> <button type = "button" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul> <li> <a href = "#"> Funktion </a> </li> <li> <a> <a href = "#"> Andere </li> <a> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" href = "#"> Andere </a> </li> <li> </li> <li> <a href = "#"> abgenommener Link </a> </li> </div> <Eingabe type = "text"> </div>
(5) Taste der Dropdown-Menü auftragen
Fügen Sie eine geteilte Schaltfläche mit einem Dropdown-Menü in der Eingabefeldgruppe hinzu, wobei der Dropdown-Menü ungefähr den gleichen Stil verwendet wird. Hinzufügen der Hauptfunktionen zum Dropdown-Menü, fügen Sie jedoch das Hinzufügen zu dem Dropdown-Menü hinzu.
<Div> <div> <button type = "button" tabIndex = "-1"> Dropdown-Menü </button> <button type href = "#"> Andere </a> </li> <li> <a href = "#"> Andere </a> </li> <li> </li> <li> <a href = "#"> abgelöster Link </a> </li> </div> </div> <Eingabe type = "text"> </div> </div> </div> </div> </div> </div> </div>
6. Bootstrap -Navigationselemente
Verwenden Sie die gleichen Tags und die Basisklasse .nav. Bootstrap bietet auch eine Helferklasse zum Teilen von Tags und Zuständen. Ändern Sie die modifizierte Klasse und können zwischen verschiedenen Stilen umgestellt werden.
(1), Tabellennavigation oder Tag
Erstellen Sie ein markiertes Navigationsmenü:
A. Beginnen Sie mit einer ungeordneten Liste mit Klasse .Nav.
B. Klasse. Nav-tabs.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> vb.net href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) Navigationsmenü im Kapselstil
A. Menü der Grundkapselnavigation
Wenn Sie das Etikett in den Kapselstil ändern müssen, müssen Sie nur die Klasse .nav-Pills anstelle von .nav-tabs verwenden, und die anderen Schritte sind die gleichen wie oben.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> vb.net href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Menü der vertikalen Kapselnavigation
Sie können die Klasse .nav-gestapelt verwenden, während Sie die Klasse .nav und .nav-Pills verwenden, um die Kapseln vertikal zu stapeln.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> vb.net href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) Navigation mit beiden Enden ausgerichtet
Sie können das markierte oder Kapselnavigationsmenü mit der Verwendung von Klasse .nav-Gereinigung während der Verwendung von .nav, .nav-tabs, oder .nav und .nav-Pills, wenn die Bildschirmbreite mehr als 768px beträgt, gleich breit wie das übergeordnete Element herstellen. Auf einem kleineren Bildschirm sind die Navigationslinks gestapelt.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li></ul><ul> <li><a href="#">Home</a></li></ul> <li><a href="#">Home</a></li></ul>
(4) Link deaktivieren
Für jede .nav -Klasse wird ein grauer Link erstellt, und der: Schwebstatus des Links ist deaktiviert.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS (deaktiviert Link) </a> </li> </ul> <li> <a href = " href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (Deaktivierungsverbindung) </a> </li> </ul>
(5) Pulle Down -Menü
Das Navigationsmenü verwendet eine ähnliche Syntax wie das Dropdown-Menü. Standardmäßig funktioniert der Anker des Listenelements in Verbindung mit einigen Dateneigenschaften, um eine nicht ordnungsgemäße Liste mit .dropdown-Menu-Klasse auszulösen.
A. Tags mit Dropdown-Menü
Die Schritte zum Hinzufügen eines Dropdown-Menüs zu einem Tag sind wie folgt:
Beginnen Sie mit einer ungeordneten Liste mit Klasse .nav.
Fügen Sie Klasse .nav-tabs hinzu.
Fügen Sie eine ungeordnete Liste mit .dropdown-Menu-Klasse hinzu.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "Dropdown" href = "#"> java </span> </a> <li> <li> <li> <li> <li> <a href = href = " <li><a href="#">Swing</a></li> <li><a href="#">Swing</a></li> <li><a href="#">Separated Links</a></li> </li> </li> <li><a href="#">PHP</a></li></ul>
B. Kapseln mit Pulldown-Menü
Die Schritte sind übereinstimmend wie das Erstellen eines Tags mit einem Dropdown-Menü, außer dass Sie die .nav-tabs-Klasse in .nav-Pills ändern müssen.
7. Bootstrap -Navigationsleiste
Die Navigationsleiste ist eine gute Funktion und eine herausragende Funktion der Bootstrap -Website. Die Navigationsleiste dient in Ihrer Bewerbung oder Website als reaktionsschnelle Grundkomponente des Navigationsheaders. Die Navigationsleiste wird in der Ansicht des mobilen Geräts zusammengebrochen und die Navigationsleiste erweitert sich horizontal, wenn die verfügbare Ansichtsfensterbreite zunimmt. Im Kern der Bootstrap -Navigationsleiste enthält die Navigationsleiste den Standortnamen und die grundlegenden Navigationsdefinitionsstile.
(1) Die Standardnavigationsleiste
Die Schritte zum Erstellen einer Standardnavigationsleiste sind wie folgt:
A. Class .Navbar und .Navbar-Default zum <NAV> -Tag.
B. Hinzufügen von Rollen = "Navigation" zu den oben genannten Elementen hilft, die Zugänglichkeit zu erhöhen.
C. Fügen Sie dem <Div> -Element eine Titelklasse .Navbar-Header hinzu, das das <a> Element mit der Klassen-Navigationsbrand enthält. Dadurch wird der Text größer.
D. Um Links zur Navigationsleiste hinzuzufügen, müssen Sie nur einfach eine ungeordnete Liste mit Klasse .nav und .navbar-nav hinzufügen.
<nav rollen = "navigation"> <div> <a href = "#"> w3cSchool </a> </div> <ul> <ul> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One separate link</a></li> </li> </li> </li> </div></nav>
(2) Responsive Navigationsleiste
Um der Navigationsleiste reaktionsschnelle Funktionen hinzuzufügen, muss der Inhalt, den Sie zusammenbrechen möchten, in ein <div> mit Klassen. Die zusammengebrochene Navigationsleiste ist tatsächlich eine Taste mit Klasse .Navbar-Toggle und zwei Datenelemente. Der erste ist Data Toggle, der JavaScript mitteilt, was mit der Taste zu tun ist, und das zweite ist das Daten-Ziel, das angibt, auf welches Element sie wechseln sollen. Drei <spann> mit der Klasse .Icon-Bar erstellt die sogenannte Burger-Taste. Diese wechseln zu Elementen in .nav-collapse <div>. Um diese Funktionen zu erzielen, müssen Sie das Bootstrap Collapse-Plug-In einschließen.
<nav rollen = "navigation"> <div> <button type = "button" data-toggle = "collapse" data-target = "#Beispiel-navbar-collapse"> <spencorte> </span> <span> </span> </span> </span> </span> </span> </button> </divf = "#"#"#"#"#"#" id="example-navbar-collapse"> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li><a href="#">jmeter</a></li> <li></li> <li><a href="#">separated link</a></li> <li></li> <li><a href="#">another separate link</a></li> </li></ul></div></nav>
(3) Formulare in der Navigationsleiste
Das Formular in der Navigationsleiste verwendet nicht die Standardklasse, die im Kapitel von Bootstrap-Formular genannt wird, sondern die .navbar-Form-Klasse. Dies gewährleistet eine ordnungsgemäße vertikale Ausrichtung der Form und das Verhalten der Faltung in einem schmaleren Ansichtsfenster. Verwenden Sie die Ausrichtungsoptionen (dies wird im Abschnitt Komponentenausrichtung ausführlich erläutert), um zu entscheiden, wo der Inhalt in der Navigationsleiste platziert ist.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> </div></nav>
(4) Knöpfe in der Navigationsleiste
Sie können die Klasse .navbar-BTN verwenden, um dem <Button> -Element, das nicht in <form> eine Taste hinzugefügt wird, die vertikal auf der Navigationsleiste zentriert ist. .Navbar-BTN kann auf den Elementen <a> und <eingabe> verwendet werden. Verwenden Sie nicht .navbar-btn auf <a> Elementen in .navbar-nav, da es sich nicht um eine Standard-Tastenklasse handelt.
<nav rollen = "navigation"> <div> <a href = "#"> w3cSchool </a> </div> <div> <Formular Rolle = "such"> <div> <Eingabe type = "text" placeholder = "such"> </div> <button type "Senden"> Senden -Button </button> </Form> </button> button ".
(5) Text in der Navigationsleiste
Wenn Sie Textzeichenfolgen in Ihre Navigation einbeziehen müssen, verwenden Sie die Klasse .Navbar-Text. Dies wird normalerweise mit <p> -Tags verwendet, um eine ordnungsgemäße Führung und Farbe zu gewährleisten.
<nav rollen = "navigation"> <div> <a href = "#"> W3CSCHOOL </a> </div> <div> <p> als Thomas </p> </div> </nav> angemeldet
(6) Nicht-Navigation-Link
Wenn Sie keine Standardlinks in der regulären Navigationsleisten-Navigationskomponente verwenden möchten, verwenden Sie die Navi-Link-Klassen-Links, um den Standardoptionen Standard- und invertierter Navigationsleisten entsprechende Farben hinzuzufügen.
<nav rollen = "navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> als <a href = "#"> Thomas </a> </p> </div> </div> angemeldet
(7) Komponentenausrichtung
Sie können die Versorgungsklasse verwenden. Navbar-Links oder .Navbar-Right, um die Navigationsverbindungen, Formulare, Schaltflächen oder Textkomponenten in der Navigationsleiste links oder rechts auszurichten. Beide Klassen fügen CSS -Schwimmer in die angegebene Richtung hinzu.
(8) an der Oberseite befestigt
Die Bootstrap -Navigationsleiste kann dynamisch gelegen werden. Standardmäßig handelt es sich um ein Element auf Blockebene, das basierend auf der in HTML platzierten Position positioniert ist. Mit einigen Helferklassen können Sie es oben oder unten auf der Seite platzieren oder eine statische Navigationsleiste machen, die zusammen mit der Seite scrolliert. Wenn Sie möchten, dass die Navigationsleiste am oberen Rand der Seite festgehalten wird, fügen Sie der .navbar-Klasse eine Klasse hinzu. Das folgende Beispiel zeigt Folgendes: Um zu verhindern, dass die Navigationsleiste mit der Oberseite des anderen Inhalts im Körper der Seite verschoben werden, fügen Sie dem <body> -T -Tag mindestens 50 Pixel Polster hinzu, und der Wert der Polsterung kann entsprechend Ihren Anforderungen festgelegt werden.
<NAVrolle = "Navigation">
</nav>
(9) am Boden befestigt
Wenn Sie möchten, dass die Navigationsleiste am Ende der Seite festgehalten wird, fügen Sie der .navbar-Klasse die Klasse.
<NAVrolle = "Navigation"> </nav>
(10), statische Oberseite
Um eine Navigationsleiste zu erstellen, die zusammen mit der Seite scrolliert, fügen Sie eine .navbar-statische Klasse hinzu. Diese Klasse erfordert nicht, dass die Polsterung zu <body> hinzugefügt wird.
<NAVrolle = "Navigation">
</nav>
(11), umgekehrte Navigationsleiste
Um eine umgekehrte Navigationsleiste mit einem weißen Text mit schwarzem Hintergrund zu erstellen, fügen Sie einfach eine .navbar-Invers-Klasse zur .navbar-Klasse hinzu, wie im folgenden Beispiel gezeigt:
Um zu verhindern, dass die Navigationsleiste mit der Oberseite des anderen Inhalts im Körper der Seite verschoben werden, fügen Sie dem <body> -T -Tag mindestens 50 Pixel Polster hinzu, und der Wert der Polsterung kann entsprechend Ihren Anforderungen festgelegt werden.
<NAVrolle = "Navigation"> </nav>
8. Bootstrap -Semmelbrösel
Breadcrumbs ist eine Anzeigemethode, die auf Informationen auf Website-Ebene basiert. Nehmen Sie als Beispiel einen Blog. Die Breadcrumb -Navigation kann ein Veröffentlichungsdatum, eine Kategorie oder ein Tag angezeigt. Sie repräsentieren den Ort der aktuellen Seite in der Navigationshierarchie.
Breadcrumbs in Bootstrap ist eine einfache, ungeordnete Liste mit .breadcrumb -Klasse. Der Trennzeichen wird automatisch über die unten angegebene Klasse in CSS (Bootstrap.min.css) hinzugefügt:
<ol>
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> November </li>
</ol>
9. Bootstrap -Pagination
(1) Pagination ist eine ungeordnete Liste. Bootstrap behandelt Pagination wie andere Schnittstellenelemente.
(2) Seite drehen (Pager)
Wenn Sie einen einfachen Paging -Link erstellen möchten, um den Benutzern die Navigation bereitzustellen, kann dies durch Drehen der Seite erfolgen. Wie Paging -Links ist Page Turn auch eine ungeordnete Liste. Standardmäßig ist der Link zentriert. In der folgenden Tabelle wird die Klasse aufgelistet, die die Seite "Bootstrap" bearbeitet.
10. Bootstrap -Tags
Bootstrap -Tag. Tags können zum Zählen, Auffordern oder einer anderen Markierungsanzeige auf der Seite verwendet werden. Sie können die modifizierte Klasse-Label-Default, Label-Primary, Label-Success, Label-Info, Label-Warning und Label-Danger verwenden, um das Erscheinungsbild des Etiketts zu ändern.
<Pan> Standard -Tag </span>
<Pan> Haupt -Tags </span>
<Pan> Erfolgs -Tag </span>
<Pan> Informations -Tag </span>
<Pan> Warnmarke </span>
<Pan> Hazard -Tag </span>
11. Bootstrap -Abzeichen
(1) Das Abzeichen ähnelt dem Etikett. Der Hauptunterschied besteht darin, dass die Ecken des Abzeichens glatter sind.
Abzeichen werden hauptsächlich verwendet, um neue oder ungelesene Gegenstände hervorzuheben. Um Abzeichen zu verwenden, fügen Sie einfach <span> zu Links, Bootstrap -Navigation und anderen Elementen hinzu. Wenn es keine neuen oder ungelesenen Gegenstände gibt, wird das Abzeichen durch den leeren Selektor von CSS gefaltet, um anzuzeigen, dass es keinen Inhalt im Inneren gibt.
<a href = "#"> mailbox <span> 50 </span> </a>
(2) Navigationsstatus aktivieren
Sie können Abzeichen in der Kapselnavigation einfügen und die Navigation im aktiven Zustand auflisten. Aktivieren Sie die Verbindung mit <Pan>.
<h4> Aktivierungsstatus in der Kapselnavigation </h4> <ul> <li> <a href = "#"> homepage <span> 42 </span> </a> </li> <li> <a href = "#"> Einführung </a> </li> <a <a> <a href = "#"> messung </span> 3 </span> 3 </span> 3 </span> 3 </span> 3 </span>
12. Bootstrap Super Large Screen (Jumbotron)
Super großer Bildschirm (Jumbotron). Wie der Name schon sagt, kann diese Komponente die Größe des Titels erhöhen und dem Inhalt der Anmeldeseite weitere Ränder hinzufügen. Die Schritte zur Verwendung eines Jumbotron sind wie folgt:
A. Erstellen Sie einen Container <div> mit Klasse .jumbotron.
B. Zusätzlich zum größeren <h1> wird das Schriftgewichtsgewicht des Schriftgewichts auf 200px reduziert.
<Div> <div> <h1> Willkommen zum Anmelden! </h1> <p> Dies ist eine Instanz eines Jumbotron. </p> <p> <a rollen = "button"> mehr </a> </p> </div> </div> erfahren
Um einen riesigen Bildschirm zu erhalten, der die gesamte Breite ohne abgerundete Ecken einnimmt, verwenden Sie die Jumbotron -Klasse außerhalb aller .Container -Klasse.
13. Bootstrap -Seitentitel (Seitenheader)
Die Seitenheader ist eine gute Funktion, die den Seitentitel entsprechend den Abstand hindert. Die Seitentitelfunktion ist besonders nützlich, wenn auf einer Webseite mehrere Titel vorhanden sind und zwischen jedem Titel ein bestimmter Abstand hinzugefügt werden muss. Um den Seitenheader zu verwenden, platzieren Sie Ihren Titel in einer <div> mit der Klasse. Seite-Header:
<div> <h1> Seite Title Beispiel <klein> Untertitel </small> </h1> </div>
14. Bootstrap Thumbnail
(1) Bootstrap Thumbnail. Die meisten Websites müssen Bilder, Videos, Text usw. in einem Raster layout. Bootstrap bietet eine einfache Möglichkeit, dies mit Miniaturansichten zu tun. Die Schritte zum Erstellen von Miniaturansichten mit Bootstrap sind wie folgt:
A. Fügen Sie ein <a> Tag mit der Klasse. Thumbnail um das Bild hinzu.
B. Dies fügt vier Pixelpolster und einen grauen Rand hinzu.
C. Wenn die Maus über dem Bild schwebt, wird der Umriss des Bildes angezeigt.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
(2) Benutzerdefinierte Inhalte hinzufügen
Nachdem wir ein grundlegendes Miniaturbild haben, können wir dem Miniaturansichten verschiedene HTML -Inhalte hinzufügen, z. B. Titel, Absätze oder Schaltflächen. Die spezifischen Schritte sind wie folgt:
A. Ändern Sie das <a> Tag mit Klasse. Thumbnail in <div>.
B. In diesem <div> können Sie alles hinzufügen, was Sie hinzufügen möchten. Da dies ein <div> ist, können wir die Standardspannungsregeln für die Größe der Größenänderung verwenden.
C. Wenn Sie mehrere Bilder gruppieren möchten, platzieren Sie sie in einer ungeordneten Liste, und jedes Listenelement schwebt nach links.
15. Bootstrap -Warnung (Warnungen)
Warnungen und die Klasse von Bootstrap für Warnungen. Alerts bietet Benutzern eine Möglichkeit, Nachrichtenstile zu definieren. Sie bieten Kontextinformationsfeedback für typische Benutzeroperationen. Sie können dem Warnfeld eine optionale Schließschaltfläche hinzufügen. Um ein Inline -Warnungsfeld zu erstellen, verwenden Sie das Warnungs -JQuery -Plugin.
Sie können ein grundlegendes Warnbox hinzufügen, indem Sie ein <div> erstellen und eine von einer .alert-Klasse und vier Kontextklassen hinzufügen (d. H. Alert-SUCCESS, .ALERT-INFO, .ALERT-WARNING, .ALERT-DANGER).
<div> Erfolg! Die Einreichung wurde sehr gut gemacht. </div>
<Div> Informationen! Bitte beachten Sie diese Informationen. </div>
<div> Warnung! Bitte nicht einreichen. </div>
<Div> Fehler! Bitte nehmen Sie einige Änderungen vor. </div>
(1) krebsbare Warnung (Entlassungswarnungen)
Die Schritte zur Erstellung einer stornierbaren Warnung (Entlassungsnotiz) sind wie folgt:
A. Fügen Sie ein grundlegendes Warnbox hinzu, indem Sie ein <div> erstellen und eine der .alert-Klasse- und vier Kontextklassen (d. H. Alert-SUCCESS, .ALERT-INFO, .AERERT-WARNING, .ALERT-DANGER).
B. Fügen Sie gleichzeitig die obige <div> -Klasse eine optionale .alert-dismbar.
C. Fügen Sie eine Schließknopf hinzu.
<Div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> Erfolg! Die Einreichung wurde sehr gut gemacht. </div>
(2) Links in Warnungen
Die Schritte zum Erstellen eines Links in Warnungen sind wie folgt:
A. Fügen Sie ein grundlegendes Warnbox hinzu, indem Sie ein <div> erstellen und eine der .alert-Klasse- und vier Kontextklassen (d. H. Alert-SUCCESS, .ALERT-INFO, .AERERT-WARNING, .ALERT-DANGER).
B. Verwenden Sie die .alert-Link-Entitätsklasse, um schnell Links mit passenden Farben bereitzustellen.
<div>
<a href = "#"> Erfolg! Die Einreichung wurde sehr gut gemacht. </a>
</div>
16. Bootstrap -Fortschrittsbalken
In diesem Kapitel wird die Bootstrap -Fortschrittsleiste erklärt. In diesem Tutorial sehen Sie, wie Sie Bootstrap verwenden, um Fortschrittsbalken für das Laden, Umleiten oder Aktionszustände zu erstellen.
Die Bootstrap -Fortschrittsleiste verwendet CSS3 -Übergänge und -Animationen, um diesen Effekt zu erzielen. Internet Explorer 9 und frühere Versionen und ältere Versionen von Firefox unterstützen diese Funktion nicht, und Opera 12 unterstützt keine Animationen.
(1) Die Standard -Fortschrittsleiste
Die Schritte zum Erstellen einer grundlegenden Fortschrittsleiste sind wie folgt:
A. Fügen Sie ein <div> mit Klasse .Progres.
B. Fügen Sie als nächstes eine leere <div> mit der Klasse. Progress-Bar in der obigen <div> hinzu.
C. Fügen Sie ein Stilattribut mit einer Breite hinzu, die durch Prozentsatz dargestellt wird, wie z. B. Style = "60%"; um anzuzeigen, dass die Fortschrittsbalke bei 60%liegt.
<div> <div rollen = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% vollständig </span> </div> </div>
(2) Wechsel -Fortschrittsbalken
Die Schritte zum Erstellen von Fortschrittsbalken verschiedener Stile sind wie folgt:
A. Fügen Sie ein <div> mit Klasse .Progres.
B. Fügen Sie als nächstes in der obigen <div> ein leeres <div> mit der Klasse. Progress-Bar- und Klassen-Fortschritt-Bar-*hinzu. Unter ihnen kann * Erfolg, Informationen, Warnung, Gefahr sein.
C. Fügen Sie ein Stilattribut mit einer Breite hinzu, die durch Prozentsatz dargestellt wird, wie z. B. Style = "60%"; um anzuzeigen, dass die Fortschrittsbalke bei 60%liegt.
<div> <div rollen = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% abgeschlossen (erfolgreich) </span> </div> </div>
(3) die Fortschrittsbalken von Streifen
Die Schritte zum Erstellen einer Streifen -Fortschrittsleiste sind wie folgt:
A. Fügen Sie ein <div> mit Klasse .Progres und .Progres-Striped hinzu.
B. Fügen Sie als nächstes in der obigen <div> ein leeres <div> mit der Klasse. Progress-Bar- und Klassen-Fortschritt-Bar-*hinzu. Unter ihnen kann * Erfolg, Informationen, Warnung, Gefahr sein.
C. Fügen Sie ein Stilattribut mit einer Breite hinzu, die durch Prozentsatz dargestellt wird, wie z. B. Style = "60%"; um anzuzeigen, dass die Fortschrittsbalke bei 60%liegt.
<div> <div rollen = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% abgeschlossen (erfolgreich) </span> </div> </div>
(4) die Fortschrittsleiste der Animation
Die Schritte zum Erstellen einer Animations -Fortschrittsleiste sind wie folgt:
A. Fügen Sie ein <div> mit Klasse .Progres und .Progres-Striped hinzu. Fügen Sie auch Klasse hinzu .aktiv.
B. Fügen Sie als nächstes eine leere <div> mit der Klasse. Progress-Bar in der obigen <div> hinzu.
C. Fügen Sie ein Stilattribut mit einer Breite hinzu, die durch Prozentsatz dargestellt wird, wie z. B. Style = "60%"; um anzuzeigen, dass die Fortschrittsbalke bei 60%liegt.
Dies vermittelt den Streifen ein Bewegungsgefühl von rechts nach links.
<div> <div rollen = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% vollständig </span> </div> </div>
(5) gestapelte Fortschrittsbalken
Sie können sogar mehrere Fortschrittsbalken stapeln. Sie können mehrere Fortschrittsbalken im selben .programm stapeln.
17. Bootstrap Multimedia -Objekt (Medienobjekt)
Multimedia -Objekt in Bootstrap (Medienobjekt). Diese abstrakten Objektstile werden verwendet, um verschiedene Arten von Komponenten (z. B. Blog -Kommentare) zu erstellen. Wir können Grafik- und Textmischung in Komponenten verwenden, und die Bilder können links oder rechts ausgerichtet sein. Medienobjekte können weniger Code verwenden, um die gemischte Anordnung von Medienobjekten und Text zu erreichen.
Die leichten Tagging und die einfach zu skalierenden Eigenschaften von Medienobjekten werden erreicht, indem die Klasse auf einfache Tags angewendet wird. Sie können dem HTML -Tag die folgenden zwei Formulare hinzufügen, um das Medienobjekt einzurichten:
A. Medien: Diese Klasse ermöglicht das Multimedia (Bild, Video, Audio) im Medienobjekt, nach links oder rechts im Inhaltsblock zu schweben.
B. Medienliste: Wenn Sie eine Liste benötigen, ist jedes Element Teil einer ungeordneten Liste, können Sie diese Klasse verwenden. Kann für Kommentarlisten und Artikellisten verwendet werden.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> Medientitel </h4> Hier sind ein Beispieltext. Hier sind ein Beispieltext. </div> </div>
18. Bootstrap List Group
Listenkomponenten werden verwendet, um komplexe und benutzerdefinierte Inhalte in Listenformular zu rendern. Die Schritte zum Erstellen einer grundlegenden Listengruppe sind wie folgt:
A. Class. List-Gruppe zu Element <ul>.
B. Class. List-Gruppen-Element zu <li>.
<ul> <li> Registrierung des kostenlosen Domain -Namens </li> <li> Kostenloser Fensterplatz Hosting </li> </ul>
(1) Fügen Sie der Listengruppe Abzeichen hinzu
Wir können jedem Listenelement eine Ausweiskomponente hinzufügen, die automatisch rechts positioniert wird. Fügen Sie einfach <li> Element <spannes hinzu.
<ul> <li> Registrierung des kostenlosen Domain -Namens </li> <li> <Pan> Neu </span> 24*7 Support </li> </ul>
(2) Link zur Listengruppe hinzufügen
Durch die Verwendung von Anker -Tags anstelle von Listenelementen können wir Links zu Listengruppen hinzufügen. Wir müssen <Div> statt <ul> Element verwenden.
<a href = "#"> 24*7 Support </a>
<a href = "#"> kostenloses Fensterraum Hosting </a>
(3) Fügen Sie der Listengruppe benutzerdefinierte Inhalte hinzu
Wir können alle HTML -Inhalte zur Listengruppe hinzufügen, die dem obigen Link hinzugefügt wurde.
19. Bootstrap -Panels (Panels)
Bootstrap -Panels (Panels). Mit der Panelbaugruppe wird die DOM -Baugruppe in eine Box eingesetzt. Um ein grundlegendes Panel zu erstellen, fügen Sie einfach die Klasse .Panel und die Klasse .Panel-Default zum <Div> -Element hinzu.
<div> <div> Dies ist ein grundlegendes Panel </div> </div>
(1) Panel -Titel
Wir können Panel -Titel auf zwei Arten hinzufügen:
A. Mithilfe der Panel-Heading-Klasse kann dem Panel problemlos einen Titelbehälter hinzufügen.
B. Verwenden Sie <h1>-<h6> mit .Panel-Title-Klasse, um den Titel des vordefinierten Stils hinzuzufügen.
<Div> <div> Plattformtitel ohne Titel </div> <div> Plattforminhalt </div> </div>
(2) Panel -Fußnoten
Wir können dem Panel Fußnoten hinzufügen, einfach die Taste oder den Subtext in die <div> mit der Klasse. Panel-Footer einfügen.
<div> <div> Dies ist ein Basispanel </div> <div> Panboard -Fußnote </div> </div>
(3) Panel mit kontextbezogener Farbe
Verwenden Sie die Panel-Primary, Panel-Success, Panel-Info, Panel-Warning und Panel-Danger, um ein Panel mit kontextbezogenen Farben einzurichten.
<div> <div> <h3> Plattformtitel </h3> </div> <div> Dies ist ein grundlegendes Panel </div> </div>
(4) Panel mit Tabelle
Um eine randlose Tabelle im Panel zu erstellen, können wir im Panel eine Klasse verwenden. Unter der Annahme, dass es einen <div> -Panel-Körper gibt, können wir die Spitze der Tabelle zusätzliche Grenzen hinzufügen, um sie zu trennen. Wenn es keinen <div> -Panel-Körper gibt, bewegt sich die Komponente ohne Unterbrechung vom Panelkopf zur Tabelle.
<div> <div> <h3>Platform Title</h3> </div> <div>This is a basic panel</div> <table> <th>Product</th><th>Price</th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table></div>
(5) Panel mit Listengruppe
Wir können Listengruppen in jedes Panel aufnehmen, Panels erstellen, indem wir .Panel- und .panel-Default-Klassen im <Div> -Element hinzufügen und Listengruppen im Panel hinzufügen.
<Div> <Viv> Plattformtitel </div> <div> <p> Dies ist ein grundlegender Panel -Inhalt. </p> </div> <ul> <li> Registrierung des kostenlosen Domain -Namens </li> <li> Kosten für jährliche Update </li> </ul> </div>
20. Bootstrap gut
Gut ist ein Behälter, der den Inhalt <div> einen Dent oder eine Illustrationseffekt bewirkt. Um einen Brunnen zu erstellen, legen Sie einfach den Inhalt mit einer Klasse in eine <div>. Well.
<div> Hallo, mir geht es gut! </div>
(1) Größe
Sie können die optionalen Klassen gut-LG oder Well-SM verwenden, um die Größe des Brunnens zu ändern. Diese beiden Klassen werden in Verbindung mit der .well -Klasse verwendet. Diese beiden Klassen wirken sich auf die Polsterung aus und werden je nach verwendeter Klasse größer oder kleiner erscheinen.
<div> Hallo, ich bin im großen Brunnen! </div>
<div> Hallo, ich bin im kleinen Brunnen! </div>
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.