<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 推荐使用GCF（兼容IE6...）渲染网页，如果电脑未安装GCF，使用最高版本的IE进行渲染 Google Chrome Frame（谷歌内嵌浏览器框架GCF）。 这个插件可以让用户的IE浏览器外不变， 但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核--> <meta name="viewport" content="width=device-width,initial-scale=1"> <!--viewport:用户是否可以缩放WEB页面。如果允许用户缩放，则用户按照什么比例缩放 --> <!--width=device-width:指定页面宽度； initial-scale=1：默认缩放比是1,意味着不缩放--> <title>BS-入门</title> <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <!--如果你的浏览器版本小于IE9则使用以下JS。HTML5标签不支持。使得不支持的标签能够在IE6/7/8中使用--> <!--[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]--> <!-- <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> --> </head> <body> <div class="container" > <!--对话框 div实现--> <div class="alert alert-success" alert-dismissable> <button type="button" class="close" data-dismiss = "alert">×</button> 恭喜你注册成功 </div> <fieldset> <legend>学生注册</legend> <form role="form" class="form-horizontal"> <div class="form-group has-success"> <label class="control-label col-lg-2 col-sm-2 " for="username">姓名：</label> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-user" ></span> </div> <input type="text" id="username" class="col-lg-3 col-sm-3 " name="username" placeholder="请输入姓名"/> <span class="help-block" class="col-lg-3 col-sm-3"> 用户名必须4-20位</span> </div> </div> <div class="form-group has-error" > <label class="control-label col-lg-2 col-sm-2" for="password">密码：</label> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-lock" ></span> </div> <input type="password" id="password" class=" form-control form-control col-lg-10 col-sm-10" name="password" placeholder="请输入密码"/> </div> <span class="help-block">密码必须是6到16位</span> </div> <div class="form-group has-warning"> <label class="control-label col-lg-2 col-sm-2" for="email" >邮箱(禁用)：</label> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-envelope" ></span> </div> <input disabled type="text" id="email" class="form-control col-lg-10 col-sm-10" name="email" placeholder="请输入你的邮箱"/> </div> <span class="help-block">邮箱必须含@符号且不能再第一位</span> </div> <hr> <div id="show" class="btn btn-default">展开选项</div> <!--默认不显示的表单元素--> <div id="showContent" style="display:none;"> <div class="form-group"> <label class="control-label " for="sex" >性别：</label> <input type="radio" name="sex" value="man" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 </div> <div class="form-group"> <label class="control-label">爱好:</label> <div class="checkbox"> <label> <input type="checkbox" name="hobby" value="1"/>篮球 </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="hobby" value="2"/>台球 </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="hobby" value="3"/>羽毛球 </label> </div> </div> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-info">信息按钮</button> <button type="button" class="btn btn-warning">警告按钮</button> <button type="button" class="btn btn-danger">危险按钮</button> <button type="button" class="btn btn-link">链接按钮</button> <br> <p>不同大小的按钮<p> <button type="button" class="btn btn-success btn-xs"> <span class="glyphicon glyphicon-plus">添加 </span> </button> <button type="button" class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-pencil">编辑</span></button> <button type="button" class="btn btn-danger btn-md"> <span class="glyphicon glyphicon-remove">删除</span></button> <button type="button" class="btn btn-warning btn-lg">警告按钮 大尺寸</button> <p>块级的按钮<p> <button type="button" class="btn btn-warning btn-block">块级按钮按钮</button> <br> <button type="button" class="btn btn-warning active">激活的按钮</button> <button type="button" class="btn btn-warning disabled">禁用的按钮</button> </div> </form> </fieldset> </div> <script> $(document).ready(function(e) { $("#show").click(function(){ $("#showContent").toggle(1000); }); }); </script> </body> </html>
效果图：
