<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上，禁止用户缩放（zooming） --> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no"> <title>Bootstrap基础练习</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 --> <!-- 注意：Respond.js不支持 file:// 方式的访问 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 基础表单 --> <!-- 提示语句label和input元素放在一个样式为.form-group的div里，form-group提供了一个margin-button:15px的底部外边距，可以看清楚每一组控件。 --> <form> <fieldset> <legend>用户登录</legend> <div class="form-group"> <label>登录账户：</label> <input type="email" class="form-control" placeholder="请输入你的邮箱"></input> </div> <div class="form-group"> <label>登录密码：</label> <input type="text" class="form-control" placeholder="请输入你的密码"></input> </div> <div class="checkbox"> <label><input type="checkbox">记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </fieldset> </form> <br /> <!-- 在普通的form元素中使用.form-inline样式实现内联表单 --> <!-- 注意，在这种情况下再设置一个label的话，input又会换行，所以如果非要加label，只能在input所在的div上边在加一个div元素用于包含label标签。 --> <form class="form-inline"> <legend>内联表单样式</legend> <div class="form-group"> <label>用户：</label> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入你的邮箱"></input> </div> <div class="form-group"> <label>密码：</label> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入你的密码"></input> </div> <div class="checkbox"> <label><input type="checkbox">记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </form> <br /> <!-- 如果没有为每个输入控件设置label，屏幕阅读器将无法正确识别。对于这种内联表单，可以使用.sr-only样式将其隐藏。 --> <form class="form-inline"> <div class="form-group"> <label class="sr-only">登录用户：</label> <input type="text" class="form-control" id="account" placeholder="请输入你的邮箱"></input> </div> <div class="form-group"> <label class="sr-only">登录密码：</label> <input type="text" class="form-control" id="passwords" placeholder="请输入你的密码"></input> </div> <div class="checkbox"> <label><input type="checkbox">记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </form> <br /> <!-- 横向表单 --> <!-- 横向表单与内联表单使用方式有些不一样，横向表单不能在form元素上简单应用一个.form-horizontal样式，这是因为.form-horizontal样式本身没有做什么特殊的设置，只是简单设置了一下相关的padding和margin值。在实现横向表单时还要使用Bootstrap的栅格类，以便将label和控件水平并排布局。 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="account" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="email" class="form-control" id="account" palceholder="请输入你的用户名"> </div> </div> <div class="form-group"> <label for="account" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" palceholder="请输入你的密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"><label><input type="checkbox">记住密码</label></div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> <!-- 表单控件 --> <form> <select> <option>这是一个下拉列表菜单</option> <option>下拉列表菜单的第一项</option> <option>下拉列表菜单的第二项</option> <option>下拉列表菜单的第三项</option> <option>下拉列表菜单的第四项</option> <option>下拉列表菜单的第五项</option> </select> <select multiple="multiple"> <option>这是第一个选项</option> <option>这是第二个选项</option> <option>这是第三个选项</option> <option>这是第四个选项</option> <option>这是第五个选项</option> </select> <textarea class-"form-control" rows="5"></textarea> </form> <!-- checkbox和radio --> <!-- checkbox和radio是input元素里两个非常特殊的type，通常在使用的过程中要和label文字搭配。每个input外部都要用label包住，并且在最外层用容器元素包住，并应用相应的.checkbox和.radio样式。 --> <form> <div class="checkbox"> <label><input type="checkbox" value="">是否已阅相关信息条款</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="female" checked>女</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="male">男</label> </div> </form> <!-- 使用.checkbox-inline和.radio-inline样式，实现checkbox和radio的横向显示 --> <form> <label class="checkbox-inline"><input type="checkbox" value="sports" id="sports">体育</label> <label class="checkbox-inline"><input type="checkbox" value="music" id="music">音乐</label> <label class="checkbox-inline"><input type="checkbox" value="art" id="art">艺术</label> <label class="radio-inline"><input type="radio" value="female" id="female">女</label> <label class="radio-inline"><input type="radio" value="male" id="female">男</label> <label class="radio-inline"><input type="radio" value="null" id="null">保密</label> </form> </body> </html>
时间： 2024-10-05 00:47:39