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.