首頁 >web前端 >Bootstrap教程 >bootstrap表單怎麼居中
bootstrap表單怎麼居中
- (*-*)浩原創
- 2019-07-19 11:08:2313416瀏覽
Bootstrap透過一些簡單的 HTML 標籤和擴充的類別即可建立出不同樣式的表單。
Bootstrap提供了多種表單佈局，不過我們最常用的就是表單居中，也叫水平表單。
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。 （推薦學習：Bootstrap影片教學）
如需建立一個水平佈局的表單，請按下面的幾個步驟進行：
為父
把標籤和控制項放在一個有 class .form-group 的 為標籤新增 class .control-label。 實例： 更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！ 以上是bootstrap表單怎麼居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 水平表单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</body>
</html>