bootstrap 基础表单 内联表单 横向表单
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p class="btn-primary">基础表单</p> <form> <fieldset> <legend>User Login</legend> <div class="form-group"> <label for="">User</label> <input type="email" class="form-control" placeholder="this is email input"> </div> <div class="form-group"> <label for="">Pass</label> <input type="password" class="form-control" placeholder="this is for password"> </div> <div class="checkbox"> <label for=""> <input type="checkbox">ABC</input> </label> </div> <button type="submit" class="btn btn-default">Login</button> </fieldset> </form> <p class="btn-primary">内联表单</p> <form class="form-inline"> <div class="form-group"> <label for="">User</label> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="this is for user"> </div> <div class="checkbox"> <label for="chk2"> <input id="chk2" type="checkbox">Remember Pass</label> </div> <button type="submit" class="btn btn-default">Login</button> </form> <p class="btn-primary">横向表单</p> <form action="" class="form-horizontal" role="form"> <div class="form-group"> <label for="account" class="col-sm-2 control-label">UserName</label> <div class="col-sm-10"> <input type="email" class="form-control" id="account" placeholder="account place holder"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label for="chk"> <input id="chk" type="checkbox">remember me</label> </div> </div> </div> </form> <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script> <script type="text/javascript" src="dist/js/bootstrap.js"></script> </body> </html>