Bootstrap サムネイルコンポーネントとアラートボックスコンポーネントの簡単な分析

Bootstrap サムネイルコンポーネントとアラートボックスコンポーネントの簡単な分析_JavaScript スキル

WBOY

リリース： 2016-05-16 15:03:07

オリジナル

1291 人が閲覧しました

ブートストラップの概要

Twitter の Bootstrap は、現在最も人気のあるフロントエンドフレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。

サムネイルコンポーネント

サムネイルは、Web サイトの製品リストページで最も一般的に使用され、複数の写真を 1 行に表示し、写真の下にタイトル、説明、ボタン、その他の情報が表示されるものもあります。

ブートストラップフレームワークは、この部分をモジュールコンポーネントに分割し、クラス名 .thumbnail とブートストラップグリッドシステムを通じて実装されます。以下は、ブートストラップサムネイルコンポーネントのさまざまなバージョンのソースコードファイルです:

レス : tbumbnails.less

SASS : _tbumbnails.scss

実装原則:

レイアウトの実装は主にブートストラップフレームワークのグリッドシステムに依存します。以下は対応するサムネイルのスタイルです。

.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;
}

ログイン後にコピー

例を見てみましょう:

<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>

ログイン後にコピー

効果は次のとおりです:

Firefox のレスポンシブデザインビューを使用して表示できます

サムネイルのみに基づいて、.caption というクラス名を持つ div コンテナを追加し、このコンテナにタイトル、テキストの説明、ボタンなどの他のコンテンツを配置します。

<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>

ログイン後にコピー

アラートボックスコンポーネント

ブートストラップフレームワークは、.alert スタイルを通じてアラートボックス効果を実装します。デフォルトでは、ブートストラップは 4 つの異なるアラートボックス効果を提供します。

1. 成功警告ボックス: 操作が成功したことをユーザーに通知し、.alert に基づいて .alert-success スタイルを追加します。

2. 情報警告ボックス: ユーザーにプロンプト情報を提供し、.alert に基づいて .alert-info スタイルを追加します。

3. 警告ボックス: 警告情報を提供し、.alert に基づいて .alert-warning スタイルを追加します。

4. エラー警告ボックス: ユーザーに操作エラーを通知し、.alert に基づいて .alert-danger スタイルを追加します。

このうち、.alert スタイルは主に警告ボックスの背景色、枠線、角丸、文字色を設定するほか、h4、p、ul、.alert-link のスタイル処理も行います。以下は CSS ソースコードです:

例:

.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;
}

ログイン後にコピー

<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>

ログイン後にコピー

閉じられる警告ボックス

1. .alert-dismissable クラス名をデフォルトのアラートボックスコンテナーに追加します。
2. button タグに .close を追加して、警告ボックスの閉じるボタンを実装します

3. カスタム属性 data-dismiss="alert" が閉じるボタン要素に設定されていることを確認します (アラートボックスを閉じるには、js を通じてこの属性を検出してアラートボックスの閉じを制御する必要があります)

例:

<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>

ログイン後にコピー

アラートボックスへのリンク

アラートボックスへのリンクを追加して、ユーザーに新しいページにジャンプするように指示する必要がある場合があります。ブートストラップフレームワークでは、アラートボックスへのリンクが強調表示されます。アラートボックス内のリンクに .alert-link というクラス名を追加します。以下は、alert-link の CSS スタイルです。

例:

.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;
}

ログイン後にコピー

<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>

ログイン後にコピー

この記事で紹介した Bootstrap サムネイルコンポーネントとアラートボックスコンポーネントに関する関連知識は以上です。お役に立てば幸いです。