第七篇.表单

Bootstrap提供了三种表单布局:垂直表单,内联表单和档次表单

开创垂直或核心表单:

  • ·向父 <form> 元素添加 role=”form”
  • ·把标签和控件放在一个带有 class .form-group 的 <div>
    中。这是获取最佳距离所必要的。
  • ·向所有的文书元素 <input>、<textarea> 和 <select>
    添加 class .form-control

* *

<form role=”form”>

            <div class=”form-group”>

                <label for=”name”>名称</label>

                <input type=”text” class=”form-control” id=”name”

                       placeholder=”请输入名称”>

            </div>

            <div class=”form-group”>

                <label for=”inputfile”>文件输入</label>

                <input type=”file” id=”inputfile”>

                <p
class=”help-block”>这里是块级帮助文本的实例。</p>

            </div>

            <div class=”checkbox”>

                <label>

                    <input type=”checkbox”> 请打勾

                </label>

            </div>

            <button type=”submit” class=”btn
btn-default”>提交</button>

        </form>

图片 1*

 

* *

 

内联表单:

内联表单中有因素都往左对伙同,标签并排,要开创内联表单,需要以form标签中投入class

.form-inline

<form class=”form-inline” role=”form”>

            <div class=”form-group”>

                <label class=”sr-only”
for=”name”>名称</label>

                <input type=”text” class=”form-control” id=”name”

                       placeholder=”请输入名称”>

            </div>

            <div class=”form-group”>

                <label class=”sr-only”
for=”inputfile”>文件输入</label>

                <input type=”file” id=”inputfile”>

            </div>

            <div class=”checkbox”>

                <label>

                    <input type=”checkbox”> 请打勾

                </label>

            </div>

            <button type=”submit” class=”btn
btn-default”>提交</button>

        </form>

展示力量如下:

 图片 2

 

留神:默认情况下,Bootstrap 中之 input、select 和 textarea 有 100%
宽度。在应用内联表单时,需要以表单控件上安一个小幅。

水平表单:和其它少种表单有所不同,要创造水平表单需要遵循以下步骤.

  • 往父 <form> 元素添加 class .form-horizontal
  • 将标签及控件放在一个包含 class .form-group 的 <div> 中。
  • 于标签上加 class .control-label

例如:

<form class=”form-horizontal” role=”form”>

            <div class=”form-group”>

                <label for=”firstname” class=”col-sm-2
control-label”>名字</label>

                <div class=”col-sm-10″>

                    <input type=”text” class=”form-control”
id=”firstname”

                           placeholder=”请输入名字”>

                </div>

            </div>

            <div class=”form-group”>

                <label for=”lastname” class=”col-sm-2
control-label”>姓</label>

                <div class=”col-sm-10″>

                    <input type=”text” class=”form-control”
id=”lastname”

                           placeholder=”请输入姓”>

                </div>

            </div>

            <div class=”form-group”>

                <div class=”col-sm-offset-2 col-sm-10″>

                    <div class=”checkbox”>

                        <label>

                            <input type=”checkbox”> 请记住自己

                        </label>

                    </div>

                </div>

            </div>

            <div class=”form-group”>

                <div class=”col-sm-offset-2 col-sm-10″>

                    <button type=”submit” class=”btn
btn-default”>登录</button>

                </div>

            </div>

        </form>

 图片 3

 

 

相关文章