Bootstrap3网格系统兼容IE7

CSS Bootstrap
前端
发布日期:   2019-09-02
更新日期:   2020-08-03
文章字数:   1.9k
阅读次数:  

HTML基本结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!--[if lte IE 7]>
        <link rel="stylesheet" href="/css/despiseIE.css">
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
        <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="row f-mlrf10">
            <div class="f-wd100">
                <div class="col-xs-11 col-sm-11 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        111
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-3 col-lg-3 f-npd">
                    <div class="f-mlr10">
                        222
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-3 col-lg-3 f-npd">
                    <div class="f-mlr10">
                        333
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-3 col-lg-3 f-npd">
                    <div class="f-mlr10">
                        444
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-2 col-lg-2 f-npd">
                    <div class="f-mlr10">
                        555
                    </div>
                </div>
                <div class="col-xs-1 col-sm-3 col-md-3 col-lg-2 f-npd">
                    <div class="f-mlr10">
                        666
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        777
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        888
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        999
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        10
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 f-npd">
                    <div class="f-mlr10">
                        11
                    </div>
                </div>
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-lg-push-2 f-npd">
                    <div class="f-mlr10">
                        12
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

CSS基本结构

style.css

/*reset*/
*{touch-action: pan-y;}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin: 0; padding: 0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display: block;}
html{overflow-y: scroll;}
:root{overflow-y: auto; overflow-x: hidden;}
table{border-collapse: collapse; border-spacing: 0;}
caption,th{font-weight: normal;}
html,body,fieldset,iframe,abbr{border: 0;}
i,cite,em,var,address,dfn{font-style: normal;}
[hidefocus],summary{outline: 0;}
ul,ol,ul li,li,ol li{list-style: none;}
h1,h2,h3,h4,h5,h6,small{font-size: 100%;}
sup,sub{font-size: 83%;}
pre,code,kbd,samp{font-family: inherit;}
q:before,q:after{content: none;}
textarea{overflow: auto; resize: none;}
label,summary{cursor: default;}
a,button{cursor: pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight: bold;}
ins,u,s,a,a:hover{text-decoration: none;}
body,textarea,input,button,select,keygen,legend{font-family: "微软雅黑"; font-size: 16px; color: #454545; outline: 0;}
a{color: #3d3d3d; border: none; text-decoration: none; outline: none; hide-focus: expression(this.hideFocus=true);}
a:hover{text-decoration: none; color: #cd0000;}
a:focus{text-decoration: none; outline: 0; -moz-outline-style: none;}
img{border: 0 none; width: auto\9; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic;}
button,input,select,textarea{font-size: 100%; font-family: tahoma; margin: 0; outline: 0 none; vertical-align: baseline; _overflow: visible; *vertical-align: middle; *overflow: visible;}

/*function*/
.f-dn{display: none;}
.f-db{display: block;}
.f-fl{float: left;}
.f-fr{float: right;}
.f-pr{position: relative;}
.f-pa{position: absolute;}
.f-pf{position: fixed;}
.f-oh{overflow: hidden;}
.f-fwn{font-weight: normal;}
.f-fwb{font-weight: bold;}
.f-toe{overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis;}
.f-csp{cursor: pointer;}
.f-csd{cursor: default;}
.f-csh{cursor: help;}
.f-csm{cursor: move;}
.f-usn{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.f-clear{margin: 0; padding: 0; height: 0; overflow: hidden; visibility: hidden; content: "."; clear: both; font-size: 0; }
.f-clearfix:after{display: block; height: 0; visibility: hidden; font-size: 0; content:" "; clear: both;}
* html .f-clearfix{zoom: 1;}
*:first-child+html .f-clearfix{zoom: 1;}
.f-wd100{width: 100%;}
.f-npd{padding: 0;}
.f-mlr5{margin: 0 5px;}
.f-mlr10{margin: 0 10px;}
.f-mlr15{margin: 0 15px;}
.f-mlr20{margin: 0 20px;}
.f-mlrf5{margin: 0 -5px;}
.f-mlrf10{margin: 0 -10px;}
.f-mlrf15{margin: 0 -15px;}
.f-mlrf20{margin: 0 -20px;}
.f-plr5{padding: 0 5px;}
.f-plr10{padding: 0 10px;}
.f-plr15{padding: 0 15px;}
.f-plr20{padding: 0 20px;}

/*media query*/
/*big pcScreen*/
@media (min-width:1280px) {
    .container{padding: 0; width: 1280px;}

}
/*large pcScreen*/
@media screen and (max-width:1279px) {

}
/*medium pcScreen*/
@media screen and (max-width: 1199px) {


}
/*pad*/
@media screen and (max-width: 991px ){
    .f-md-mb10{margin-bottom: 10px;}
    .f-md-mb20{margin-bottom: 20px;}
    .f-md-ha{height: auto;}

}
/*phone*/
@media screen and (max-width: 767px) {


}
/*small*/
@media screen and (max-width: 638px) {


}

/*print*/
@media print {
    a[href]:after {
        content: none!important;
    }
}

despiseIE.css

.col-xs-1{width: 8.33%;}
.col-xs-2{width: 16.65%;}
.col-xs-3{width: 24.99%;}
.col-xs-4{width: 33.32%;}
.col-xs-5{width: 41.65%;}
.col-xs-6{width: 49.99%;}
.col-xs-7{width: 58.32%;}
.col-xs-8{width: 66.65%;}
.col-xs-9{width: 74.99%;}
.col-xs-10{width: 83.32%;}
.col-xs-11{width: 91.65%;}
.col-xs-pull-1{right: 8.33%;}
.col-xs-pull-2{right: 16.65%;}
.col-xs-pull-3{right: 24.99%;}
.col-xs-pull-4{right: 33.32%;}
.col-xs-pull-5{right: 41.65%;}
.col-xs-pull-6{right: 49.99%;}
.col-xs-pull-7{right: 58.32%;}
.col-xs-pull-8{right: 66.65%;}
.col-xs-pull-9{right: 74.99%;}
.col-xs-pull-10{right: 83.32%;}
.col-xs-pull-11{right: 91.65%;}
.col-xs-push-1{left: 8.33%;}
.col-xs-push-2{left: 16.65%;}
.col-xs-push-3{left: 24.99%;}
.col-xs-push-4{left: 33.32%;}
.col-xs-push-5{left: 41.65%;}
.col-xs-push-6{left: 49.99%;}
.col-xs-push-7{left: 58.32%;}
.col-xs-push-8{left: 66.65%;}
.col-xs-push-9{left: 74.99%;}
.col-xs-push-10{left: 83.32%;}
.col-xs-push-11{left: 91.65%;}
@media (min-width: 768px) {
    .col-sm-1{width: 8.33%;}
    .col-sm-2{width: 16.65%;}
    .col-sm-3{width: 24.99%;}
    .col-sm-4{width: 33.32%;}
    .col-sm-5{width: 41.65%;}
    .col-sm-6{width: 49.99%;}
    .col-sm-7{width: 58.32%;}
    .col-sm-8{width: 66.65%;}
    .col-sm-9{width: 74.99%;}
    .col-sm-10{width: 83.32%;}
    .col-sm-11{width: 91.65%;}
    .col-sm-pull-1{right: 8.33%;}
    .col-sm-pull-2{right: 16.65%;}
    .col-sm-pull-3{right: 24.99%;}
    .col-sm-pull-4{right: 33.32%;}
    .col-sm-pull-5{right: 41.65%;}
    .col-sm-pull-6{right: 49.99%;}
    .col-sm-pull-7{right: 58.32%;}
    .col-sm-pull-8{right: 66.65%;}
    .col-sm-pull-9{right: 74.99%;}
    .col-sm-pull-10{right: 83.32%;}
    .col-sm-pull-11{right: 91.65%;}
    .col-sm-push-1{left: 8.33%;}
    .col-sm-push-2{left: 16.65%;}
    .col-sm-push-3{left: 24.99%;}
    .col-sm-push-4{left: 33.32%;}
    .col-sm-push-5{left: 41.65%;}
    .col-sm-push-6{left: 49.99%;}
    .col-sm-push-7{left: 58.32%;}
    .col-sm-push-8{left: 66.65%;}
    .col-sm-push-9{left: 74.99%;}
    .col-sm-push-10{left: 83.32%;}
    .col-sm-push-11{left: 91.65%;}
}
@media (min-width: 992px) {
    .col-md-1{width: 8.33%;}
    .col-md-2{width: 16.65%;}
    .col-md-3{width: 24.99%;}
    .col-md-4{width: 33.32%;}
    .col-md-5{width: 41.65%;}
    .col-md-6{width: 49.99%;}
    .col-md-7{width: 58.32%;}
    .col-md-8{width: 66.65%;}
    .col-md-9{width: 74.99%;}
    .col-md-10{width: 83.32%;}
    .col-md-11{width: 91.65%;}
    .col-md-pull-1{right: 8.33%;}
    .col-md-pull-2{right: 16.65%;}
    .col-md-pull-3{right: 24.99%;}
    .col-md-pull-4{right: 33.32%;}
    .col-md-pull-5{right: 41.65%;}
    .col-md-pull-6{right: 49.99%;}
    .col-md-pull-7{right: 58.32%;}
    .col-md-pull-8{right: 66.65%;}
    .col-md-pull-9{right: 74.99%;}
    .col-md-pull-10{right: 83.32%;}
    .col-md-pull-11{right: 91.65%;}
    .col-md-push-1{left: 8.33%;}
    .col-md-push-2{left: 16.65%;}
    .col-md-push-3{left: 24.99%;}
    .col-md-push-4{left: 33.32%;}
    .col-md-push-5{left: 41.65%;}
    .col-md-push-6{left: 49.99%;}
    .col-md-push-7{left: 58.32%;}
    .col-md-push-8{left: 66.65%;}
    .col-md-push-9{left: 74.99%;}
    .col-md-push-10{left: 83.32%;}
    .col-md-push-11{left: 91.65%;}
}
@media (min-width: 1200px) {
    .col-lg-1{width: 8.33%;}
    .col-lg-2{width: 16.65%;}
    .col-lg-3{width: 24.99%;}
    .col-lg-4{width: 33.32%;}
    .col-lg-5{width: 41.65%;}
    .col-lg-6{width: 49.99%;}
    .col-lg-7{width: 58.32%;}
    .col-lg-8{width: 66.65%;}
    .col-lg-9{width: 74.99%;}
    .col-lg-10{width: 83.32%;}
    .col-lg-11{width: 91.65%;}
    .col-lg-pull-1{right: 8.33%;}
    .col-lg-pull-2{right: 16.65%;}
    .col-lg-pull-3{right: 24.99%;}
    .col-lg-pull-4{right: 33.32%;}
    .col-lg-pull-5{right: 41.65%;}
    .col-lg-pull-6{right: 49.99%;}
    .col-lg-pull-7{right: 58.32%;}
    .col-lg-pull-8{right: 66.65%;}
    .col-lg-pull-9{right: 74.99%;}
    .col-lg-pull-10{right: 83.32%;}
    .col-lg-pull-11{right: 91.65%;}
    .col-lg-push-1{left: 8.33%;}
    .col-lg-push-2{left: 16.65%;}
    .col-lg-push-3{left: 24.99%;}
    .col-lg-push-4{left: 33.32%;}
    .col-lg-push-5{left: 41.65%;}
    .col-lg-push-6{left: 49.99%;}
    .col-lg-push-7{left: 58.32%;}
    .col-lg-push-8{left: 66.65%;}
    .col-lg-push-9{left: 74.99%;}
    .col-lg-push-10{left: 83.32%;}
    .col-lg-push-11{left: 91.65%;}
}
文章作者: 技术潘
文章链接: https://blog.vipz.top/categories/frontend/6dd28e9b.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 技术潘 !
CSS Bootstrap
赏
 上一篇
CSS规范 CSS规范
网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率。
2020-07-14 前端
CSS
下一篇 
用户的创建、删除与修改 用户的创建、删除与修改
安装好MongoDB时，它为我们默认开了一个最高管理权限方便我们管理数据库，我们可以用mongo链接数据库，就是这个原理。但在实际开发中并一般不能使用这个用户，因为大家都知道和最高权限的原因，安全性和可靠性都不适合，所以要对MongoDB的用户进行管理。
2019-06-03 数据库
MongoDB
  目录