Making expandable fixed footer in Bootstrap 3?

问题:

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

Here is my code for footer

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

回答1:

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

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

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>

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

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.

Anyways, you have the full code here in jsfiddle.

回答2:

Try this, made using components that are already inside bootstrap

http://jsfiddle.net/apA53/

may not be best because I am a newbie and made this under 15 min.

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