Bootstrap 常用属性

一，关于按钮

btn系列

 

二、栅格系统原理 ， 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>

　　

 

三、居中系列

1、文本居中

text-center

2、图片居中

center-block

 

转载于:https://www.cnblogs.com/python-ERIC/p/10460351.html