twitter bootstrap - framework - ¿Haciendo un pie de página fijo expandible en Bootstrap 3?

glyphicon bootstrap 3

Question

Ahora estoy usando bootstrap fijo de 3 pies en mi proyecto, pero quiero hacerlo expandible.

Aquí está mi código para el pie de página

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

Pero quiero que sea así, complemento

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

Solo uno expandible, no varios como este ¿es eso posible?

Answer 1

Prueba esto, hecho usando componentes que ya están dentro de bootstrap

http://jsfiddle.net/apA53/

puede que no sea lo mejor porque soy un novato e hice esto en menos de 15 minutos.

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

Answer 2

Si quiere lograr este resultado, todo lo que tiene que hacer es hacer lo siguiente ( código completo aquí ):

Primero debe usar el acordeón de arranque y configurarlo en la parte inferior. Después de esto debes diseñarlo como el de tu ejemplo. Hice todo esto con este código 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;
} 

El código bootstrap accordion html se ve así:

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

Y si desea lograr el efecto de cambio de color de fondo, debe usar los eventos de acordeón en javascript de esta manera:

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

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

Deberá cargar Jquery UI para este cambio de color de fondo y, en caso de que desee optimizar su código, eche un vistazo a esta pregunta.

De todos modos, tienes el código completo aquí en jsfiddle.