HTML-基於bootstrap的面板panels和表單的form-control

    <div class="panel panel-primary">   //面板組件用於將DOM組件插入到一個盒子中
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
               //向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" ;基本表單結構
                <input type="text" class="form-control" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add">

            <label>
                搜索名字關鍵字：
                <input type="text" class="form-control" v-model="keywords">
            </label>
        </div>
    </div>


1、使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來設置帶語境色彩的面板，如

　　<div class="panel panel-primary"></div>
2、面板基本樣式

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
    <div class="panel-footer">面板腳注</div>
</div>

3、常見的表單元素：文本框、文本域、下拉菜單、單選框、復選框、按鈕等

4、表單控件加上類form-control后，效果為：

• 寬度為100%

• 設置邊框為淺灰色

• 控件具有4px的圓角

• 設置陰影效果，元素得到焦點時，陰影和邊框效果會發生變化

• 設置placeholder的顏色為#999

5、如果在input之前增加一個label標簽，會導致input換行顯示，如果必須添加這樣一個label標簽，且不想讓input換行，就需要將label標簽也放在容器.form-group中。實現聯表單效果只需在form元素中添加類名.form-inline即可，實現原理：將表單控件設置成內聯塊元素（display：inline-block），讓表單控件在一行顯示。