TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント:
1。テーブル
2。ボタン
このレッスンでは、主にブートストラップテーブルとボタン機能について学び、組み込みのCSS定義を通じてさまざまなリッチエフェクトを表示します。
1つ。シート
Bootstrapは、開発者が使用できる豊富なテーブルスタイルを提供します。
1。基本形式
//基本的なテーブルスタイル<テーブル>を実装します
注:Firebugを介して対応するCSSを表示できます。
2。ストライプフォーム
// <tbody>の線を次々に次々と生成させ、モノクロの背景効果<テーブル>
注:テーブル効果は、基本形式に基づいている必要があります。
3。境界付きのテーブル
//テーブルに境界線を追加します<テーブル>
4。マウスをホバリングします
// <tbody>の下のテーブルをマウスにホバリングして、背景効果を達成します<テーブル>
5。ステータスクラス
//各行の背景スタイルは個別に設定できます<TR>
注:選択できる5つの異なるスタイルがあります。
スタイルの説明:
列またはセルの上にホバリングするアクティブマウス
成功の兆候成功または前向きな行動
情報は、通常の迅速な情報またはアクションをマークします
警告ロゴ警告またはユーザーの注意が必要です
危険は、危険または潜在的な否定的な行動を示します
6。行を非表示にします
// LINE <TR>を非表示にします
7。レスポンシブテーブル
//テーブルの親要素には768px未満のレスポンシブフォームがあり、境界線が<body>
二。ボタン
Bootstrapは、開発者が使用するための多くのリッチボタンを提供します。
1。ボタンとして使用できるラベルまたは要素
//通常のボタンに変換<a href = "###"> link </a> <butth> button </button> <入力型= "button" value = "input">
注意すべきことは3つあります。
(1)。コンポーネントについて注意すべきこと
ボタンクラスは<a>および<button>要素に適用できますが、ナビゲーションバーコンポーネントとナビゲーションバーコンポーネントは<button>要素のみをサポートしています。
(2)。リンクがボタンとして使用されるときに注意すべきこと
<a>要素がボタンとして使用され、現在のページの特定の関数をトリガーするために使用されている場合は、現在のページの他の部分をリンクするのではなく、[役割= "ボタン"プロパティを必ず設定してください。
(3)。クロスブラウザーディスプレイ
私たちが要約したベストプラクティスは、可能な限り<button>要素を使用して、各ブラウザで一致する描画効果を取得することを強くお勧めします。
さらに、Firefox <30のブラウザのバグも発見しました。これは、<inupt>要素に基づいて作成されたボタンのラインハイイト属性を設定することを妨げることを示しています。
2。事前定義されたスタイル
//一般情報<ボタン>ボタン</button>
スタイルの説明
BTN-DEFAULTデフォルトスタイル
btn-successスタイル
BTN-INFO一般情報スタイル
BTN Warning Warning Style
btn-danger危険なスタイル
BTN-Primary Preference Style
btn-linkリンクスタイル
3。サイズ
//大きな<button>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <butth>ボタン</button>
4。ブロックレベルボタン
//ブロックレベルラインブレーク<ボタン>ボタン</button> <butth>ボタン</button>
5。アクティベーションステータス
//ボタン<ボタン>ボタン</button>をアクティブにします
6.ステータスを無効にします
//ボタン<ボタン>ボタン</button>を無効にします
上記は、編集者が紹介したブートストラップテーブルとボタン機能です。私はそれが誰にでも役立つことを願っています!