bootstrap入门【表单（控件2）】

最新推荐文章于 2024-05-19 13:56:53 发布

小章鱼哥

最新推荐文章于 2024-05-19 13:56:53 发布

阅读量585

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/43989455

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文介绍了Bootstrap框架中表单控件的使用方法，包括静态控件显示、输入框禁用状态设置及焦点状态阴影效果展示。此外还详细解释了如何通过添加特定类来改变输入框边框颜色，并在输入框后添加图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

为了图标正常加载，引入网络端的bootstrap外部样式表

<p>静态控件</p>
<p>请按照我的格式输入zhangyugege@163.com</p>
<p class="form-control-static">请按照我的格式输入zhangyugege@163.com</p>    好像没什么区别啊


    <p>焦点状态 阴影效果 不允许输入或禁用状态</p>
    <p class="form-control" type="text" placeholder="hello" disabled></p>

<fieldset disabled>
    <form role="form">
        <input class="form-control" type="text"readonly>
    </form>
</fieldset>        以上两者都能实现禁用状态

has-warning黄色

has-success绿色

has-error红色      为输入框添加边框颜色

<span class="glyphicon glyphicon-ok form-control-feedback"></span>   在边框后部添加图标，名字叫glyphicon glyphicon-ok（中间有空格），各种图标详见API的conponents   并设置form-control-feedback  在div上也要设置has-feedback 反馈

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link href="bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
    <form role="form">
        <p>静态控件</p>
        <p>请按照我的格式输入zhangyugege@163.com</p>
        <p class="form-control-static">请按照我的格式输入zhangyugege@163.com</p>
        <p>焦点状态 阴影效果 不允许输入或禁用状态</p>
        <p class="form-control" type="text" placeholder="hello" disabled></p>
    </form>
    <fieldset disabled>
        <form role="form">
            <input class="form-control" type="text"readonly>
        </form>
    </fieldset>
    <form role="form">
        <div class="form-group has-warning has-feedback">
            <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">
            <label>用户名</label>
            <input class="form-control" type="text">
        </div>
    </form>
</body>
</html>