栅格化-下【响应式仿制花瓣网】
投稿于 被查看 21491 次 评论：76
栅格化-下【响应式仿制花瓣网】
放假好几天，一直不爱动，今天简单写了写，把栅格化的下完结了，也算是去掉了任务列表里的一项。
这里是用花瓣网首页的上半部分来做例子，遇到了一个棘手的问题就是栅格化响应式对尺寸的控制很不准确，而且原图中最后的大家都在看板块的内容是七项，而12列的栅格化并不能够平均分，目前这个问题还不知道怎么解决，先传上效果和代码，希望大家批评指正。
引用网址（花瓣网）：http://huaban.com/
bootstrap响应式仿制花瓣网的上半部分
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap响应式仿制花瓣网的上半部分</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style type="text/css">
/*头部导航*/
/*重置BS部分，（这里写的时候没加命名空间，不推荐）*/
.navbar{
margin-bottom: 0;
min-height: 48px;
height: 48px;
}
.navbar-default{
border:0;
background: transparent;
}
.navbar-brand{
height: 48px;
padding: 12px 12px 8px 15px;
line-height: 0;
}
.navbar-left{
padding-top: 10px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgba(255,255,255,.85);
background-color: transparent;
border-bottom: solid 1px #FFF;
}
.navbar .container-fluid{
position: relative;
padding: 0;
margin: 0 50px;
}
@media(max-width:480px){
.navbar .container-fluid{
position: relative;
padding: 0;
margin: 0 15px;
}
}
.nav > li > a{
padding: 0;
margin: 0 13px;
}
.navbar-nav > li > a {
line-height: 28px;
}
.navbar-default .navbar-nav > li > a{
color: rgba(255,255,255,.85);
border-bottom: solid 1px transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
color: rgba(255,255,255,.85);
border-bottom: solid 1px #FFF;
}
.navbar-right > li > a{
float:left;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
background-color: rgba(0,0,0,.35);
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #FFF;
}
.btns{
float: right;
margin-top: 8px;
}
.btn{
margin-left: 8px;
border-radius: 2px;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active{
outline: 0 none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-danger{
color: #fff;
background-color: rgba(201,0,0,.6);
border-color:transparent;
}
.btn-danger:hover,
.btn-danger:focus{
background-color: rgba(201,0,0,.8);
border-color:transparent;
}
.btn-default{
border-color: rgba(255,255,255,0.8);
background: 0 none;
color: #FFF;
}
.btn-default:hover,
.btn-default:focus{
background: #FFF;
color: #000;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
}
}
/*重置BS部分end*/
.em_new{
margin:-5px 0 0 5px;
}
/*头部导航 end*/
/*banner部分*/
.banner{
width:100%;
height: 500px;
background: url(http://hbfile.b0.upaiyun.com/img/home/banner/4776a0defde1c459a2126650f9a382d4f9ec370829ece) 0 0 no-repeat;
background-size: auto 100%;
}
/*重置bs*/
.jumbotron{
background: 0 none;
text-align: center;
}
.row{
margin: 0 20px;
}
.form-control {
background-color: transparent;
border: 0 none;
border-right: 0px;
color:rgba(255,255,255,0.75);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition:none;
-o-transition: none;
transition: none;
box-sizing: border-box;
}
.form-control:focus {
border-color: rgba(255,255,255,0.75);
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner .row .btn-default{
border:0 none;
background-color: transparent;
border-left: 0px;
box-sizing: border-box;
}
.banner .jumbotron h1{
margin: 60px 0 40px;
}
.search_btn,
.search_btn:hover,
.search_btn:focus{
width:40px;
height: 34px;
background: url(http://huaban.com/img/new_index/icon_search.svg) 9px 6px no-repeat;
}
.search_list{
height: 16px;
line-height: 20px;
/*overflow: hidden;*/
color: #FFF;
text-align: center;
}
.search_list > li{
list-style: none;
margin: 0 5px;
display: inline-block;
}
.search_list > li > a{
display: inline-block;
color: #FFF;
}
/*重置bs end*/
.bsize_margin2{
padding: 0 20px;
}
.search_area{
border: 1px solid rgba(255,255,255,0.75);
background-color: rgba(0,0,0,0.15);
border-radius: 2px;
}
.search_area:hover{
border: 1px solid rgba(255,255,255,1);
background-color: rgba(0,0,0,0.35);
}
.every_look{
position: relative;
text-align: center;
font-size:16px;
margin: 18px 0;
color:#999;
}
.every_look:before{
content: '';
position: absolute;
left: 10px;
top:50%;
width:calc(50% - 80px);
height: 1px;
background-color: #EDEDED;
}
.every_look:after{
content: '';
position: absolute;
right: 10px;
top:50%;
width:calc(50% - 80px);
height: 1px;
background-color: #EDEDED;
}
.look_list .row .row_con{
height: 70px;
line-height: 70px;
border-radius: 5px;
text-align: center;
color: #FFF;
font-size: 36px;
margin-bottom: 10px;
background:#1B6D85;
}
/*banner end*/
</style>
</head>
<body>
<!--默认导航条开始-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:;">
<img src="http://huaban.com/img/logo_wt.svg" alt="white_logo" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="javascript:;">发现</a></li>
<li><a href="javascript:;">最新</a></li>
<li><a href="javascript:;">美思<img class="em_new" src="http://huaban.com/img/muse/em-new.svg" alt="new" /></a></li>
<a href="#" class="more" data-toggle="dropdown">
<span class="dropdown_icon"></span>
</a>
</ul>
<div class="navbar btns">
<button type="button" class="btn btn-danger">注册</button>
<button type="button" class="btn btn-default">登录</button>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--默认导航条结束-->
<!--banner开始-->
<div class="banner">
<div class="jumbotron">
<h1>
<div class="row bsize_margin2">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<img src="http://huaban.com/img/new_index/head_title.svg" style="width:100%;" alt="花瓣" />
</div>
</div>
</h1>
<p>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="input-group search_area">
<input type="text" class="form-control" placeholder="搜索你喜欢的">
<span class="input-group-btn">
<button class="btn btn-default search_btn" type="button"></button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</p>
<p>
<div class="row">
<ul class="search_list col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<li>热门搜索：</li>
<li><a href="javascript:;">匠人匠心</a></li>
<li><a href="javascript:;">朋友圈配图</a></li>
<li><a href="javascript:;">公共空间设计</a></li>
<li><a href="javascript:;">原创插画</a></li>
</ul>
</div>
</p>
</div>
</div>
<!--banner结束-->
<div class="every_look">大家都在关注</div>
<div class="container-fluid look_list">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">1</div></div>
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">2</div></div>
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">3</div></div>
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">4</div></div>
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">5</div></div>
<div class="col-md-2 col-sm-4 col-xs-6"><div class="row_con">6</div></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
window.onload = function(){
//点击展开按钮的时候，背景变色
var oCollapseBtn1 = document.querySelector('button[data-target="#bs-example-navbar-collapse-1"]');
var oCollapse1 = document.querySelector('#bs-example-navbar-collapse-1');
oCollapseBtn1.addEventListener('click',function(){
if(this.getAttribute('aria-expended') === true || this.getAttribute('aria-expended') ===null){
oCollapse1.style.backgroundColor = '#122B40';
}else{
oCollapse1.style.backgroundColor = 'transparent';
}
})
//尺寸改变的时候，背景变回来
window.onresize = function(){
if(oCollapseBtn1.getAttribute('aria-expended') === false || oCollapseBtn1.getAttribute('aria-expended') ===null){
oCollapse1.style.backgroundColor = 'transparent';
}
}
};
</script>
</body>
</html>
tips:为了效果预览中能看到效果，引用的CDN和网络图片地址，响应式效果可以打开效果预览的全屏之后，再拖动窗口或使用chrome模拟器。
用户评论