该页面中主要用到的有
1. 全局 CSS 样式 – 栅格系统
2. 全局 CSS 样式 – 按钮
3. 全局 CSS 样式 – 辅助类
4. 组件 – 按钮式下拉菜单
5. 组件 – 导航条
6. 组件 – 分页
7. 组件 – 媒体对象
8. JavaScript 插件 – 标签页
9. JavaScript 插件 – Carousel(轮播图)
1. 顶部Logo 和 Login 部分
使用栅格系统,将Logo 和 Login分为两列,Login 部分内容右对齐即可,没有太多可说的。
2. 顶部导航 搜索栏部分
a. 首先用栅格系统布局,导航部分pc端时占7份,移动端时占2份;搜索栏pc端时占5份,移动端时占10份(而搜索栏又分为3列,下拉按钮列、搜索框列、文字列,分别占4份、5份、3份)。
b. 导航部分使用导航条组件(详细介绍见Bootstrap API – 组件 – 导航条),导航条组件移动端时导航隐藏,显示出三条横线图标,点击该按钮导航将会相应的显示或隐藏。自适应导航HTML代码见下
c. 搜索栏左侧使用按钮式下拉菜单(详细介绍见Bootstrap API – 组件 – 按钮式下拉菜单)。按钮式下拉菜单HTML代码见下
自适应导航HTML代码:
<div class="hd_navbtn col-md-7 col-xs-2">
<button type="button" class="navbar-toggle collapsed si si-list fa-2x" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"></button>
<div class="hd_navbox collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="hd_navlist">
<li><a class="on" href="index.html">HOME</a></li>
<li><a href="proinfo.html">CHEMICAL</a></li>
<li><a href="chemists.html">CHEMISTS</a></li>
<li><a href="qa.html">Q&A</a></li>
<li><a href="user.html">USER CENTER</a></li>
</ul>
</div>
</div>
按钮式下拉菜单HTML代码:
<div class="col-xs-4 col-sm-offset-3 col-sm-3 col-md-offset-0 col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> please select <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Chemical</a></li>
<li><a href="#">Chemists</a></li>
<li><a href="#">Reference</a></li>
</ul>
</div>
</div>
3. Banner 轮播图部分
Banner轮播图使用carousel.js插件(详细介绍见Bootstrap API – JavaScript 插件 – Carousel),移动端时设置为隐藏。Bootstrap中的carousel插件是左右轮播的效果,但是我们要实现的是渐变的效果,所以通过修改css来修改轮播效果。Banner轮播图渐变效果CSS代码见下
Banner轮播图渐变效果CSS代码:
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-inner > .item{
height: 180px;
background: url(../images/banner01.jpg) no-repeat center center;
}
.carousel-inner > .item:nth-child(2){
background-image: url(../images/banner02.jpg);
}
.carousel-inner > .item:nth-child(3){
background-image: url(../images/banner03.jpg);
}
.carousel-inner > .item:nth-child(4){
background-image: url(../images/banner04.jpg);
}
js代码调用:
$('.carousel').carousel({
interval: 3000
});
4. 内容部分左侧
① ② 使用标签页(详细介绍见Bootstrap API – JavaScript 插件 – 标签页),为标签页按钮部分。
③ ④ 部分为标签页切换时展示相应的内容区域。
② 移动端时,通过 css position 属性结合 js去改变这部分的展示状态,为点击下拉显示或隐藏。③ 移动端时,设置该区域为高度固定,内容过多时左右滑动展示。④ pc端时,鼠标移上大图展示;移动端时,支持手指左右滑动切换展示的内容,使用jquery.touchSwipe.js插件完成。
5. 内容部分右侧
① pc端时上下滚动展示,左右也可切换显示,移动端时隐藏。
② 移动端时通过 css position: fixed; 设置固定在底部,内容可以左右滑动展示。左右滑动CSS代码见下
左右滑动CSS代码:
.subtopicbox{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
height: 65px;
border-top: 1px solid #dbdbdb;
background-color: #fff;
padding: 5px 10px 10px;
}
.subtopicbox .subtopiccont {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
6. 底部
使用栅格系统,pc端时分两列;移动端时分两行展示。