ブートストラップ学習フォームの形式とフォント アイコン

この記事では、BootStrap のリスト グループ コンポーネント、パネル コンポーネント、および応答性の高い埋め込みコンポーネントについて紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアルにアクセスしてください。

フォーム形式

.form-group: フォームグループ (ラベルラベルと入力ボックスは可能な限りこのクラスで囲む必要があります)

.form-control : input、textarea、select 要素の場合、width 属性はデフォルトで width:100% に設定されます。

.form-inline: form タグにはインライン フォームが設​​定されます。水平方向に配置されるように値を変更します。

.form-horizo​​ntal: 水平方向に配置されるフォームの場合、.form-horizo​​ntal クラスをフォームに追加し、Bootstrap のプリセット グリッド クラスを使用することで、ラベルラベルとコントロール グループを水平方向にグループ化し、並べてレイアウトできます。これを行うと、.form-group の動作が変更され、グリッド システム内の行として動作するようになります。そのため、追加の .row

.sr-only を追加する必要はありません。これは主に次の用途に使用されます。 label 設定するには、ラベルを非表示にします

シンプルなログイン ボックス

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

ここでのコントロール ラベルは、ラベル同期入力のスタイルです

#Font Icons

パフォーマンス上の理由から、すべてのアイコンには基本クラスと各アイコンに対応するクラスが必要です。次のコードを入力すると、どこでも正常に動作します。正しいパディングを設定するには、アイコンとテキストの間に必ずスペースを追加してください。特定のフォント アイコンについては、Bootstrap 中国語 Web サイト (https://v3.bootcss.com/components/) を参照してください。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がブートストラップ学習フォームの形式とフォント アイコンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。