ブートストラップの紹介
TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
サムネイルコンポーネント
ウェブサイトで最も一般的に使用されるサムネイルは、1つの行にいくつかの写真を表示する製品リストページで、一部には写真の下にタイトル、説明コンテンツ、ボタン、その他の情報があります。
ブートストラップフレームワークは、このパートをモジュールコンポーネントに分離し、クラス名.thumbnailとbootstrapグリッドシステムを通じて実装されています。以下は、ブートストラップサムネイルコンポーネントのさまざまなバージョンのソースコードファイルです。
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：ease-inut：all .2s ease in; A> IMG {MARGIN-RIGHT：AUTO; MARGIN-LEFT：AUTO;} A.THUMBNAIL：HOVER、A.THUMBNAIL：FOCUS、A.THUMBNAIL.ACTIVE {border-color：＃428bca;}。例を見てみましょう：
<div> <div> <a herf = "＃"> <img src = "img/1.jpg" style = "height：180px; width：100％; display：block"> </a> </div> <div> <a herf = "＃"> <img src = "img/2.jpg"スタイル= block "> </a> </div> <div> <a herf ="＃ "> <img src =" img/3.jpg "style =" height： "height：" height; block "> </a> </div> </div>
効果は次のとおりです。
Firefox Responsive Design Viewを使用して表示できます
サムネイルのみに基づいて、クラス名を持つDivコンテナを追加し、このコンテナに他のコンテンツを配置します。
<div> <div> <div> <a href = "＃"> <img src = "img/1.jpg" style = "heigh：180px; width：100％; display：block"> </a> <div> <h3>ここにグラフィックタイトル1111 <ここに説明コンテンツがあります。説明コンテンツは説明コンテンツです説明コンテンツは説明コンテンツです</p> <a href = "＃">学習を始めます2222 </h3> <p>説明コンテンツは次のとおりです2222説明コンテンツ2222ここか説明コンテンツ2222 2222ここか説明コンテンツ2222ここから説明コンテンツ2222 </p> <a href = "＃"> style = "height：180px; width：100％; display：block"> </a> <div> <h3>これはグラフィックタイトル3333 </h3> <p>説明コンテンツ3333です。学習</a> </div> <div> <a href = "＃"> <img src = "img/4.jpg" style = "heigh：" height：180px; width：display：block "> </a> <div> <h3>ここにグラフィックタイトル4444444444444444444444歳のペンテンテーションがあります。説明コンテンツ4444ここから説明コンテンツ4444ここは、説明コンテンツ4444 </p> <a href = "＃">学習を開始</a> <a href = "＃"> Study </a> </div> </div> </div>
アラートボックスコンポーネント
ブートストラップフレームワークは、.Alertスタイルを使用して、警告ボックスの効果を実現します。デフォルトでは、Bootstrapは4つの異なる警告ボックス効果を提供します。
1。成功警告ボックス：ユーザーに操作に成功するように求め、.Alertに基づいて.Alert-Sucsessスタイルを追加します。
2。情報警告ボックス：ユーザーに迅速な情報を提供し、.Alertに基づいて.Alert-INFOスタイルを追加します。
3。警告警告ボックス：警告情報を提供し、.Alertに基づいて.Alert-Warningスタイルを追加します。
4。エラー警告ボックス：ユーザーに操作中のエラーをプロンプトし、.Alertに基づいて.Alert-Dangerスタイルを追加します。
その中で、.Alertスタイルは、主に背景色、境界線、丸い角、および警告ボックスのテキスト色を設定します。さらに、スタイル処理はH4、P、UL、および.Alert-Linkで実行されます。以下はCSSソースコードです。
.Alert {PADDING：15PX;マージンボトム：20px;境界：1px固体透明;ボーダーラジウス：4px;}。アラートH4 {マージントップ：0; color：colurit：entert;}。alert .alert-link {font-weight：bold;}。 5px;}。alert-success {color：＃3c763d; background-color：＃dff0d8; border-color：＃d6e9c6;}。 ＃31708f; background-color：＃d9edf7; border-color：＃bce8f1;}。alert-info hr {border-top-color：＃a6e1ec;}。 ＃fcf8e3; border-color：#faebcc;}。アラートwarning HR {border-top-color：＃f7e1b5;}。alert-warning .alert-link {color：＃66512c;}。 ＃ebccd1;}。alert-danger hr {border-top-color：＃e4b9c0;}。alert-danger .alert-link {color：＃843534;}例えば：
<div role = "alert">操作が成功したおめでとうございます！ </div> <div role = "alert">正しいパスワードを入力してください</div> <div role = "alert"> 2回失敗しました。もう1つの最後のチャンスがあります</div> <div role = "alert">申し訳ありませんが、パスワードは間違って入力されました！ </div>
閉鎖可能なアラートボックス
1。デフォルトの警告ボックスのコンテナに、Alert-Disisisableクラス名を追加します。
2。ボタンラベルにcloseを追加して、警告ボックスの閉鎖ボタンを実装します
3.カスタム属性data-dismiss = "alert"が閉じるボタン要素に設定されていることを確認します（アラートボックスを閉じるには、属性を検出するためにJSが必要であり、それによってアラートボックスの閉鎖を制御します）
例：
<div role = "alert"> <button type = "button" data-dismiss = "alert">×</button>操作が成功したことをおめでとうございます！ </div> <divrole = "alert"> <ボタンタイプ= "button" data-dismiss = "alert">×</button>正しいパスワードを入力してください</div> <div role = "alert"> <ボタン= "ボタン" data-dismiss = "arert">×</button>あなたは2回操作に失敗しました。 data-dismiss = "alert">×</button>申し訳ありませんが、パスワードは間違って入力されました！ </div>
アラートボックスへのリンク
警告ボックスにリンクを追加して、ユーザーに新しいページにジャンプするように指示する必要がある場合があります。警告ボックスへのリンクは、ブートストラップフレームワークで強調表示されています。 [警告]ボックスに追加されたリンクに.Alert-Linkとしてクラス名を追加します。以下は、CSSスタイルのアラートリンクです
.Alert .Alert-Link {font-weight：bold;}/*さまざまなタイプの警告ボックスのリンクのテキスト色.Alert-Link {color：＃843534;}例：
<div role = "alert"> <strong>よくやった！</strong>あなたは正常に読みます<a href = "＃"> <a href = "＃">この重要なアラートメッセージ</a> </div> <div role = "alert"> <strong>よくやった！</strong>あなたは<a href = "＃">この重要なアラートメッセージ</div> <div role = "alert"> <strong> <strong> suckerfuld read <a href = " role = "alert"> <strong>よくやった！</strong> <a href = "＃">この重要なアラートメッセージ</a> </div>を正常に読み取ります
この記事で紹介するブートストラップサムネイルコンポーネントと警告ボックスコンポーネントについて多くのことを紹介します。それがあなたに役立つことを願っています！