起步
导入：
<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>