Bootstrap 經常使用屬性

一，關於按鈕

btn系列

 

2、柵格系統原理 ， boostrp中有容器的概念，分別爲固定容器container 、container-fluid 流體容器， 二者的區別在於，一個是width屬性一個是固定長度，一個是auto ，一個柵格系統組成分爲三個部分，一個就是最外部的容器，第二部分就是row ，第三部分就是列。而後列寬佔多少列。默認狀況下，bootstrap對每一行，分爲12列，那麼咱們常常看到的col系列，好比說col-lg-5，這個意思是在大屏下，也就是width大於1200px ，這個div佔用12列中的5列。 col-md-3 ，同理，在中屏下佔3列寬，中屏是970px。 sm 是小屏小於768px，還有一個xs，主要是用來處理移動端，原理相同。同時柵格系統下面還有兩個概念一個是列排序，一個是列偏移， 對應的就是col-lg-pull-number、col-lg-push-number、 col-lg-offset-number   。這個都是基於一行12列的狀況下進行排序，偏移的。

下面是一個表單中css經常使用屬性 ，可以使每一列自適應大小和居中。 紅色部分都是組合起來使用的

<div class="container">
        <form>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
                    <h1>File a Complaint</h1>
                    <hr>
                    <div class="form-group">
                        <label for="email">Mail</label>
                        <input
                                type="text"
                                id="email"
                                class="form-control" v-model= "email">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input
                                type="password"
                                id="password"
                                class="form-control" v-model.lazy = "password">
                    </div>
                    <div class="form-group">
                        <label for="age">Age</label>
                        <input
                                type="number"
                                id="age"
                                class="form-control" v-model.number="age">
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group">
                    <label for="message">Message</label><br>
                    <!-- Interpolation between <textarea>{{ test }}</textarea> doesn't work!-->
                    <textarea
                            id="message"
                            rows="5"
                            class="form-control" v-model="message" style="white-space: pre"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <div class="form-group">
                        <label for="sendmail">
                            <input
                                    type="checkbox"
                                    id="sendmail"
                                    value="SendMail" v-model="checkboxes"> Send Mail
                        </label>
                        <label for="sendInfomail">
                            <input
                                    type="checkbox"
                                    id="sendInfomail"
                                    value="SendInfoMail" v-model="checkboxes"> Send Infomail
                        </label>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group">
                    <label for="male">
                        <input
                                type="radio"
                                id="male"
                                value="Male" v-model="gender"> Male
                    </label>
                    <label for="female">
                        <input
                                type="radio"
                                id="female"
                                value="Female" v-model="gender"> Female
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 from-group">
                    <label for="priority">Priority</label>
                    <select
                            id="priority"
                            class="form-control" v-model="select">
                        <option v-for="option in options" v-bind:selected="option == 'third'">{{option}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 from-group">
                    <label for="priority">Priority</label>
                    <select
                            id="multi"
                            class="form-control" v-model="select" multiple="true">
                        <option v-for="option in options" v-bind:selected="option == 'third'">{{option}}</option>
                    </select>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <button
                            class="btn btn-primary">Submit!
                    </button>
                </div>
            </div>
          <hr>
          <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                   <app-switch v-model="dataSwitch"></app-switch>
                </div>
            </div>
        </form>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Your Data</h4>
                    </div>
                    <div class="panel-body">
                        <p>Mail:{{email}}</p>
                        <p>Password:{{password}}</p>
                        <p>Age:{{age}}</p>
                        <p style="white-space: pre">Message:{{message}} </p>
                        <p><strong>Send Mail?</strong></p>
                        <ul>
                            <li>{{checkboxes}}</li>
                        </ul>
                        <p>Gender:{{gender}}</p>
                        <p>Priority:{{select}}</p>
                        <p>Switched:{{dataSwitch}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

　　

 

3、居中系列

一、文本居中

text-center

二、圖片居中

center-block