在Bootstrap 3中制作可扩展的固定页脚? [英] Making expandable fixed footer in Bootstrap 3?

问题描述

我现在在项目中使用固定的bootstrap 3页脚，但是我想使其可扩展?

I am now using fixed bootstrap 3 footer in my project, but i want to make it expandable?

这是我的页脚代码

 <footer class="container-fluid" role="contentinfo">
     <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="navbar-inner navbar-content-center">
            <p class="text-muted credit">Example courtesy </p>
        </div>
    </nav>
</footer>

但是要使它像这样，插件

But want make it like this, plugin

http://source.tutsplus.com/webdesign/tutorials/024_expanding-footer/footer/index.html

只有一个可扩展，没有几个像这样可以扩展吗?

Only one expandable, not several like is this is that possible?

推荐答案

如果要实现完整代码):

If you want to achieve this result all you have to do is to do the folowing (full code here):

首先，您需要使用 bootstrap手风琴并将其固定在底部.之后，您必须按照示例中的样式进行样式设置.我使用此CSS代码完成了所有这些操作:

First you need to use bootstrap accordion and set it fixed to bottom. After this you must style it like the one from your example. I did all of this with this css code:

#accordion {
    position: fixed;
    bottom: 0;
    width: 100%;    
}

.panel-default > .panel-heading{
    background: #00B4FF;
}

.panel-heading {
    padding: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.panel-group .panel {
    border-radius: 0;
}

.panel-title a {
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    display: block;
    padding: 10px 15px;
    font-size: 24px;
    font-family: Helvetica,Arial,sans-serif;
    outline: none;
}

.panel-title a:hover, .panel-title a:focus, .panel-title a:active {
    text-decoration: none;
    outline: none;
} 

bootstrap手风琴html代码如下:

The bootstrap accordion html code looks like this:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Click Me
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci, quibusdam, minima ratione voluptas quidem porro sint nobis odio cupiditate alias nisi. Magnam et fugiat labore eum at adipisci ex.
            </div>
        </div>
    </div>
</div>

如果要实现背景颜色更改效果，则应在javascript中使用手风琴事件，如下所示:

And if you want to achieve the background color change effect, you should use the accordion events in javascript like this:

$('#collapseOne').on('show.bs.collapse', function () {    
    $('.panel-heading').animate({
        backgroundColor: "#515151"
    }, 500);   
})

$('#collapseOne').on('hide.bs.collapse', function () {    
    $('.panel-heading').animate({
        backgroundColor: "#00B4FF"
    }, 500);   
})

您需要为此背景颜色更改加载Jquery UI，如果要优化代码，请查看

You will need to load Jquery UI for this background color change and in case you want to optimize your code take a look at this question.

无论如何，您在jsfiddle中有完整的代码此处.

Anyways, you have the full code here in jsfiddle.

这篇关于在Bootstrap 3中制作可扩展的固定页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！