ホームページ >ウェブフロントエンド >jsチュートリアル >第 3 章: ブートストラップのテーブルとボタンの関数_JavaScript スキル
第 3 章: ブートストラップのテーブルとボタンの関数_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:03:581594ブラウズ
Twitter の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。
学習ポイント:
1.フォーム
2. ボタン
このレッスンでは、主に Bootstrap のテーブルとボタンの機能について学び、組み込みの CSS 定義を通じてさまざまなリッチな効果を表示します。
1.フォーム
Bootstrap は、開発者が使用できる豊富なテーブル スタイルをいくつか提供します。
1. 基本形式
//实现基本的表格样式 <table class="table">
注: Firebug を通じて対応する CSS を表示できます。
2. ストライプテーブル
//让<tbody>里的行产生一行隔一行加单色背景效果 <table class="table table-striped">
注: テーブル効果は、基本的な format.table に基づく必要があります
3. 枠付きのテーブル
//给表格增加边框 <table class="table table-bordered">
4. マウスを移動します
//让<tbody>下的表格悬停鼠标实现背景效果 <table class="table table-hover">
5. ステータスクラス
//可以单独设置每一行的背景样式 <tr class="success">
注: 合計 5 つの異なるスタイルが利用可能です。
スタイルの説明:
行またはセル上でアクティブなマウスオーバー
成功は成功または前向きな行動を識別します
info は、一般的なプロンプト情報またはアクションを識別します
警告標識は、ユーザーに警告または注意を必要とします
危険とは、危険な行為または潜在的にマイナスな行為を意味します
6. 特定の行を非表示にします
//隐藏行 <tr class="sr-only">
7. レスポンシブフォーム
//表格父元素设置响应式，小于 768px 出现边框 <body class="table-responsive">
2.ボタン
Bootstrap には、開発者が使用できる豊富なボタンが多数用意されています。
1. ボタンとして使用できるラベルまたは要素
//转化成普通按钮 <a href="###" class="btn btn-default">Link</a> <button class="btn btn-default">Button</button> <input type="button" class="btn btn-default" value="input">
注意すべき点が 3 つあります:
(1).コンポーネントに関する注意事項
ボタン クラスは 3499910bf9dac5ae3c52d5ede7383485 要素と bb9345e55eb71822850ff156dfde57c8 要素に適用できますが、ナビゲーション コンポーネントとナビゲーション バー コンポーネントは bb9345e55eb71822850ff156dfde57c8 要素のみをサポートします。
(2). リンクをボタンとして使用する場合の注意事項
3499910bf9dac5ae3c52d5ede7383485 要素が他のページへのリンクや現在のページの他の部分へのリンクではなく、ボタンとして使用され、現在のページで何らかの機能をトリガーするために使用される場合、 「ボタン」属性には必ず role= を設定してください。
(3)。クロスブラウザ表示
。私たちが要約したベスト プラクティスは次のとおりです。 さまざまなブラウザで一致する描画効果を得るために、可能な限り bb9345e55eb71822850ff156dfde57c8 要素を使用することを強くお勧めします。
さらに、Firefox バージョン 30 未満でも、26b16ff13364016dacc504c713a72e6d 要素に基づいて作成されたボタンの line-height 属性を設定できず、結果として Firefox ブラウザが維持できないバグも発見されました。他のボタンと同じ高さです。
2. 事前定義されたスタイル
//一般信息 <button class="btn btn-info">Button</button>
スタイルの説明
btn-default デフォルト スタイル
btn-success 成功スタイル
btn-info 一般情報スタイル
btn-warning 警告スタイル
btn-danger 危険なスタイル
btn-主な好みのスタイル
btn-link リンク スタイル
3. サイズ
//从大到小的尺寸 <button class="btn btn-lg">Button</button> <button class="btn">Button</button> <button class="btn btn-sm">Button</button> <button class="btn btn-xs">Button</button>
4. ブロックレベルのボタン
//块级换行 <button class="btn btn-block">Button</button> <button class="btn btn-block">Button</button>
5.アクティベーションステータス
//激活按钮 <button class="btn active">Button</button>
6. 無効ステータス
//禁用按钮 <button class="btn active disabled">Button</button>
上記は編集者が紹介したBootstrapのテーブルとボタンの機能です。ご参考になれば幸いです。