Question

我现在在我的项目中使用固定引导程序3页脚，但我想让它可扩展？

这是我的页脚代码

 <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>

但是想要像这样，插件

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

只有一个可扩展的，而不是几个像这样可能吗？

Answer 1

如果你想要达到this result，你所要做的就是做下面的事情（full code here）：

首先，您需要使用bootstrap accordion并将其固定为底部。在此之后，您必须将其设置为类似于示例中的样式。我用这个css代码做了所有这些：

#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 accordion html代码如下所示：

<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中使用手风琴事件，如下所示：

$('#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，如果您想优化代码，请查看this问题。

无论如何，你在jsfiddle中有完整的代码here。

Answer 2

尝试使用已经在bootstrap中的组件

http://jsfiddle.net/apA53/

可能不是最好的，因为我是新手并在15分钟内做到了这一点。

<div class="row">
        <div class="col-md-12 header">
            <h1>MyTUT+</h1>
        </div>
        <div class="container">
            <br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br>
                        <br><br><br><br><br><br>
                            <br><br><br><br><br>
        <div id="sliding-foot" class="col-md-12 footer">
            <a data-toggle="collapse" data-parent="#sliding-foot" href="#collapseOne"> <h3> click me </h3></a>
        </div>
         <div id="collapseOne" class="collapse">
             <p>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.</p>
        </div>
    </div>

在Bootstrap 3中制作可扩展的固定页脚？

2 个答案: