Bootstrap フォームとリストの詳細説明_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2015 年 1 月 7 日

Bootstrap は、フォーム レイアウトとリストのサポートを提供します。縦型フォーム (デフォルト)、インラインフォーム、横型フォーム。数値が多いリストを表示したくない場合は、class.list-unstyled を使用してスタイルを削除できます。 list-inline を使用してすべてのリスト項目を同じ行に配置することもできます。また、dl-horizo​​ntal を使用して

内の属性と説明を並べて表示することもできます。

ブートストラップ フォーム

1. すべての要素がインラインで左に揃えられ、ラベルが並んでいるフォームを作成する必要がある場合は、

にクラスを追加してください。タグ .form-inline。

2. デフォルトでは、Bootstrap の input、select、および textarea の幅は 100% です。インラインフォームを使用する場合、フォームコントロールで幅を設定する必要があります。

3. class .sr-only を使用すると、インラインフォームのラベルを非表示にできます。

4. 横型とその他の形式では、マークの数だけでなく、表示形式も異なります。水平方向にレイアウトされたフォームを作成するには、親の

要素に class . form-horizo​​ntal を追加し、

内にクラス コントロールを追加します。 -label。

5. クラス .input-lg と .col-lg-* を使用して、フォームの高さと幅をそれぞれ設定できます。

6. ブートストラップ フォーム コントロールには、入力ボックスの入力にブロック レベルのヘルプ テキストを含めることができます。幅全体を占めるコンテンツ ブロックを追加するには、 の後に .help-block を使用します。

ブートストラップリスト

描述	实例
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( 和 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.dl-horizontal	该类设置了浮动和偏移，应用于 元素和 元素中，具体实现可以查看实例
.pre-scrollable	使 元素可滚动 scrollable