TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント：
1。フォーム
2。写真
このレッスンでは、主にブートストラップフォームと画像関数について学び、組み込みのCSS定義を通じてさまざまなリッチエフェクトを表示します。
1つ。形状
Bootstrapは、開発者が使用するためのいくつかの豊富なフォームスタイルを提供します。
1。基本形式
//基本的なフォームスタイルを実装<フォーム> <div> <ラベル>電子メール</label> <入力タイプ= "email" placeholder = "> </div> <div> <aburtion>パスワード</label> <入力タイプ=" placeholder = ""> </div> </form>
注：正しいスタイルは、入力ボックスのタイプタイプが正しく設定されている場合にのみ指定できます。サポートされている入力ボックスコントロールには、テキスト、パスワード、DateTime、DateTime-Local、Date、Month、Time、Week、番号、電子メール、URL、検索、電話、色が含まれます。
2。インライン形式
//フォームをアライメントして浮かんでいて、インラインブロックインラインブロック構造<フォーム>として動作させます
注：768px未満の場合、排他的なスタイルが復元されます。
3。フォームグループ化
// <div> <div>の前後にフラグメントを追加する</div> <入力タイプ= "text"> <div> .00 </div> </div>
4。水平方向の配置
//要素をフォームに保管します<form> <form> <div> <label> email </label> <div> <入力タイプ= "email" placeholder = "Your Email"> </div> </div> </form>
注：Col-SMラスターシステムはここで使用され、次の章はそれを説明することに焦点を当てますが、コントロールラベルは親要素スタイルとの同期を表します。
5。チェックボックスとラジオボックスをチェックします
//チェックボックスの設定<div> div> <abol> <入力タイプ= "チェックボックス"> sports </label> </div> <div> <input type = "checkbox"> music </label> </div> //無効チェックボックス<div> <label> <inputタイプ= "チェックボックス"チェックボックス "無効> div> </div> </div> </div> </div> </div> type = "チェックボックス">スポーツ</label> <label> <入力タイプ= "チェックボックス" disabled> music </label> //ラジオボックスの設定<div> <ラベル> <入力タイプ= "ラジオ" name "
6。ドロップダウンリスト
//ドロップダウンリストを設定<select> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select>
7.ステータスを確認します
//エラーステータス<div>に設定します
注：他のステータスが次のとおりです。
スタイルの説明HAS-ERRORエラーステータス - 成功ステータスは警告ステータスを持っています
8.追加のアイコンを追加します
//テキストボックスの右側にビルトインテキストアイコン<div> <label>メール</label> <入力タイプ= "email"> <span> </span> </div>
注：Glyphicon-OKに加えて、以下にいくつかのテーブルがあります。
スタイルの説明glyphicon-ok successステータスglyphicon-warning-sign警告ステータスglyphicon removeエラーステータス
9。サイズを制御します
//大部分から小さい<入力型= "パスワード"> <入力タイプ= "パスワード"> <入力タイプ= "パスワード">
注：調整するように、親要素フォームグループLGおよびフォームグループ-SMを設定することもできます。
二。写真
Bootstrapは、開発者が使用できる豊富な写真スタイルを提供します。
1。画像形状
// 3つのshapes <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> //応答写真<img src = "img/pic.png">
上記は、編集者が紹介したブートストラップフォームと写真に関連するコンテンツです。私はそれが誰にでも役立つことを願っています！