使用栅格系统开发响应式页面

响应式布局的原理：使用媒体查询设置断点

栅格系统 grid.css

/*解决嵌套时的padding:0 15px*/.row{margin:0 -15px;}/*xs*/.container{width:100%;margin:0 auto;/*水平居中*/padding:0 15px;/*解决不嵌套时的margin:0 -15px;*/}/*sm*/@media (min-width:576px){.container{width:540px;}}/*md*/@media (min-width:768px){.container{width:720px;}}/*lg*/@media (min-width:992px){.container{width:960px;}}/*xl*/@media (min-width:1200px){.container{width:1140px;}}/*xs*/.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left;}.col-1{width:8.3333%;}.col-2{width:16.6667%;}.col-3{width:25%;}.col-4{width:33.3333%;}.col-5{width:41.6667%;}.col-6{width:50%;}.col-7{width:58.3333%;}.col-8{width:66.6667%;}.col-9{width:75%;}.col-10{width:83.3333%;}.col-11{width:91.6667%;}.col-12{width:100%;}.col-offt-0{margin-left:0;}.col-offt-1{margin-left:8.3333%;}.col-offt-2{margin-left:16.6667%;}.col-offt-3{margin-left:25%;}.col-offt-4{margin-left:33.3333%;}.col-offt-5{margin-left:41.6667%;}.col-offt-6{margin-left:50%;}.col-offt-7{margin-left:58.3333%;}.col-offt-8{margin-left:66.6667%;}.col-offt-9{margin-left:75%;}.col-offt-10{margin-left:83.3333%;}.col-offt-11{margin-left:91.6667%;}.col-offt-12{margin-left:100%;}.col-push-0{left:auto;}.col-push-1{left:8.3333%;}.col-push-2{left:16.6667%;}.col-push-3{left:25%;}.col-push-4{left:33.3333%;}.col-push-5{left:41.6667%;}.col-push-6{left:50%;}.col-push-7{left:58.3333%;}.col-push-8{left:66.6667%;}.col-push-9{left:75%;}.col-push-10{left:83.3333%;}.col-push-11{left:91.6667%;}.col-push-12{left:100%;}.col-pull-0{right:auto;}.col-pull-1{right:8.3333%;}.col-pull-2{right:16.6667%;}.col-pull-3{right:25%;}.col-pull-4{right:33.3333%;}.col-pull-5{right:41.6667%;}.col-pull-6{right:50%;}.col-pull-7{right:58.3333%;}.col-pull-8{right:66.6667%;}.col-pull-9{right:75%;}.col-pull-10{right:83.3333%;}.col-pull-11{right:91.6667%;}.col-pull-12{right:100%;}/*sm*/@media (min-width:576px){.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left;}.col-sm-1{width:8.3333%;}.col-sm-2{width:16.6667%;}.col-sm-3{width:25%;}.col-sm-4{width:33.3333%;}.col-sm-5{width:41.6667%;}.col-sm-6{width:50%;}.col-sm-7{width:58.3333%;}.col-sm-8{width:66.6667%;}.col-sm-9{width:75%;}.col-sm-10{width:83.3333%;}.col-sm-11{width:91.6667%;}.col-sm-12{width:100%;}.col-sm-offt-0{margin-left:0;}.col-sm-offt-1{margin-left:8.3333%;}.col-sm-offt-2{margin-left:16.6667%;}.col-sm-offt-3{margin-left:25%;}.col-sm-offt-4{margin-left:33.3333%;}.col-sm-offt-5{margin-left:41.6667%;}.col-sm-offt-6{margin-left:50%;}.col-sm-offt-7{margin-left:58.3333%;}.col-sm-offt-8{margin-left:66.6667%;}.col-sm-offt-9{margin-left:75%;}.col-sm-offt-10{margin-left:83.3333%;}.col-sm-offt-11{margin-left:91.6667%;}.col-sm-offt-12{margin-left:100%;}.col-sm-push-0{left:auto;}.col-sm-push-1{left:8.3333%;}.col-sm-push-2{left:16.6667%;}.col-sm-push-3{left:25%;}.col-sm-push-4{left:33.3333%;}.col-sm-push-5{left:41.6667%;}.col-sm-push-6{left:50%;}.col-sm-push-7{left:58.3333%;}.col-sm-push-8{left:66.6667%;}.col-sm-push-9{left:75%;}.col-sm-push-10{left:83.3333%;}.col-sm-push-11{left:91.6667%;}.col-sm-push-12{left:100%;}.col-sm-pull-0{right:auto;}.col-sm-pull-1{right:8.3333%;}.col-sm-pull-2{right:16.6667%;}.col-sm-pull-3{right:25%;}.col-sm-pull-4{right:33.3333%;}.col-sm-pull-5{right:41.6667%;}.col-sm-pull-6{right:50%;}.col-sm-pull-7{right:58.3333%;}.col-sm-pull-8{right:66.6667%;}.col-sm-pull-9{right:75%;}.col-sm-pull-10{right:83.3333%;}.col-sm-pull-11{right:91.6667%;}.col-sm-pull-12{right:100%;}}/*md*/@media (min-width:768px){.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:left;}.col-md-1{width:8.3333%;}.col-md-2{width:16.6667%;}.col-md-3{width:25%;}.col-md-4{width:33.3333%;}.col-md-5{width:41.6667%;}.col-md-6{width:50%;}.col-md-7{width:58.3333%;}.col-md-8{width:66.6667%;}.col-md-9{width:75%;}.col-md-10{width:83.3333%;}.col-md-11{width:91.6667%;}.col-md-12{width:100%;}.col-md-offt-0{margin-left:0;}.col-md-offt-1{margin-left:8.3333%;}.col-md-offt-2{margin-left:16.6667%;}.col-md-offt-3{margin-left:25%;}.col-md-offt-4{margin-left:33.3333%;}.col-md-offt-5{margin-left:41.6667%;}.col-md-offt-6{margin-left:50%;}.col-md-offt-7{margin-left:58.3333%;}.col-md-offt-8{margin-left:66.6667%;}.col-md-offt-9{margin-left:75%;}.col-md-offt-10{margin-left:83.3333%;}.col-md-offt-11{margin-left:91.6667%;}.col-md-offt-12{margin-left:100%;}.col-md-push-0{left:auto;}.col-md-push-1{left:8.3333%;}.col-md-push-2{left:16.6667%;}.col-md-push-3{left:25%;}.col-md-push-4{left:33.3333%;}.col-md-push-5{left:41.6667%;}.col-md-push-6{left:50%;}.col-md-push-7{left:58.3333%;}.col-md-push-8{left:66.6667%;}.col-md-push-9{left:75%;}.col-md-push-10{left:83.3333%;}.col-md-push-11{left:91.6667%;}.col-md-push-12{left:100%;}.col-md-pull-0{right:auto;}.col-md-pull-1{right:8.3333%;}.col-md-pull-2{right:16.6667%;}.col-md-pull-3{right:25%;}.col-md-pull-4{right:33.3333%;}.col-md-pull-5{right:41.6667%;}.col-md-pull-6{right:50%;}.col-md-pull-7{right:58.3333%;}.col-md-pull-8{right:66.6667%;}.col-md-pull-9{right:75%;}.col-md-pull-10{right:83.3333%;}.col-md-pull-11{right:91.6667%;}.col-md-pull-12{right:100%;}}/*lg*/@media (min-width:992px){.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left;}.col-lg-1{width:8.3333%;}.col-lg-2{width:16.6667%;}.col-lg-3{width:25%;}.col-lg-4{width:33.3333%;}.col-lg-5{width:41.6667%;}.col-lg-6{width:50%;}.col-lg-7{width:58.3333%;}.col-lg-8{width:66.6667%;}.col-lg-9{width:75%;}.col-lg-10{width:83.3333%;}.col-lg-11{width:91.6667%;}.col-lg-12{width:100%;}.col-lg-offt-0{margin-left:0;}.col-lg-offt-1{margin-left:8.3333%;}.col-lg-offt-2{margin-left:16.6667%;}.col-lg-offt-3{margin-left:25%;}.col-lg-offt-4{margin-left:33.3333%;}.col-lg-offt-5{margin-left:41.6667%;}.col-lg-offt-6{margin-left:50%;}.col-lg-offt-7{margin-left:58.3333%;}.col-lg-offt-8{margin-left:66.6667%;}.col-lg-offt-9{margin-left:75%;}.col-lg-offt-10{margin-left:83.3333%;}.col-lg-offt-11{margin-left:91.6667%;}.col-lg-offt-12{margin-left:100%;}.col-lg-push-0{left:auto;}.col-lg-push-1{left:8.3333%;}.col-lg-push-2{left:16.6667%;}.col-lg-push-3{left:25%;}.col-lg-push-4{left:33.3333%;}.col-lg-push-5{left:41.6667%;}.col-lg-push-6{left:50%;}.col-lg-push-7{left:58.3333%;}.col-lg-push-8{left:66.6667%;}.col-lg-push-9{left:75%;}.col-lg-push-10{left:83.3333%;}.col-lg-push-11{left:91.6667%;}.col-lg-push-12{left:100%;}.col-lg-pull-0{right:auto;}.col-lg-pull-1{right:8.3333%;}.col-lg-pull-2{right:16.6667%;}.col-lg-pull-3{right:25%;}.col-lg-pull-4{right:33.3333%;}.col-lg-pull-5{right:41.6667%;}.col-lg-pull-6{right:50%;}.col-lg-pull-7{right:58.3333%;}.col-lg-pull-8{right:66.6667%;}.col-lg-pull-9{right:75%;}.col-lg-pull-10{right:83.3333%;}.col-lg-pull-11{right:91.6667%;}.col-lg-pull-12{right:100%;}}/*xl*/@media (min-width:1200px){.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{float:left;}.col-xl-1{width:8.3333%;}.col-xl-2{width:16.6667%;}.col-xl-3{width:25%;}.col-xl-4{width:33.3333%;}.col-xl-5{width:41.6667%;}.col-xl-6{width:50%;}.col-xl-7{width:58.3333%;}.col-xl-8{width:66.6667%;}.col-xl-9{width:75%;}.col-xl-10{width:83.3333%;}.col-xl-11{width:91.6667%;}.col-xl-12{width:100%;}.col-xl-offt-0{margin-left:0;}.col-xl-offt-1{margin-left:8.3333%;}.col-xl-offt-2{margin-left:16.6667%;}.col-xl-offt-3{margin-left:25%;}.col-xl-offt-4{margin-left:33.3333%;}.col-xl-offt-5{margin-left:41.6667%;}.col-xl-offt-6{margin-left:50%;}.col-xl-offt-7{margin-left:58.3333%;}.col-xl-offt-8{margin-left:66.6667%;}.col-xl-offt-9{margin-left:75%;}.col-xl-offt-10{margin-left:83.3333%;}.col-xl-offt-11{margin-left:91.6667%;}.col-xl-offt-12{margin-left:100%;}.col-xl-push-0{left:auto;}.col-xl-push-1{left:8.3333%;}.col-xl-push-2{left:16.6667%;}.col-xl-push-3{left:25%;}.col-xl-push-4{left:33.3333%;}.col-xl-push-5{left:41.6667%;}.col-xl-push-6{left:50%;}.col-xl-push-7{left:58.3333%;}.col-xl-push-8{left:66.6667%;}.col-xl-push-9{left:75%;}.col-xl-push-10{left:83.3333%;}.col-xl-push-11{left:91.6667%;}.col-xl-push-12{left:100%;}.col-xl-pull-0{right:auto;}.col-xl-pull-1{right:8.3333%;}.col-xl-pull-2{right:16.6667%;}.col-xl-pull-3{right:25%;}.col-xl-pull-4{right:33.3333%;}.col-xl-pull-5{right:41.6667%;}.col-xl-pull-6{right:50%;}.col-xl-pull-7{right:58.3333%;}.col-xl-pull-8{right:66.6667%;}.col-xl-pull-9{right:75%;}.col-xl-pull-10{right:83.3333%;}.col-xl-pull-11{right:91.6667%;}.col-xl-pull-12{right:100%;}}/*xs*/.d-none{display: none !important;}.d-block{display: block !important;}/*sm*/@media (min-width:576px){.d-sm-none{display: none !important;}.d-sm-block{display: block !important;}}/*md*/@media (min-width:768px){.d-md-none{display: none !important;}.d-md-block{display: block !important;}}/*lg*/@media (min-width:992px){.d-lg-none{display: none !important;}.d-lg-block{display: block !important;}}/*xl*/@media (min-width:1200px){.d-xl-none{display: none !important;}.d-xl-block{display: block !important;}}/*清浮动*/.clearfix:before,.clearfix:after,.container:before,.container:after,.row:before,.row:after{display: table;content:" ";}.clearfix:after,.container:after,.row:after{clear:both;}/*统一设置内边距*/.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding:0 15px;position: relative;}

使用栅格系统开发响应式页面

index.html

<!doctype html><html lang="en"><head><meta chart="utf-8"><meta name="viewport" content="width=device-width,in清明节日记itial-scale=1,ur-scalable=no,maximum-scale=1,minimum-scale=1"><title>grid</title><link rel="stylesheet" href="font/iconfont.css"><link rel="stylesheet" href="ba.css"><link rel="stylesheet" href="grid.css"><link rel="stylesheet" href="index.css"></head><body><header class="header-container"><div class="container"><div class="row"><div class="header-logo-container col-8 col-md-3"><a href="#" class="header-logo"><img src="img/logo.svg"></a></div><div class="header-btn-container col-4 d-md-non三个儿子ppte"><!-- button一定要加type，否则不同浏览器给的值不同 --><button type="button" class="btn-toggle" id="btn-toggle"><span class="btn-toggle-bar"></span><span class="btn-toggle-bar"></span><span class="btn-toggle-bar"></span></button></div><div class="header-nav-container col-md-9 d-none d-md-block"><ul class="header-nav"><li class="header-nav-item"><a href="#" class="header-nav-link">手机&amp;平板</a></li><li class="header-nav-item"><a href="#" class="header-nav-link">电视&amp;影音</a></li><li class="header-nav-item"><a href="#" class="header-nav-link">生活家电</a></li><li class="header-nav-item"><a href="#" class="header-nav-link">电脑/办公/储存</a></li><li class="header-nav-item"><a href="#" class="header-nav-link">网上商城</a></li></ul></div></div></div></header><nav class="nav-container d-md-none" id="nav"><ul class="container"><li><a href="#" class="nav-link">手机&amp;平板</greatfula></li><li><a href="#" class="nav-link">电视&amp;影音</a></li></a></li><li><a href="#" class="nav-link">生活家电</a></li><li><a href="#" class="nav-link">电脑/办公/储存</a></li><li><a href="#" class="nav-link">网上商城</a></li></ul></nav><div class="slider-container"><div class="container"><div class="row"><div class="slider-text-container col-md-5 col-md-push-7"><h3 class="slider-title">galaxy s9 | s9+</h3><h4 class="slider-subtitle">冰蓝 焕新上市</h4><div class="slider-btns"><a href="#" class="btn-rounded">了解更多</a><a href="#" class="btn-rounded">立即购买</a></div></div><div class="col-md-7 col-md-pull-5"><img src="img/1.png"></div></div></div></div><script>var nav=document.getelementbyid("nav");var navextendedclassname="nav-container-extended";document.getelementbyid("btn-toggle").onclick=function(){if(nav.classlist.contains(navextendedclassname)){nav.classlist.remove(navextendedclassname);}el{nav.classlist.add(navextendedclassname);}}</script></body></html>

ba.css

*{margin:0;padding:0;box-sizing:border-box;}body{font-size:14px;}ul{list-style: none;}img{width:100%;border:none;/*ie浏览器会加边框*/vertical-align: top;/*解决图片与边框之间的间距*/}a{text-decoration: none;font-size:14px;color:#363636;}a:hover{color:#1428a0;}

grid.css

/*解决嵌套时的padding:0 15px*/.row{margin:0 -15px;}/*xs*/.container{width:100%;margin:0 auto;/*水平居中*/padding:0 15px;/*解决不嵌套时的margin:0 -15px;*/}/*sm*/@media (min-width:576px){.container{width:540px;}}/*md*/@media (min-width:768px){.container{width:720px;}}/*lg*/@media (min-width:992px){.container{width:960px;}}/*xl*/@media (min-width:1200px){qq中心登陆.container{width:1140px;}}/*xs*/.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left;}.col-1{width:8.3333%;}.col-2{width:16.6667%;}.col-3{width:25%;}.col-4{width:33.3333%;}.col-5{width:41.6667%;}.col-6{width:50%;}.col-7{width:58.3333%;}.col-8{width:66.6667%;}.col-9{width:75%;}.col-10{width:83.3333%;}.col-11{width:91.6667%;}.col-12{width:100%;}.col-offt-0{margin-left:0;}.col-offt-1{margin-left:8.3333%;}.col-offt-2{margin-left:16.6667%;}.col-offt-3{margin-left:25%;}.col-offt-4{margin-left:33.3333%;}.col-offt-5{margin-left:41.6667%;}.col-offt-6{margin-left:50%;}.col-offt-7{margin-left:58.3333%;}.col-offt-8{margin-left:66.6667%;}.col-offt-9{margin-left:75%;}.col-offt-10{margin-left:83.3333%;}.col-offt-11{margin-left:91.6667%;}.col-offt-12{margin-left:100%;}.col-push-0{left:auto;}.col-push-1{left:8.3333%;}.col-push-2{left:16.6667%;}.col-push-3{left:25%;}.col-push-4{left:33.3333%;}.col-push-5{left:41.6667%;}.col-push-6{left:50%;}.col-push-7{left:58.3333%;}.col-push-8{left:66.6667%;}.col-push-9{left:75%;}.col-push-10{left:83.3333%;}.col-push-11{left:91.6667%;}.col-push-12{left:100%;}.col-pull-0{right:auto;}.col-pull-1{right:8.3333%;}.col-pull-2{right:16.6667%;}.col-pull-3{right:25%;}.col-pull-4{right:33.3333%;}.col-pull-5{right:41.6667%;}.col-pull-6{right:50%;}.col-pull-7{right:58.3333%;}.col-pull-8{right:66.6667%;}.col-pull-9{right:75%;}.col-pull-10{right:83.3333%;}.col-pull-11{right:91.6667%;}.col-pull-12{right:100%;}/*sm*/@media (min-width:576px){.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left;}.col-sm-1{width:8.3333%;}.col-sm-2{width:16.6667%;}.col-sm-3{width:25%;}.col-sm-4{width:33.3333%;}.col-sm-5{width:41.6667%;}.col-sm-6{width:50%;}.col-sm-7{width:58.3333%;}.col-sm-8{width:66.6667%;}.col-sm-9{width:75%;}.col-sm-10{width:83.3333%;}.col-sm-11{width:91.6667%;}.col-sm-12{width:100%;}.col-sm-offt-0{margin-left:0;}.col-sm-offt-1{margin-left:8.3333%;}.col-sm-offt-2{margin-left:16.6667%;}.col-sm-offt-3{margin-left:25%;}.col-sm-offt-4{margin-left:33.3333%;}.col-sm-offt-5{margin-left:41.6667%;}.col-sm-offt-6{margin-left:50%;}.col-sm-offt-7{margin-left:58.3333%;}.col-sm-offt-8{margin-left:66.6667%;}.col-sm-offt-9{margin-left:75%;}.col-sm-offt-10{margin-left:83.3333%;}.col-sm-offt-11{margin-left:91.6667%;}.col-sm-offt-12{margin-left:100%;}.col-sm-push-0{left:auto;}.col-sm-push-1{left:8.3333%;}.col-sm-push-2{left:16.6667%;}.col-sm-push-3{left:25%;}.col-sm-push-4{left:33.3333%;}.col-sm-push-5{left:41.6667%;}.col-sm-push-6{left:50%;}.col-sm-push-7{left:58.3333%;}.col-sm-push-8{left:66.6667%;}.col-sm-push-9{left:75%;}.col-sm-push-10{left:83.3333%;}.col-sm-push-11{left:91.6667%;}.col-sm-push-12{left:100%;}.col-sm-pull-0{right:auto;}.col-sm-pull-1{right:8.3333%;}.col-sm-pull-2{right:16.6667%;}.col-sm-pull-3{right:25%;}.col-sm-pull-4{right:33.3333%;}.col-sm-pull-5{right:41.6667%;}.col-sm-pull-6{right:50%;}.col-sm-pull-7{right:58.3333%;}.col-sm-pull-8{right:66.6667%;}.col-sm-pull-9{right:75%;}.col-sm-pull-10{right:83.3333%;}.col-sm-pull-11{right:91.6667%;}.col-sm-pull-12{right:100%;}}/*md*/@media (min-width:768px){.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:left;}.col-md-1{width:8.3333%;}.col-md-2{width:16.6667%;}.col-md-3{width:25%;}.col-md-4{width:33.3333%;}.col-md-5{width:41.6667%;}.col-md-6{width:50%;}.col-md-7{width:58.3333%;}.col-md-8{width:66.6667%;}.col-md-9{width:75%;}.col-md-10{width:83.3333%;}.col-md-11{width:91.6667%;}.col-md-12{width:100%;}.col-md-offt-0{margin-left:0;}.col-md-offt-1{margin-left:8.3333%;}.col-md-offt-2{margin-left:16.6667%;}.col-md-offt-3{margin-left:25%;}.col-md-offt-4{margin-left:33.3333%;}.col-md-offt-5{margin-left:41.6667%;}.col-md-offt-6{margin-left:50%;}.col-md-offt-7{margin-left:58.3333%;}.col-md-offt-8{margin-left:66.6667%;}.col-md-offt-9{margin-left:75%;}.col-md-offt-10{margin-left:83.3333%;}.col-md-offt-11{margin-left:91.6667%;}.col-md-offt-12{margin-left:100%;}.col-md-push-0{left:auto;}.col-md-push-1{left:8.3333%;}.col-md-push-2{left:16.6667%;}.col-md-push-3{left:25%;}.col-md-push-4{left:33.3333%;}.col-md-push-5{left:41.6667%;}.col-md-push-6{left:50%;}.col-md-push-7{left:58.3333%;}.col-md-push-8{left:66.6667%;}.col-md-push-9{left:75%;}.col-md-push-10{left:83.3333%;}.col-md-push-11{left:91.6667%;}.col-md-push-12{left:100%;}.col-md-pull-0{right:auto;}.col-md-pull-1{right:8.3333%;}.col-md-pull-2{right:16.6667%;}.col-md-pull-3{right:25%;}.col-md-pull-4{right:33.3333%;}.col-md-pull-5{right:41.6667%;}.col-md-pull-6{right:50%;}.col-md-pull-7{right:58.3333%;}.col-md-pull-8{right:66.6667%;}.col-md-pull-9{right:75%;}.col-md-pull-10{right:83.3333%;}.col-md-pull-11{right:91.6667%;}.col-md-pull-12{right:100%;}}/*lg*/@media (min-width:992px){.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left;}.col-lg-1{width:8.3333%;}.col-lg-2{width:16.6667%;}.col-lg-3{width:25%;}.col-lg-4{width:33.3333%;}.col-lg-5{width:41.6667%;}.col-lg-6{width:50%;}.col-lg-7{width:58.3333%;}.col-lg-8{width:66.6667%;}.col-lg-9{width:75%;}.col-lg-10{width:83.3333%;}.col-lg-11{width:91.6667%;}.col-lg-12{width:100%;}.col-lg-offt-0{margin-left:0;}.col-lg-offt-1{margin-left:8.3333%;}.col-lg-offt-2{margin-left:16.6667%;}.col-lg-offt-3{margin-left:25%;}.col-lg-offt-4{margin-left:33.3333%;}.col-lg-offt-5{margin-left:41.6667%;}.col-lg-offt-6{margin-left:50%;}.col-lg-offt-7{margin-left:58.3333%;}.col-lg-offt-8{margin-left:66.6667%;}.col-lg-offt-9{margin-left:75%;}.col-lg-offt-10{margin-left:83.3333%;}.col-lg-offt-11{margin-left:91.6667%;}.col-lg-offt-12{margin-left:100%;}.col-lg-push-0{left:auto;}.col-lg-push-1{left:8.3333%;}.col-lg-push-2{left:16.6667%;}.col-lg-push-3{left:25%;}.col-lg-push-4{left:33.3333%;}.col-lg-push-5{left:41.6667%;}.col-lg-push-6{left:50%;}.col-lg-push-7{left:58.3333%;}.col-lg-push-8{left:66.6667%;}.col-lg-push-9{left:75%;}.col-lg-push-10{left:83.3333%;}.col-lg-push-11{left:91.6667%;}.col-lg-push-12{left:100%;}.col-lg-pull-0{right:auto;}.col-lg-pull-1{right:8.3333%;}.col-lg-pull-2{right:16.6667%;}.col-lg-pull-3{right:25%;}.col-lg-pull-4{right:33.3333%;}.col-lg-pull-5{right:41.6667%;}.col-lg-pull-6{right:50%;}.col-lg-pull-7{right:58.3333%;}.col-lg-pull-8{right:66.6667%;}.col-lg-pull-9{right:75%;}.col-lg-pull-10{right:83.3333%;}.col-lg-pull-11{right:91.6667%;}.col-lg-pull-12{right:100%;}}/*xl*/@media (min-width:1200px){.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{float:left;}.col-xl-1{width:8.3333%;}.col-xl-2{width:16.6667%;}.col-xl-3{width:25%;}.col-xl-4{width:33.3333%;}.col-xl-5{width:41.6667%;}.col-xl-6{width:50%;}.col-xl-7{width:58.3333%;}.col-xl-8{width:66.6667%;}.col-xl-9{width:75%;}.col-xl-10{width:83.3333%;}.col-xl-11{width:91.6667%;}.col-xl-12{width:100%;}.col-xl-offt-0{margin-left:0;}.col-xl-offt-1{margin-left:8.3333%;}.col-xl-offt-2{margin-left:16.6667%;}.col-xl-offt-3{margin-left:25%;}.col-xl-offt-4{margin-left:33.3333%;}.col-xl-offt-5{margin-left:41.6667%;}.col-xl-offt-6{margin-left:50%;}.col-xl-offt-7{margin-left:58.3333%;}.col-xl-offt-8{margin-left:66.6667%;}.col-xl-offt-9{margin-left:75%;}.col-xl-offt-10{margin-left:83.3333%;}.col-xl-offt-11{margin-left:91.6667%;}.col-xl-offt-12{margin-left:100%;}.col-xl-push-0{left:auto;}.col-xl-push-1{left:8.3333%;}.col-xl-push-2{left:16.6667%;}.col-xl-push-3{left:25%;}.col-xl-push-4{left:33.3333%;}.col-xl-push-5{left:41.6667%;}.col-xl-push-6{left:50%;}.col-xl-push-7{left:58.3333%;}.col-xl-push-8{left:66.6667%;}.col-xl-push-9{left:75%;}.col-xl-push-10{left:83.3333%;}.col-xl-push-11{left:91.6667%;}.col-xl-push-12{left:100%;}.col-xl-pull-0{right:auto;}.col-xl-pull-1{right:8.3333%;}.col-xl-pull-2{right:16.6667%;}.col-xl-pull-3{right:25%;}.col-xl-pull-4{right:33.3333%;}.col-xl-pull-5{right:41.6667%;}.col-xl-pull-6{right:50%;}.col-xl-pull-7{right:58.3333%;}.col-xl-pull-8{right:66.6667%;}.col-xl-pull-9{right:75%;}.col-xl-pull-10{right:83.3333%;}.col-xl-pull-11{right:91.6667%;}.col-xl-pull-12{right:100%;}}/*xs*/.d-none{display: none !important;}.d-block{display: block !important;}/*sm*/@media (min-width:576px){.d-sm-none{display: none !important;}.d-sm-block{display: block !important;}}/*md*/@media (min-width:768px){.d-md-none{display: none !important;}.d-md-block{display: block !important;}}/*lg*/@media (min-width:992px){.d-lg-none{display: none !important;}.d-lg-block{display: block !important;}}/*xl*/@media (min-width:1200px){.d-xl-none{display: none !important;}.d-xl-block{display: block !important;}}/*清浮动*/.clearfix:before,.clearfix:after,.container:before,.container:after,.row:before,.row:after{display: table;content:" ";}.clearfix:after,.container:after,.row:after{clear:both;}/*统一设置内边距*/.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{padding:0 15px;position: relative;}

index.css

/*布局*//*header*/.header-container{background:#fff;border-bottom:1px solid #dadada;}.header-logo-container,.header-btn-container,.header-nav-container{height:64px;}.header-btn-container{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;/*有浏览器兼容前缀，已省略。上线使用记得补全*/justify-content:flex-end;/*水平右对齐*/align-items:center/*;垂直居中*/}/*nav*/.nav-container{overflow:hidden;height:0;border-bottom:1px solid #dadada;transition:height .5s;/*需要补全兼容性写法*/position: relative;top:-1px;/*解决不展开时多出的1px底边*/}/*js中最好不要修改样式，而是通过控制类来改变*/.nav-container-extended{height:201px;/*40*5+1*/top:0;}/*slider*/.slider-container{margin:20px 0;}.slider-container .row{background:#f5f5f5;margin:0;}@media (min-width:768px){.slider-container .row{display: flex;align-items:center;}}.slider-text-container{padding:20px;}/*组件*//*btn-toggle*/.btn-toggle{padding:10px;background:transparent;border:none;border-radius:4px;cursor:pointer;}.btn-toggle:hover{background:#f9f9f9;}.btn-toggle-bar{display: block;width:24px;height:4px;background:#363636;border-radius:2px;}/*实现第一个条没有上间距*/.btn-toggle-bar+.btn-toggle-bar{margin-top:4px;}.btn-toggle:hover .btn-toggle-bar{background:#1428a0;}/*btn-rounded*/.btn-考研辅导机构rounded{display:inline-block;padding:10px 30px;border:1px solid #000;color:#000;background:transparent;border-radius:30px;font-size:16px;font-weight:bold;transition:all .3s;}.btn-rounded:hover{color:#fff;background:#000;}/*内容*//*header*/.header-logo{width:136px;height:100%;display: flex;align-items:center;}.header-nav,.header-nav-item,.header-nav-link{height:100%;}.header-nav{display: flex;justify-content:flex-end;font-size:14px;}.header-nav-item{margin-left:24px;}.header-nav-item:first-child{margin-left:0;}.header-nav-link{display: flex;align-items:center;font-weight:bold;}/*nav*/.nav-link{display: block;height:40px;line-height:40px;font-weight:bold;}/*slider*/.slider-title,.slider-subtitle,.slider-btns{text-align:center;margin-bottom:20px;}.slider-title{font-size:30px;}.slider-subtitle{font-size:20px;font-weight:bold;}.slider-container .btn-rounded{margin-right:10px;margin-bottom:10px;}.slider-container .btn-rounded:last-child{margin-right:0;}

移动端

pc端