水平表单制作登录页面
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--1. 导入bootstrap样式文件css;--> <link rel="stylesheet" href="../dist/css/bootstrap.css"> <title>水平表单</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h3 class="text-center">用户登录</h3> <form action="" class="form-horizontal"> <!--QQ--> <div class="form-group"> <label for="QQ" class="col-sm-2 control-label">QQ:</label> <div class="col-sm-10"> <input type="QQ" id="QQ" class="form-control"> </div> </div> <!--密码--> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密码:</label> <div class="col-sm-10"> <input type="password" id="password" class="form-control"> </div> </div> <!--记住密码--> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <div class="checkbox"> <label for=""> <input type="checkbox">记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <button class="btn btn-primary">登录</button> <button class="btn btn-primary">注册</button> </div> </div> </form> </div> </div> </div> </body> </html>
运行实例 »
个人总结：
开始容器 container container-fluid 100%
行 row
列 col-md(sm)-number
导航 nav nav-inverse
text-center文本居中
h1~h7可直接写在class=“”；
表格 ：
基类：table
修饰类：table-bordered（边框）,table-hover(鼠标点击交互)
表单：
基类： <div class="form-group">
<texearea class="form-control" row="4"(有row无col)></textarea>
</div>
form-group,form-control不可缺少
若在外面套一个<div class="form-inline">~上述代码~</div>，就变成一个内联表单了，即所有元素在同一行显示
若在外面套一个<form class="form-horizontal">~上述代码~</form>，就变成了水平表单，即所有元素垂直排列 -----以后就用这个了，别的还要对齐，这个自动对齐了
正确布局可参考0925-demo4
注意复选框与按钮组非常特殊：
<div class="checkbox-inline"> (类型class有checkbox和radio)
<label>
<input type="checkbox" name="course[]" value="front"> 前端
</label>
</div>
