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 画像レスポンシブ (親要素に合わせて適切にスケールされます)

関連ラベル：

Bootstrap学习笔记（3）表格表单图片

ソース：php.cn

前の記事：Front-end_html/css_WEB-ITnose についての考えと洞察 次の記事：html クイック スタート (基本チュートリアル + リソースの推奨事項)_html/css_WEB-ITnose

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2159

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2310

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1947

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1821

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1875

関連トピック

詳細>

• ostringstreamの使用法
• Web サーバーのハードウェア構成要件
• max関数の使い方
• 外部画面と内部画面の違いが壊れている
• nth-child
• HTMLに動画を挿入する方法
• grep の通常の使用法
• 刻印されたコインとは何ですか？

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1422649
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4267489
• 
  JAVA 初心者向けビデオチュートリアル

  2530043
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  506990
• 
  PHP ゼロベースの入門チュートリアル

  862143

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1422649 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2530043 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  506990 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215754 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  888836 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  7388 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5775 回の学習
• 
  Go言語実践GraphQL

  4865 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  688 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  24419 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved