Einführung in Bootstrap
Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Miniaturkomponente
Die am häufigsten verwendeten Miniaturansichten auf Websites sind die Produktlistenseite, auf der mehrere Bilder in einer Zeile angezeigt werden, und einige haben Titel, Beschreibungsinhalte, Schaltflächen und andere Informationen unter den Bildern.
Das Bootstrap -Framework unterteilt diesen Teil in eine Modulkomponente und wird über den Klassennamen. Thumbnail und das Bootstrap Grid -System implementiert. Im Folgenden finden Sie die Quellcode -Dateien verschiedener Versionen der Bootstrap Thumbnail -Komponente:
Weniger: tbumbnails.less
Sass: _tbumbnails.scss
Implementierungsprinzip:
Die Implementierung von Layout stützt sich hauptsächlich auf dem Netzsystem des Bootstrap -Frameworks. Das Folgende ist der Stil, der dem Miniaturbild entspricht
.Thumbnail {Display: Block; Padding: 4px; Margin-Bottom: 20px; Zeilenhöhe: 1.42857143; Hintergrundfarbe: #fff; Grenze: 1px solid #ddd; Border-Radius: 4px; -Webkit-transition: Alle. IMG {Margin-Right: Auto;Schauen wir uns ein Beispiel an:
<div> <div> <a Herf = "#"> <img src = "img/1.jpg" style = "Höhe: 180px; Breite: 100%; Anzeige: Block"> </a> </div> <div> <a horf = "#"> <img src = "img/2.jpg" style = "height: 180px; Block "> </a> </div> <div> <a Herf ="#"> <img src =" img/3.jpg "style =" Höhe: 180px; Breite: 100%; Display: Block "> </a> </div> <div> <a herf ="#"> <img src =" img/4.jpg "=" Height: 180px; Block "> </a> </div> </div>
Die Effekte sind wie folgt:
Sie können es mithilfe von Firefox Responsive Design View anzeigen
Fügen Sie auf der Grundlage von nur Miniaturansichten einen Div -Container mit Klassennamen hinzu.
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "Höhe: 180px; width: 100%; Anzeige: Block"> </a> <div> <h3> Hier ist der Grafik -Titel 1111 </h3> <p> Hier ist der Beschreibungsinhalt. Hier ist der Beschreibungsinhalt. Hier ist der Beschreibungsinhalt hier ist der Beschreibungsinhalt hier ist der Beschreibungsinhalt </p> <a href = "#"> beginnen 2222</h3><p>Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/3.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 3333</h3><p>Here is the description content 3333 Here is the description content 3333 Here is the description content 3333 Here is the description content 222 Here is the description content 3333</p><a href="#">Begin to Lernen Sie </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "Höhe: 180px; Breite: 100%; Anzeige: Block"> </a> <Div> <h3> Hier ist der Grafik -Titel 4444 </h3> <p. Beschreibung Inhalt 4444Hhere ist der Beschreibung Inhalt 4444Hhere ist der Beschreibung Inhalt 4444 </p> <a href = "#"> Beginnen Sie zu lernen </a> <a href = "#"> Studie </a> </div> </div> </div>
Warnboxkomponente
Das Bootstrap -Framework verwendet den .alert -Stil, um den Warnbox -Effekt zu erzielen. Standardmäßig bietet Bootstrap vier verschiedene Warnbox -Effekte:
1. Erfolgswarnbox: fordert den Benutzer auf, den Vorgang erfolgreich zu sein. Fügen Sie den .alert-Success-Stil auf der Grundlage von .Aert hinzu;
2. Informationswarnbox: Nutzern Sie Benutzerforminformationen und fügen Sie den Stil von .alert-Info auf der Grundlage von .Aert hinzu;
3. Warnwarnbox: Warninformationen angeben und den. Alert-Warnstil auf der Grundlage von .Aert;
V.
Unter ihnen setzt der .alert -Stil hauptsächlich die Hintergrundfarbe, die Rand-, die abgerundete Ecke und die Textfarbe des Warnboxs. Darüber hinaus wird die Stilverarbeitung auf H4, P, UL und .Anert-Link durchgeführt. Das Folgende ist der CSS -Quellcode:
.alert {padding: 15px; margin-bottom: 20px; border: 1px fest transparent; border-radius: 4px;}. alert h4 {margin-top: 0; color: erben;}. alert .alert-link {font-weight: bold;}. {Margin-Top: 5px;}. Alarm-SUCCESS {Farbe: #3c763d; Hintergrundfarbe: #dff0d8; Border-Color: #d6e9c6;}. alert-success hr {border-top-color: #c9e2b3;}. alert-success .Alt-foLt. {Farbe: #31708f; Hintergrundfarbe: #d9edf7; Border-Color: #BCE8F1;}. Alarm-info hr {Border-Top-Color: #a6e1ec; #Faebcc;}. Alarm-Warn-Hr {Border-Top-Color: #f7e1b5;}. Alarm-Warning .Alert-Link {Farbe: #66512C; #e4b9c0;}. alert-danger .alert-link {color: #843534;}Zum Beispiel:
<div rollen = "alert"> Herzlichen Glückwunsch zu Ihrem erfolgreichen Betrieb! </div> <div rollen = "alert"> Bitte geben Sie das richtige Kennwort ein </div> <div rollen = "alert"> Sie sind zweimal gescheitert, und es gibt eine weitere letzte Chance </div> <div rollen = "alert"> sorry, Ihr Passwort wurde falsch eingegeben! </div>
Schließbare Alarmbox
1. A. Alert-Disms Assible Class Name an den Container des Standardwarnboxs.
2. Fügen Sie .Close zur Schaltflächenbezeichnung hinzu, um die Schließschaltfläche des Warnfelds zu implementieren
3. Stellen Sie sicher, dass das benutzerdefinierte Attributdaten-Dismiss = "Alert" im Taste-Element der Schließung festgelegt ist (das Schließen des Alarm-Feldes erfordert, dass JS das Attribut erfasst und damit das Schließen des Alarmfelds steuert).
Beispiel:
<div rollen = "alert"> <button type = "button" data-dismiss = "alert"> × </button> Herzlichen Glückwunsch zu Ihrem erfolgreichen Betrieb! </div> <divrole = "alert"> <button type = "button" data-dismiss = "alert"> × </button> Geben Sie das richtige Kennwort ein </div> <div rollen = "alert"> <button type = "button" data-dismiss = "alert"> × </button> Die Operation haben zweimal versagt. Data-dismiss = "alert"> × </button> sorry, Ihr Passwort wurde falsch eingegeben! </div>
Link zu Warnbox
Manchmal müssen Sie einen Link zum Warnbox hinzufügen, um dem Benutzer zu einer neuen Seite zu springen. Der Link zum Warnbox ist im Bootstrap -Framework hervorgehoben. Fügen Sie dem Link zum Warnbox einen Klassennamen als .alert-Link hinzu. Unten finden Sie den CSS-Stil von Alarm-Link
.Alert .alert-link {Schriftgewicht: BOLD;}/*Die Textfarbe des Links in verschiedenen Arten von Warnboxen*/. Alarm-SUCCESS .Alert-Link {Farbe: #2B542C;}. Alert-info .alert-link {Farbe: #245269;}. Alert-Warnt. .alert-Link {Farbe: #843534;}Beispiel:
<div rollen = "alert"> <strong> gut gemacht! Lesen Sie <a href = "#"> Diese wichtige Warnmeldung </a> </div> <div rollen = "alert"> <strong> Gut gemacht! rollen = "alert"> <strong> Gut gemacht! </strong> Sie lesen erfolgreich <a href = "#"> Diese wichtige Warnmeldung </a> </div>
Ich werde so viel über die Bootstrap Thumbnail -Komponente und die Warnbox -Komponente vorstellen, dass dieser Artikel Ihnen vorgestellt wird. Ich hoffe, es wird für Sie hilfreich sein!