Bootstrapサムネイルコンポーネントとアラートボックスの詳細説明component_html/css_WEB-ITnose

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

サムネイルは、Web サイトの商品リスト ページで最も一般的に使用され、複数の画像が 1 行に表示され、画像の下にタイトル、説明、ボタン、その他の情報が表示されるものもあります。ブートストラップ フレームワークは、この部分をモジュール コンポーネントに分割し、クラス名 .thumbnail とブートストラップ グリッド システムを通じて実装されます。以下は、ブートストラップ サムネイル コンポーネントのさまざまなバージョンのソース コード ファイルです:

LESS : 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-info スタイルを追加します。 3. 警告情報を提供します。 .alert; に基づいて .alert-warning スタイルを追加

4. エラー警告ボックス: 操作エラーをユーザーにプロンプ​​トし、.alert に基づいて .alert-danger スタイルを追加します。アラートスタイルは主に警告ボックスの背景色、枠線、角丸、文字色を設定します。さらに、警告ボックスの背景色、枠線、角丸、文字色も設定します。 、 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>