bootstrap表单的其他组件

来源：互联网发布：mac上的开发软件编辑：程序博客网时间：2024/05/16 05:06
<!DOCTYPE html><html>  <head>    <title>Bootstrap 表单</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <!-- Bootstrap -->    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">    <script src="bootstrap/js/jquery.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script>  </head>  <body style="padding:50px;">    <h3>其他常用表单控件【多个复选框或单选按钮并排显示.inline】</h3>    <p>让多个表单标签并排显示，只需要给label添加一个.inline类</p>    <label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">1</label>    <label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">2</label>    <label for="" class="radio inline"><input type="radio" name="sex" id="">男</label>    <label for="" class="radio inline"><input type="radio" name="sex" id="">女</label>        <h3>选项列表</h3>    <select name="" id="">    <option value="">1</option>    <option value="">2</option>    <option value="">3</option>    <option value="">4</option>    <option value="">5</option>    </select>    <br>    <p>下拉列表选择多项，只需加句multiple="multiple"即可</p>    <select name="" id="" multiple="multiple">    <option value="">1</option>    <option value="">2</option>    <option value="">3</option>    <option value="">4</option>    <option value="">5</option>    </select>        <h3>扩展表单组件【前/后置组件】</h3>    <ol>    <li>讲表单组件用div包含，并添加一个input-prepend类或input-append类</li>    <li>然后在div里面添加一个.add-on类的span标签</li>    <li>后面紧跟表单文本框的控件</li>    <li>span的位置可以在前，也可以在后</li>    </ol>    <div class="input-prepend">    <span class="add-on">@</span>        <input type="text" name="" id="" placeholder="张三丰">    </div>        <div class="input-append">        <input type="text" name="" id="" placeholder="张三丰">    <span class="add-on">@</span>    </div>        <div class=" input-prepend input-append">    <span class="add-on">$</span>    <input type="text" name="" id="">    <span class="add-on">.00</span>    </div>    <div class=" input-prepend input-append">    <button class="btn">选项</button>    <input type="text" name="" id="">    <button class="btn">搜索1</button>    <button class="btn">搜索2</button>    </div>        <h3>圆弧搜索表单</h3>    <form class="form-search" action="">    <div class="input-prepend">        <button class="btn">搜索1</button>            <input class="search-query" type="text" name="" id="" placeholder="开始搜索">        </div>        <br><br>    <div class=" input-append">            <input class="search-query" type="text" name="" id="" placeholder="开始搜索">        <button class="btn">搜索2</button>        </div>    </form>        <h3>控件大小设置</h3>    <input class="input-block-level" type="text" name="" id="" placeholder="块级文本框">        <b>控制控件大小除了.span*，还可以用类名input-mini/small/medium/large/xlarge/xxlarge</b><br>    <input class="input-mini" type="text" name="" id=""><br>    <input class="input-small" type="text" name="" id=""><br>    <input class="input-medium" type="text" name="" id=""><br>    <input class="input-large" type="text" name="" id=""><br>    <input class="input-xlarge" type="text" name="" id=""><br>    <input class="input-xxlarge" type="text" name="" id=""><br>        <h3>相对大小的控件</h3>    <input class="span1" type="text" name="" id="">    <input class="span2" type="text" name="" id="">    <input class="span3" type="text" name="" id="">        <select class="span1" name="" id="">...</select>    <select class="span2" name="" id="">...</select>    <select class="span3" name="" id="">...</select>        <h3>不可编辑的控件</h3>    <input class="uneditable-input" type="text" name="" id="" placeholder="文本不可编辑"><br>    <textarea class="uneditable-textarea" name="" id="" cols="30" rows="5"></textarea>        <form class="form-horizontal">    <div class="control-group warning">            <label class="control-label">Input widht warning</label>            <div class="controls">                <input type="text" name="" id="">                <span class=" help-inline">something may have gone wrong!</span>            </div>        </div>        <div class="control-group error">            <label class="control-label">Input widht warning</label>            <div class="controls">                <input type="text" name="" id="">                <span class=" help-inline">something may have gone wrong!</span>            </div>        </div>        <div class="control-group info">            <label class="control-label">Input widht warning</label>            <div class="controls">                <input type="text" name="" id="">                <span class=" help-inline">something may have gone wrong!</span>            </div>        </div>        <div class="control-group success">            <label class="control-label">Input widht warning</label>            <div class="controls">                <input type="text" name="" id="">                <span class=" help-inline">something may have gone wrong!</span>            </div>        </div>    </form>  </body></html>
预览效果：
0 0