Bootstrap 响应式项目分享一

心系少时言等一不归人

网页链接地址：http://chem960.vicp.cc:9128

该页面中主要用到的有
1. 全局 CSS 样式 -- 栅格系统
2. 全局 CSS 样式 -- 按钮
3. 全局 CSS 样式 -- 辅助类
4. 组件 -- 按钮式下拉菜单
5. 组件 -- 导航条
6. 组件 -- 分页
7. 组件 -- 媒体对象
8. JavaScript 插件 -- 标签页
9. JavaScript 插件 -- Carousel（轮播图）

1. 顶部Logo 和 Login 部分

pc端顶部Logo 和 Login 部分

移动端顶部Logo 和 Login 部分

使用栅格系统，将Logo 和 Login分为两列，Login 部分内容右对齐即可，没有太多可说的。

2. 顶部导航搜索栏部分

pc端顶部导航搜索栏部分

移动端顶部导航搜索栏部分

a. 首先用栅格系统布局，导航部分pc端时占7份，移动端时占2份；搜索栏pc端时占5份，移动端时占10份（而搜索栏又分为3列，下拉按钮列、搜索框列、文字列，分别占4份、5份、3份）。
b. 导航部分使用导航条组件（详细介绍见Bootstrap API -- 组件 -- 导航条），导航条组件移动端时导航隐藏，显示出三条横线图标，点击该按钮导航将会相应的显示或隐藏。自适应导航HTML代码见下
c. 搜索栏左侧使用按钮式下拉菜单（详细介绍见Bootstrap API -- 组件 -- 按钮式下拉菜单）。按钮式下拉菜单HTML代码见下

自适应导航HTML代码：

    
    
        
            HOME
            CHEMICAL
            CHEMISTS
            Q&A
            USER CENTER

按钮式下拉菜单HTML代码：

    
        
        
            Chemical
            Chemists
            Reference

3. Banner 轮播图部分

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. 内容部分左侧

pc端内容部分左侧

移动端内容部分左侧

① ② 使用标签页（详细介绍见Bootstrap API -- JavaScript 插件 -- 标签页），为标签页按钮部分。
③ ④ 部分为标签页切换时展示相应的内容区域。
② 移动端时，通过 css position 属性结合 js去改变这部分的展示状态，为点击下拉显示或隐藏。③ 移动端时，设置该区域为高度固定，内容过多时左右滑动展示。④ pc端时，鼠标移上大图展示；移动端时，支持手指左右滑动切换展示的内容，使用jquery.touchSwipe.js插件完成。

5. 内容部分右侧

pc端内容部分右侧

移动端内容部分右侧

① 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;
}