ホームページ > 記事 > ウェブフロントエンド > Bootstrapでフォームを作成する3つのフォーマットを詳しく解説(1)_javascriptスキル
Bootstrapでフォームを作成する3つのフォーマットを詳しく解説(1)_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:22:031368ブラウズ
この章では、Bootstrap を使用してフォームを作成する方法を学びます。 Bootstrap では、いくつかの単純な HTML タグと拡張クラスを通じて、さまざまなスタイルのフォームを作成できます。
ブートストラップのフォーム タイプは、縦型または基本フォーム、インライン フォーム、および横型フォームの 3 つの形式に分類されます。
垂直形式または基本形式 (display:block;)
基本的なフォーム構造はブートストラップに付属しており、個々のフォーム コントロールはいくつかのグローバル スタイルを自動的に受け取ります。基本的なフォームを作成する手順を以下に示します:
親の ff9c23ada1bcecdd1a0fb5d5a0f18437 に role="form" を追加します。
ラベルとコントロールをクラス .form-group の
クラス .form-control をすべてのテキスト要素 d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3、および 221f08282418e2996498697df914ce4e に追加します。
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3">
<form role = "form">
<div class = "form-group">
<label for = "name">姓名</label>
<input type = "text" class = "form-control" id = "name"
placeholder = "请输入姓名"></input>
</div>
<div class = "form-group">
<label for = "tel">电话号码</label>
<input type="text" class="form-control" id = "tel"
placeholder = "请输入您的电话号码"></input>
</div>
<div class = "form-group">
<label for = "idCard">请上传身份证</label>
<input type = "file" id = "idCard"></input>
</div>
<div class = "form-group">
<label for = "profession">选择职业</label>
<select id = "profession" class = "form-control">
<option>软件工程师</option>
<option>测试工程师</option>
<option>硬件工程师</option>
<option>质量分析师</option>
</select>
</div>
<div class="form-group">
<button type = "submit" class="btn-info btn-lg">提交</button>
</div>
</form>
</div>
</body>
</html>
効果は次のとおりです:
select の form-control を削除し、input type = "file" に form-control を追加した場合の効果を見てみましょう。
上記のエフェクトとの違いがわかりますか?このようにして、幅、高さ、get
などの周囲の境界線効果を設定するというフォーム コントロールの役割をおそらく理解したと思います。
フォーカスされたときのフォームのスタイル。
インラインフォーム (すべて同じ行にあり、表示はインラインブロック)
すべての要素をインラインで左揃えにし、ラベルを並べてフォームを作成する必要がある場合は、クラス .form-inline を ff9c23ada1bcecdd1a0fb5d5a0f18437 タグに追加します。
ヘッド部分の内容は同じなので、ボディ部分の内容のみ記載します。
<body style="padding: 20px;">
<form role = "form" class="form-inline">
<div class = "form-group">
<label for = "name">姓名</label>
<input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input>
</div>
<div class = "form-group">
<label for = "tel">电话号码</label>
<input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input>
</div>
<div class = "form-group">
<label for = "idCard">请上传身份证</label>
<input type = "file" id = "idCard"></input>
</div>
<div class = "form-group">
<label for = "profession">选择职业</label>
<select id = "profession" class = "form-control">
<option>软件工程师</option>
<option>测试工程师</option>
<option>硬件工程师</option>
<option>质量分析师</option>
</select>
</div>
<div class="form-group">
<button type = "submit" class="btn-info btn-lg">提交</button>
</div>
</form>
</body>
表示効果:
デフォルトでは、Bootstrap の入力、選択、テキストエリアの幅は 100% です。横型フォームを使用する場合は、フォーム コントロールで幅を設定する必要があります。
インラインフォームタグを非表示にするには、クラス .sr-only を使用します。
注: sr-only は、通常のリーダーではなく、スクリーン リーダーに表示されます。
他の要素の form クラスが form-inline の場合、表示は inLine-block; になりますが、input tyoe = "file" は、やはりレイアウトに問題があることがわかります。時間は個別に設定できます。表示は inline-block;
横型フォーム (ラベルや入力などのフォーム要素が同じ行にあります)
横型フォームは、タグの数だけでなく、フォームの表示方法も他のフォームと異なります。横型レイアウトのフォームを作成するには、次の手順に従ってください:
1. クラス .form-horizontal を親