<div class="container">
<form action="#" method="post">
<fieldset>
<legend>用戶登陸</legend>
<div class="form-group">
<label>用戶名:</label>
<input type="text" class="form-control" name="name" placeholder="用戶名">
</div>
<div class="form-group">
<label>密碼:</label>
<input type="password" class="form-control" name="pwd" placeholder="密碼">
<!--form-control代表的是佔滿容器-->
</div>
<div class="checkbox">
<label><input type="checkbox">記住密碼</label>
</div>
<!--多選框必須這麼寫 不然會造成選框與文本重疊的問題-->
<div class="form-group">
<button type="submit" class="btn btn-default">提交</button>
</div>
</fieldset>
</form>
</div>
inline表單與label隱藏
<div class="container">
<form action="#" method="post" class="form-inline">
<!--form-inline讓表單橫向放置-->
<fieldset>
<legend>用戶登陸</legend>
<div class="form-group">
<label class="sr-only">用戶名:</label>
<!--sr-only讓label隱藏-->
<input type="text" class="form-control" name="name" placeholder="用戶名">
</div>
<div class="form-group">
<label>密碼:</label>
<input type="password" class="form-control" name="pwd" placeholder="密碼">
<!--form-control代表的是佔滿容器-->
</div>
<div class="checkbox">
<label><input type="checkbox">記住密碼</label>
</div>
<!--多選框必須這麼寫 不然會造成選框與文本重疊的問題-->
<div class="form-group">
<button type="submit" class="btn btn-default">提交</button>
</div>
</fieldset>
</form>
</div>
把label和input放在同一行內的方法
<div class="container">
<form action="#" method="post" class="form-horizontal">
<!--form-horizontal讓表單初始化-->
<fieldset>
<legend>用戶登陸</legend>
<div class="form-group">
<label class="col-xs-3 control-label">用戶名:</label>
<!--藉助柵格系統設置label的寬度-->
<div class="col-xs-9">
<input type="text" class="form-control" name="name" placeholder="用戶名">
</div>
<!--用div設置柵格幷包裹input-->
</div>
</form>
</div>
<!--注意!把label和input放在同一行在768分辨率一下是有問題的 在md和lg上正常-->
小圖標的添加
<div class="container">
<form action="#" method="post" class="form-horizontal">
<!--form-horizontal讓表單初始化-->
<fieldset>
<legend>用戶登陸</legend>
<div class="form-group has-feedback has-success">
<!--在項目的div外包圍class加has-feedback-->
<label class="col-xs-3 control-label">用戶名:</label>
<div class="col-xs-9">
<input type="text" class="form-control" name="name" placeholder="用戶名">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<!--在input之下添加一個span 記得加form-c-f-->
</div>
</div>
</form>
</div>
一堆按鈕組件
<div class="container">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-success"><span class="glyphicon glyphicon-star"></span></button>
<button class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button>
<button class="btn btn-danger"><span class="glyphicon glyphicon-star"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-star"></span></button>
</div>
</div>
</div>
不要強行去做一個按鈕分離 因爲這是一組 中間的按鈕不是圓角的
搜索框
<div class="col-md-4 col-md-offset-2">
<div class="input-group input-lg">
<div class="input-group-addon">
<a href=""><span class="glyphicon glyphicon-star"></span></a>
</div>
<input type="text" class="form-control input-xs">
</div>
</div>
</div>