在Bootstrap 3中製作可展開的固定頁腳？

我現在在我的項目中使用固定引導程序3頁腳，但是我想使其可擴展？在Bootstrap 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

只有一個可擴展的，沒有幾個喜歡的是這是可能的嗎？

來源

2014-05-16 Schneider

如果你想實現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; 
}

的引導手風琴的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 q題目了。

反正你在jsfiddle中有完整的代碼here。

來源

2014-05-16 20:39:13 paulalexandru

試試這個，使用已有內部引導部件

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>

來源

2014-05-16 18:21:36

在Bootstrap 3中製作可展開的固定頁腳？

回答

相關問題