收藏
批改状态：未批改
老师批语：
以下代码主要使用bootstrap中的水平表单实现完整的用户登录的界面：
<!doctype html> <html> <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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>水平表单</title> </head> <body> <div> <div> <div class="col-md-6 col-md-offset-3"> <h3>用户登录</h3> <!--水平表单: --> <form action=""> <div class="form-group "> <label for="email" class="col-sm-2 control-label">邮箱:</label> <div> <input type="email" id="email" placeholder="Exeample@mail.com"> </div> </div> <div class="form-group "> <label for="password" class="col-sm-2 control-label">密码:</label> <div> <input type="password" id="password" placeholder="密码不少于六位"> </div> </div> <div> <div class="col-sm-10 col-sm-offset-2"> <div> <label> <input type="checkbox" name="" id="" checked> 记住密码 </label> </div> </div> </div> <div> <div class="col-md-10 col-sm-offset-2"> <button class="btn btn-primary btn-block">登录</button> </div> </div> </form> </div> </div> </div> </body> </html>
说明：水平表单对比垂直表单在input标签外增加的一个div，给其类样式使他与label标签位于一行中。
总结：
1、bootstrap中表格或者表单都是通过类样式控制，使用表格时只需要添加table类样式就可以了，简洁方便，表格中常用的类样式有 table-bordered、 table-hover、 text-center等等；
2、使用表单时，只需要添加相应的类样式控件也能简洁快速的控制各个标签的样式，而且美观；
3、表单的默认样式是垂直的，其他的还有
内联表单：就是所有的表单元素全部在同一行显示,通常来说不需要标签说明,必须在sm或以上屏幕才有效(> 768px)，需在form标签中添加form-inline类样式即可；
水平表单：就是每一个input和它的文字提示显示在同一行，只需要在input标签外增加的一个div，给其类样式使他与label标签位于一行中。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
