BootStray表单控件基本控件的使用提示，图标的交互

来源：互联网发布：广告单页设计软件编辑：程序博客网时间：2024/06/08 13:44

摘自《极客学院》

1、效果图：

2、html代码：

代码1：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="bootstrap.min.css">    <title>BootStrap表单3</title></head><body>    <form role="form">        <!--disabled 禁止输入-->        <!--<fieldset disabled>-->        <fieldset>            <input type="text" class="form-control">            <textarea rows="5" class="form-control">Hello</textarea>            <div class="checkbox col-xs-12">                <label class="col-xs-1">                    <input type="checkbox">吃橘子                </label>                <label class="col-xs-2">                    <input type="checkbox">吃苹果                </label>            </div>            <div class="radio">                <label>                    <input type="radio" name="lalala" checked>男                </label>            </div>            <div class="radio">                <label>                    <input type="radio" name="lalala" checked>女                </label>            </div>            <!--显示全部选项-->            <!--<select multiple class="form-control">-->            <select class="form-control">                <option>1</option>                <option>1</option>                <option>1</option>            </select>            <p  class="form-control-static">请按照我的格式输入：dszgf5717@163.com</p>        </fieldset>    </form></body></html>

代码2：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <!--<link rel="stylesheet" href="bootstrap.min.css">-->    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    <title>BootStrap 表单4</title></head><body>    <form role="form">        <fieldset>            <div class="form-group has-warning has-feedback">                <label>用户ing</label>                <input type="text" class="form-control">                <!--组件图标的显示，必须使用新的link，低版本可能效果不一致-->                <span class="glyphicon glyphicon-ok form-control-feedback"></span>            </div>            <div class="form-group has-success">                <label>用户ing</label>                <input type="text" class="form-control">            </div>            <div class="form-group has-error">                <label>用户ing</label>                <input type="text" class="form-control">            </div>        </fieldset>    </form></body></html>

0 0

BootStray表单控件 基本控件的使用 提示，图标的交互

BootStray表单控件基本控件的使用提示，图标的交互