bootstrap入门【表单控件】

来源：互联网发布：淘宝游戏交易网编辑：程序博客网时间：2024/05/22 07:54

<link href="bootstrap.min.css" rel="stylesheet">  插入bootstrap的外部样式表

支持  输入框，文本域，多选按钮，单选按钮，下拉列表

name="optionsRadios"   其中，单选按钮必须指定name保证两个按钮是一组的。
class=" form-control"   意为给所有的控件加入css样式
multiple    下拉列表显示所有选项

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>表单所支持的控件</title>    <link href="bootstrap.min.css" rel="stylesheet"></head><body>    <form role="form">        <p>输入框</p>        <input type="text" class="form-control">        <p>文本域</p>        <textarea class="form-control" rows="5"></textarea>        <p>多选按钮</p>        <div class="checkbox">            <label>                <input type="checkbox" value="">                吃橘子            </label>        </div>        <div class="checkbox">            <label>                <input type="checkbox" value="">                吃苹果            </label>        </div>        <p>单选按钮</p>        <div class="radio">            <label>                <input  name="optionsRadios"   type="radio" checked>                男            </label>        </div>        <div class="radio">            <label>                <input  name="optionsRadios"   type="radio" checked>                 女            </label>        </div>        <p>下拉列表</p>        <select multiple class=" form-control">            <option>1</option>            <option>2</option>            <option>3</option>        </select>    </form></body></html>

0 0