Bootstrap 表单样式二

时间  2019-11-21
标签 bootstrap 表单 样式 栏目 Bootstarp 繁體版
原文   原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">css

</head>
<body>
<!--在表单中添加fieldset disabled整个表单默认禁用-->
<!-- <fieldset>
    <form role="form">
        <input type="text" name="" class="form-control">
        <textarea class="form-control" rows="5">Hello</textarea>html

        <div class="checkbox">
            <label>
                <input type="checkbox" name="" value="">
                吃苹果
            </label>ios


        </div>
        <div class="checkbox">复选框
            <label>
                <input type="checkbox" name="" value="">
                吃香焦
            </label>bootstrap


        </div>
        <div class="radio">单选框
            <label>
                <input type="radio" name="radios" checked>
                男
            </label>spa


        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radios" checked>
                女
            </label>orm


        </div>
        <select multiple class="form-control">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>htm

        </select>
        <p>请按照个人格式输入:hello@163.com</p>
        <input type="text" name="" class="form-control" placeholder="hello" disabled="">ip

<!--数值禁用-->
        <input type="text" name="" class="form-control" readonly="">
        只读
        </fieldset> rem

            </form>-->
    
        <form role="form">
            <div class="form-group has-warning has-feedback col-xs-5"><!--警告-->
            <!--col-xs-5栅格控制大小-->
                <label>用户ing</label>
                <input type="text" name="" class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                input

            </div>
            <div class="form-group has-success has-feedback"><!--成功-->
                <label>用户ing</label>
                <input type="text" name="" class="form-control">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>


            </div>
            <div class="form-group has-error has-feedback"><!--错误-->
                <label>用户ing</label>
                <input type="text" name="" class=" form-control">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>


            </div>

<!--可添加自定义组件 父元素添加类has-feedback　空标签添加类名为代码+空格+form-control-feedback-->

    

    </form> </body> </html>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程