Bootstrap学習メモ(3)表形式picture_html/css_WEB-ITnose

ブートストラップテーブル

テーブルクラス:

.table はテーブルの行間に水平線を追加するだけです。

.table-striped はテーブルの行間にゼブラ線を追加または削除します。テーブルのマウスホバー状態を設定します。

.table-border はすべてのテーブルに境界線を追加します。

.table-condensed はテーブルをよりコンパクトにします。

は、特定の行 セルまたは行はアクティブです。

.success は成功のスタイルを表します。

.danger は危険のスタイルを表します。

フォームクラス:

フォームを作成する基本手順

(1) まず、フォーム要素に role="form" を追加します

(2) ラベルとコントロールをクラスを使用してグループに配置します。 .form-group

、これは最適な間隔ロックを取得するために必要です

(3) クラス .form-control をすべてのテキスト要素 に追加します。いくつかのフォーム フォーマット;

垂直フォーム - 上記のスタイルを使用して作成された通常のフォーム;

水平フォーム - フォームにクラス .form-inline を追加します。ラベル要素は .sr-only を使用してラベル要素 (ラベル) を非表示にすることができます

サポートされているフォーム コントロール:

input、textarea、checkbox、radio、select (複数を追加して複数選択を実現できます)

以下は特別な注意: インライン チェック ボックスまたはラジオ ボタンを実装するには、checkbox-line 属性を使用します。 プレーン テキストを配置したい場合は、

要素に .form-control-static を使用できます。 :

div に has-warning、has-error、has-success を設定して、内部コントロールのステータスを表示できます

.input-large または .input-sm を設定して、サイズを表示できます。コントロールが占有する列の数を表示するには、col-lg-* を使用します。

コンテンツの説明を表示するには、.class-bloc を使用します。

。 img-rounded: border-radius:6px を追加して、画像の角を丸くします。

.img-circle: border-radius:50% を追加して、画像全体を円形にします。

.img-thumbnail: パディングとグレーの境界線を追加します。

.img-sensitive 画像レスポンシブ (親要素に合わせて適切にスケールされます)

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Front-end_html/css_WEB-ITnose についての考えと洞察次の記事：Front-end_html/css_WEB-ITnose についての考えと洞察

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）