收藏
批改狀態(tài)：未批改
老師批語：
以下代碼主要使用bootstrap中的水平表單實現(xiàn)完整的用戶登錄的界面：
<!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標簽位于一行中。
總結(jié)：
1、bootstrap中表格或者表單都是通過類樣式控制，使用表格時只需要添加table類樣式就可以了，簡潔方便，表格中常用的類樣式有 table-bordered、 table-hover、 text-center等等；
2、使用表單時，只需要添加相應的類樣式控件也能簡潔快速的控制各個標簽的樣式，而且美觀；
3、表單的默認樣式是垂直的，其他的還有
內(nèi)聯(lián)表單：就是所有的表單元素全部在同一行顯示,通常來說不需要標簽說明,必須在sm或以上屏幕才有效(> 768px)，需在form標簽中添加form-inline類樣式即可；
水平表單：就是每一個input和它的文字提示顯示在同一行，只需要在input標簽外增加的一個div，給其類樣式使他與label標簽位于一行中。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
