bootstrap简单使用

起步

导入：

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

屏幕适配

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

响应式布局

.wrapper {
    height: 60px;
    background-color: yellow;
}
/*if (dw<600) {}*/
@media (max-width: 600px)  {
    .wrapper {
        width: auto;
    }
}
​
/*if (dw>900) {}*/
@media (min-width: 900px)  {
    .wrapper {
        width: 850px;
    }
}
/*if (dw>600 and dw < 900) {}*/
@media (min-width: 600px) and (max-width: 900px)  {
    .wrapper {
        width: 600px;
    }
}
​
/*if (dw>1000) {}*/
@media (min-width: 1000px)  {
    .wrapper {
        width: 990px;
    }
}
/*if (dw>1200) {}*/
@media (min-width: 1200px)  {
    .wrapper {
        width: 1200px;
    }
}

栅格系统

'''
bs将父级等分12等分提供给子级使用
​
父级默认用padding: 15px, 用.row的margin: -15px来抵消
​
四个屏幕尺寸:
.col-xs- .col-sm- .col-md- .col-lg-
偏移
.col-xs-offset- .col-sm-offset- .col-md-offset- .col-lg-offset-
'''

swiper

<link rel="stylesheet" href="swiper/swiper.css">
​
<body>
    <!--swiper的轮播图结构,可以取官网案例复制-->
    <div class="swiper-container">
        ...
    </div>
</body>
​
<script src="swiper/swiper.js"></script>
<script>
    // 一定要声明Swiper对象
    new Swiper('.swiper-container', {
        // 所需参数key:value
    });
</script>
 
posted @ 2019-02-09 15:33  zhao_peng  阅读(160)  评论(0)  编辑  收藏  举报