对于bootstrap的个人理解

来源:互联网 发布:看股票用什么软件 知乎 编辑:程序博客网 时间:2024/04/28 10:53

bootstrap。是响应式的开发利器,他也是每个前端都会用到的


对于bootstrap,作为一个小白的我而言,他能很快的加快我的开发速度,因为其内部封装的col-样式很是不错,对于一个插件,最好的方式自然是去官网查看,自己去用他,所以我就不对说,直接写下我的个人感觉

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../lib/bootstrap.css" />
        <script type="text/javascript" src="../lib/bootstrap.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <style>
            div div {
                box-sizing: border-box;
                text-align: center;
                vertical-align: middle;
                background: yellow;
                /*小写*/
                /*text-transform:lowercase;*/
                /*开头大写*/
                /*text-transform: capitalize;*/
                /*大写*/
                /*text-transform: uppercase;*/
                text-align-last: justify;
            }
        </style>
    </head>

    <body>
        <!--外层需要使用row来包起来,col为直系子类-->
        <!--  ==========  等分,总共为12等分-->
        <!--  = col-xs-:是在屏幕的大小小于768px的时候起用                                =  -->
        <!--  = col-sm-:是在屏幕的大小大于768px但是小于992px的时候起用 =  -->
        <!--  = col-md-:是在屏幕的大小大于992px小于1200px的时候起用      =  -->
        <!--  = col-lg-:是在屏幕的大小大于1200px的时候起用                             =  -->
        <!--  = 当然,注意px是需要设置缩放比的                       =  -->
        <!--  ==========  -->
        <!--<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-sm-4">这个是这个是这个是这个是这个是这个是.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="clearfix visible-xs-block"></div>
        </div>-->
        <!--  ==========等分,总共为12等分  -->
        <!--  = 相同的,col-md-offset也是有不同的使用范围的 =  -->
        <!--  = col-xs-offset-:是在屏幕的大小小于768px的时候起用                                =  -->
        <!--  = col-sm-offset-:是在屏幕的大小大于768px但是小于992px的时候起用 =  -->
        <!--  = col-md-offset-:是在屏幕的大小大于992px小于1200px的时候起用      =  -->
        <!--  = col-lg-offset-:是在屏幕的大小大于1200px的时候起用                             =  -->
        <!--  = 当然,注意px是需要设置缩放比的                       =  -->
        <!--  ==========  -->
        <!--<div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>-->
        <!--  ==========  -->
        <!--  = 所加不得超过12 =  -->
        <!--  ==========  -->
        <!--<div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row">
                    <div class="col-xs-8 col-sm-6">
                        Level 2: .col-xs-8 .col-sm-6
                    </div>
                    <div class="col-xs-4 col-sm-6">
                        Level 2: .col-xs-4 .col-sm-6
                    </div>
                </div>
            </div>
        </div>-->
        <!--  ==========  -->
        <!--  = col-md-push是设置左边开始x/12 =  -->
        <!--  = sm,md,lg什么的,我就不说了 =  -->
        <!--  = col-md-pull是设置右边开始的 =  -->
        <!--  ==========  -->
        <!--<div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-8">.col-md-3 .col-md-pull-9</div>
        </div>-->
        <!--  ==========  -->
        <!--  = 输入框组 =  -->
        <!--  ==========  -->
        <!--<div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
        </div>-->
        <!--图片的最大为父容器的大小,就这么简单-->
        <!--<img src="../img/back_top.png" class="img-responsive" />-->
        <script>
        </script>
    </body>

</html>

我比较喜欢用它的响应式,js插件倒是。。。。。。

原创粉丝点击