Eine kurze Analyse der Fähigkeiten von Bootstrap-Thumbnail-Komponenten und Alert-Box-Komponenten

Einführung in Bootstrap

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Thumbnail-Komponente

Miniaturansichten werden am häufigsten auf Produktlistenseiten auf Websites verwendet. Sie zeigen mehrere Bilder in einer Zeile an und einige haben Titel, Beschreibungen, Schaltflächen und andere Informationen unter den Bildern.

Das

Bootstrap-Framework trennt diesen Teil in eine Modulkomponente, die durch den Klassennamen .thumbnail und das Bootstrap-Grid-System implementiert wird. Im Folgenden finden Sie die Quellcodedateien verschiedener Versionen der Bootstrap-Thumbnail-Komponente:

WENIGER: tbumbnails.less

SASS: _tbumbnails.scss

Umsetzungsprinzip:

Die Implementierung des Layouts basiert hauptsächlich auf dem Rastersystem des Bootstrap-Frameworks. Das Folgende ist der entsprechende Stil der Miniaturansicht

.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}

Nach dem Login kopieren

Sehen wir uns ein Beispiel an:

<div class="container">
<div class="row">
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/1.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/2.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/3.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail" >
<img src="img/4.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
</div>
</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Kann mit der responsiven Designansicht von Firefox angezeigt werden

Fügen Sie auf der Grundlage von nur Miniaturansichten einen div-Container mit dem Klassennamen .caption hinzu und platzieren Sie andere Inhalte in diesem Container, z. B. Titel, Textbeschreibung, Schaltfläche usw.

<div class="container">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/1.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题1111</h3>
<p>这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/2.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题2222</h3>
<p>这里是描述内容2222这里是描述内容22222这里是描述内容22222这里是描述内容222这里是描述内容2222</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/3.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题3333</h3>
<p>这里是描述内容3333这里是描述内容3333这里是描述内容33333这里是描述内容222这里是描述内容3333</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/4.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题4444</h3>
<p>这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
</div>
</div>

Nach dem Login kopieren

Alarmbox-Komponente

Das Bootstrap-Framework implementiert den Alert-Box-Effekt über den .alert-Stil. Standardmäßig bietet Bootstrap vier verschiedene Alert-Box-Effekte:

1. Erfolgswarnfeld: Zeigt dem Benutzer an, dass der Vorgang erfolgreich war, und fügt den .alert-success-Stil basierend auf .alert hinzu

2. Informationswarnfeld: Stellen Sie dem Benutzer sofortige Informationen zur Verfügung und fügen Sie den .alert-info-Stil auf der Grundlage von

hinzu

3. Warnfeld: Geben Sie Warninformationen an und fügen Sie den .alert-Warnungsstil basierend auf .alert hinzu

4. Fehlerwarnfeld: fordert den Benutzer zu Betriebsfehlern auf und fügt den .alert-danger-Stil auf der Grundlage von .alert hinzu;

Dabei legt der .alert-Stil hauptsächlich die Hintergrundfarbe, den Rahmen, die abgerundeten Ecken und die Textfarbe des Warnfelds fest. Darüber hinaus führt er auch eine Stilverarbeitung für h4, p, ul und .alert-link durch. Das Folgende ist der CSS-Quellcode:

Zum Beispiel:

.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}

Nach dem Login kopieren

<div class="alert alert-success" role="alert">恭喜你操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">你已经操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，你的密码输入有误！</div>

Nach dem Login kopieren

Verschließbare Warnbox

1. Fügen Sie einen .alert-dismissable-Klassennamen zum Standard-Alarmbox-Container hinzu

2. Fügen Sie .close zum Schaltflächen-Tag hinzu, um die Schaltfläche „Schließen“ des Warnfelds zu implementieren

3. Stellen Sie sicher, dass das benutzerdefinierte Attribut data-dismiss="alert" für das Schließen-Schaltflächenelement festgelegt ist (zum Schließen des Warnfelds muss dieses Attribut über js erkannt werden, um das Schließen des Warnfelds zu steuern)

Beispiel:

<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
恭喜你操作成功！
</div>
<div class="alert alert-info alert-dismissable"role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
请输入正确的密码
</div>
<div class="alert alert-warning alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
你已经操作失败两次，还有最后一次机会
</div>
<div class="alert alert-danger alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
对不起，你的密码输入有误！
</div>

Nach dem Login kopieren

Link zur Benachrichtigungsbox

Manchmal ist es notwendig, einen Link zum Warnfeld hinzuzufügen, um den Benutzer anzuweisen, zu einer neuen Seite zu springen. Die Links zum Warnfeld werden im Bootstrap-Framework hervorgehoben. Fügen Sie dem Link im Warnfeld den Klassennamen .alert-link hinzu. Das Folgende ist der CSS-Stil von Alert-Link

Beispiel:

.alert .alert-link {
font-weight: bold;
}
/*不同类型警示框中链接的文本颜色*/
.alert-success .alert-link {
color: #2b542c;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger .alert-link {
color: #843534;
}

Nach dem Login kopieren

<div class="alert alert-success " role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-info" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-warning " role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-danger" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>

Nach dem Login kopieren

Das ist das gesamte relevante Wissen über die Bootstrap-Thumbnail-Komponente und die Alertbox-Komponente, die in diesem Artikel vorgestellt werden. Ich hoffe, es wird Ihnen hilfreich sein!