Bootstrap のボタン スタイルと画像スタイルの概要

この記事ではBootstrapでボタンとフォームを組み合わせたスタイルとピクチャースタイルを紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアルにアクセスしてください。

#ブートストラップ ボタン スタイル

1. フォーム グループ

.form-group: form すべてをまとめます

.form-control: スタイルを幅 100%、丸い境界線、適切な青の色合いに設定します...

形式:

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

Note : 入力ボックスのタイプが正しく設定されている場合にのみ、正しいスタイルを与えることができます。

2. インラインフォーム

.form-inline: フォームを左揃えで一列に並べます

形式:

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3. フォームグループ

.input-group: グループ化する場合は、form-group と同じ機能があります。 : グループ化する要素

形式:

<form>
   <p class="input-group">
   <p class="input-group-addon">合组</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4. 水平配置

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

形式:

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

# を追加する必要はありません。 ##5. 単一選択チェックボックス

.checkbox: チェックボックスをブロックレベル要素に変えるためのチェックボックスの親要素として使用されます.checkbox-inline: を使用します。チェック ボックスを行にするには、チェック ボックスの親要素として使用します。

.radio: ラジオ ボタン ボックスの親要素として使用して、ラジオ ボタンをブロック レベルの要素に変換します

. radio-inline: ラジオ ボタン ボックスの親要素として使用されます。

形式:

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择2
   </label>
   </p>
</form>

6。 -down list

.from-control: スタイルを幅 100%、丸い境界線、適切な青い影に設定します...形式:

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7. 検証ステータス

フォーカス取得時の境界線と影の色を変更します.has-error: error red

.has-success:成功 緑色

.has-warning: 警告 黄色

.control-label: ラベル同期対応ステータス

形式:

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

control-label このクラスステータス

8に対応するラベル同期です。追加のアイコンを追加します。

.has-フィードバック: 位置を設定します。

.form-control-フィードバック: has- に関連する要素を設定します。フィードバック クラス要素の位置

.glyphicon glyphicon-ok: チェック マーク アイコン

.glyphicon-warning-sign: 警告アイコン

glyphicon-remove: エラー アイコン

# ＃＃....＃＃＃＃＃＃フォーマット：＃＃＃

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

给 span 设置 form-control-feedback 这个类，让它相对于 has-feedback 进行定位，定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

<input type="text" class="form-control input-sm">

或者直接给父元素设置

<p class="form-group-lg"></p>

响应式图片：

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

以上がBootstrap のボタン スタイルと画像スタイルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。