前端基础之《Bootstrap（6）—全局CSS样式_表单》

一、基本

1、基本表单（.form-group）

2、输入框的样式（.form-control）

3、表单浅灰色占位符（placeholder属性）

4、单选框（.checkbox）

5、多选框（.radio）

6、radio怎么只能选中一个，name相同的radio是同一个radio

7、例子

<form action="">
    <div class="form-group">
        <label for="">用户名：</label>
        <input type="text" class="form-control" placeholder="username">
    </div>

    <div class="form-group">
        <label for="">密码：</label>
        <input type="password" class="form-control" placeholder="username">
    </div>

    <div class="form-group">
        <label for="">留言：</label>
        <textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="username"></textarea>
    </div>

    <div class="form-group">
        <label for="">城市：</label>
        <select name="" id="" class="form-control">
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
        </select>
    </div>

    <div class="form-group">
        <label for="">爱好：</label>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="" id="">篮球
            </label>
            <label>
                <input type="checkbox" name="" id="">篮球
            </label>
        </div>
    </div>

    <div class="form-group">
        <label for="">选择题：</label>
        <div class="radio">
            <label>
                <input type="radio" name="xyz" id="">篮球
            </label>
            <label>
                <input type="radio" name="xyz" id="">篮球
            </label>
        </div>
    </div>

    <div class="form-group">
        <label for="">文件上传：</label>
        <input type="file" name="" id="" class="form-control">
    </div>

    <div class="form-group">
        <input type="submit" value="Ok" class="btn btn-primary">
        <input type="reset" value="Cancel" class="btn btn-danger">
    </div>
</form>

二、内联表单

1、表单横着放（.form-inline）

2、form表单中嵌入输入框组（.input-group）

<form action="">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control"></input>
            <div class="input-group-addon">.00</div>
        </div>
    </div>
</form>

3、水平排列的表单（.form-horizontal）

4、label右对齐（.control-label）

<form action="" class="form-horizontal">
    <div class="form-group">
        <label for="" class="col-md-2 control-label">用户名：</label>
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="username">
        </div>
    </div>

    <div class="form-group">
        <label for="" class="col-md-2 control-label">密码：</label>
        <div class="col-md-10">
            <input type="password" class="form-control" placeholder="username">
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10 col-md-offset-2">
            <input type="submit" value="Ok" class="btn btn-primary">
            <input type="reset" value="Cancel" class="btn btn-danger">
        </div>
    </div>
</form>

5、form表单中的静态内容（.form-control-static）

三、禁用属性（disabled）

四、只读属性（readonly）

五、区域禁用

1、fieldset的disabled属性
为<fieldset>设置disabled属性，可以禁用<fieldset>中包含的所有控件

六、表单框阴影颜色

1、绿色（.has-success）

2、黄色（.has-warning）

3、红色（.has-error）

七、添加额外的图标

1、在form-group加入文本标记（.has-feedback）

2、在input加入文本图标（.form-control-feedback）

<form action="" class="form-horizontal">
    <div class="form-group has-feedback">
        <label for="" class="col-md-2 control-label">用户名：</label>
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="username">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
    </div>

    <div class="form-group has-feedback">
        <label for="" class="col-md-2 control-label">用户名：</label>
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="username">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>

    <div class="form-group has-feedback">
        <label for="" class="col-md-2 control-label">用户名：</label>
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="username">
        </div>
    </div>

    <div class="form-group">
        <label for="" class="col-md-2 control-label">密码：</label>
        <div class="col-md-10">
            <input type="password" class="form-control" placeholder="username">
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10 col-md-offset-2">
            <input type="submit" value="Ok" class="btn btn-primary">
            <input type="reset" value="Cancel" class="btn btn-danger">
        </div>
    </div>
</form>

八、控件尺寸
在input身上改

1、大尺寸（.input-lg）

2、小尺寸（.input-sm）

九、控件描述

1、描述（.help-block）

<p class="help-block">aaaaaaaaaaaaaaa</p>