1 : form表单标签要添加 class="form-horizontal" 表示水平排列
2 : 内部div标签要添加 class="form-group" 表示一个表单组的元素
3 : div内部的label要添加 class="col-sm-1 control-label" 表示一个label占一格,且右对齐
4 : 下层的div要添加 class="col-sm-11" 表示div占11格
5 : input要添加 class="form-control" 表示输入框的样式
6 : 为了使得下层的两个按钮也和左边一格字体对齐,我们可以使用col-md-1再加一个col-md-offset-1单选和多选<form action="" > <div class="form-group"> <label for="">多选:</label> <div class="checkbox"> <lable> <input type="checkbox">篮球 </lable> </div>
</div> </form>
<form action="" > <div class="form-group"> <label for="">单选</label>
<div class="radio"> <label> <input type="radio" name="dan">单选答案 </label> </div> </div> </div> </form>
内联表单(所有的都为一行) :
class="form-inline"
简单的全屏表单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>简单的全屏表单</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> </head> <body> <div class="container" id="con"> <h2 class="page-header" style="text-align: center">Bootstarp前端框架</h2> <!--先写一个form表单标签--> <div class="col-md-2"> <form action=""> <div class="form-group"> <label for="username" class="form-label">用户名:</label> <!--<label> 标签为 input 元素定义标注（标记）。通过input输入框的id来查找匹配的input输入框--> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="text" class="form-control" id="password"> </div> <div class="form-group"> <label for="chengshi">城市:</label> <select class="form-control" id="chengshi"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select> </div> <div class="form-group"> <input type="button" class="btn btn-primary" id="bnt" value="提交"> <!--提交按钮--> <input type="reset" class="btn btn-danger" > <!--重置按钮--> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <div>dddddddddddd</div> <input type="button" class="btn btn-warning" style="position:fixed; top:600px; left:80%; display: none" id="goTop" value="顶部"> </div> </form> </div> </div> </body> <script> //匀速去往指定滚动条索引位置,注意,这里的值不是document也不是window, 而是body , 加上html.或者单独body也行 $("#bnt").click(function() { $('body').animate({scrollTop:600},300); }) //获取滚动条当前的位置 $(document).scroll( function(){ //判断,滚动条的高度 if($(document).scrollTop() > 550){ $("#goTop").show(); }else{ $("#goTop").hide(); } } ); //匀速去往指定滚动条索引位置,注意,这里的值不是document也不是window, 而是body , 加上html.或者单独body也行 $("#goTop").click(function() { $('body').animate({scrollTop:0},300); }) </script> </html>
扫一扫
2361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
