表单 Paste_Image.png form-group ： 表单组样式：将和表单元素包含其中，可以获得更好的排列。 form-control ： 表单元素样式，常用于<select>元素。</h4> </li> <li> <h4>form-inline ： 内联表单样式（用于<form>元素）： 可以使元素一行排列。</h4> </li> <li> <h4>checkbox ： 复选框样式</h4> </li> <li> <h4>radio ： 单选框样式</h4> </li> <li> <h4>disabled ： 可以禁用单选框或复选框选项的文本。</h4> </li> <li> <h4>form-horizontal ： 水平排列的表单（用于<form>元素）</h4> </li> <li> <h4>sr-only ： 可以用于隐藏元素。</h4> </li> <li> <h4>checkbox-inline ： 控制多个复选框元素在同一行显示。</h4> </li> <li> <h4>radio-inline ： 控制多个单选框元素在同一行显示。</h4> </li> </ul> <pre><code><!DOCTYPE html> <html> <head> <title>BootstrapFormDemo</title> <meta charset="utf-8"> <mata http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body style="padding:50px;background-color:#ccc;"> <div class="container" style="padding:50px;background-color:#fff;"> <form class="form-horizontal"> <div class="form-group"> <!-- for与input中的id保持一致，可以使得在点击label时，也可以获取焦点。 --> <label class="col-md-2 control-label" for="username">用户名：</label> <div class="col-md-10"> <input type="text" id="username" placeholder="用户名" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="password">密码：</label> <div class="col-md-10"> <input type="text" id="password" placeholder="请输入你的密码" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">上传图片:</label> <div class="col-md-10"> <input type="file"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">兴趣爱好：</label> <div class="col-md-10"> <label class="checkbox-inline"><input type="checkbox" value="画画">画画</label> <label class="checkbox-inline"><input type="checkbox" value="音乐">音乐</label> <label class="checkbox-inline"><input type="checkbox" value="体育">体育</label> <label class="checkbox-inline"><input type="checkbox" value="唱歌">唱歌</label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">学历：</label> <div class="col-md-10"> <label class="radio-inline"><input type="radio">高中</input></label> <label class="radio-inline"><input type="radio">大专</input></label> <label class="radio-inline"><input type="radio">本科</input></label> <label class="radio-inline"><input type="radio">研究生</input></label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">个人简介：</label> <div class="col-md-10"> <textarea class="form-control" rows="5" placeholder="请输入你的个人信息">
