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

来源：互联网发布：每天化妆知乎编辑：程序博客网时间：2024/06/05 15:05

<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>

0 0