Bootstrap CSS——表单（二）

最新推荐文章于 2021-10-23 14:08:07 发布

Tarkzeng

最新推荐文章于 2021-10-23 14:08:07 发布

阅读量461

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css 表单

本文链接：https://blog.csdn.net/u011350527/article/details/48913003

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

学习记录（表单支持的各种控件）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单支持的控件</title>
    <!--<link rel="stylesheet" href="bootstrap.min.css">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
    <form role="form">
        <!--输入框-->
        <input type="text" class="form-control">
        <hr>

        <!--文本域-->
        <textarea class="form-control" rows="5">Hello</textarea>
        <hr>

        <!--复选、多选按钮-->
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                橘子
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                苹果
            </label>
        </div>
        <hr>

        <!--单选按钮，需指定相同的name-->
        <div class="radio">
            <label>
                <input name="optionsRadios" type="radio" checked>
                男
            </label>
        </div>
        <div class="radio">
            <label>
                <input name="optionsRadios" type="radio" checked>
                女
            </label>
        </div>
        <hr>

        <!--下拉列表 multiple可以让选项全部在表单中出现-->
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>

        <!--静态控件-->
        <!--p 添加form-control-static-->
        <p class="form-control-static">请按照我的格式输入：example@163.com</p>

        <!--焦点状态-->
        <!--不允许使用状态 disabled
        如果要使整个表单都处于该状态，则代码如下：
        <form role="form">
            <fieldset disabled>
                表单内容
            </fieldset>
        </form>
        -->
        <input class="form-control" type="text" placeholder="hello" disabled>

        <!--只读状态 readonly-->
        <input class="form-control" type="text" readonly>

        <!--输入结果状态-->
        <div class="form-group has-warning">
            <label>警告</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group has-success">
            <label>成功</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group has-error">
            <label>失败</label>
            <input class="form-control" type="text">
        </div>
        <hr>


        <!--添加图标-->
        <div class="form-group has-warning has-feedback col-xs-5">
            <label>警告</label>
            <input class="form-control" type="text">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-success">
            <label>成功</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group has-error has-feedback">
            <label>失败</label>
            <input class="form-control" type="text">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>

        <!--控制尺寸，栅格系统-->
        <!--辅助文本-->
    </form>
</body>
</html>