製作bootstrap 3固定頁腳，並提供滑動內容？

我想在Bootstrap 3中製作固定頁腳，但點擊圖標，我想要其他div，並添加不透明度到內容主體。這可以通過固定類輕鬆添加，但是如何爲內容添加不透明度並添加該向上滑動元素。製作bootstrap 3固定頁腳，並提供滑動內容？

的問題是，我不知道如何該元素內線大個子的內容將是，有時它會是長期的內容時小，這是小問題..

這是什麼screenshoot我需要做

enter image description here

現在，當有人點擊ACTION我需要這個

enter image description here

可這通過自舉JS來完成，還是需要一些自定義的JS和CSS

這裏，如果類似的解決方案，但只是在小屏幕上

http://www.bootply.com/103653

這裏我有什麼，現在，但我有問題增加不透明度爲內容的CLIK行動

CSS

#accordion { 
    position: fixed; 
    bottom: 30px; 
    border-radius:none !important; 
    padding-left:0px; 
    padding-right:0px; 
    z-index:1030; 
} 
.opacity{ 
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); 
    height: 100%; 
    left: 0; 
    position: fixed; 
    text-align: center; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
}

HTML

<div class="opacity"></div> 
<div class="panel-group col-md-12 col-sm-12 col-xs-12" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading clearfix"> 
    <h4 class="panel-title text-center"><a class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> ACTION </a> <br> 
<a class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> ACTION2 </a></h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse"> 


HERE GOES THE CONTENT 

</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије. 

</div> 
</div> 
</div> 

<footer class="container-fluid" role="contentinfo"> 
    <nav class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="navbar-inner navbar-content-center"> Copyright </div> 
    </nav> 
</footer>

這裏是小提琴完整的例子

http://jsfiddle.net/k4xt4g40/ \

我買了不透明的問題，怎麼加時崩潰visble當不刪除？

得到了這樣的事情

http://jsfiddle.net/k4xt4g40/2/

唯一的問題是，它必須保持顯示塊被點擊另一個動作是什麼時候？

來源

2014-08-29 Miomir Dancevic

您可以使用引導程序的風格化和自定義jQuery腳本來實現禁用頁面和菜單擴展功能。

檢查出這個小提琴Navbar

導航欄自動關閉becos你在底部導航欄使用的CSS類名稱的錯誤，

重命名像下面的按鈕

data-target=".navbar-collapse" to data-target=".navbar-collapse-bottom"

和

<div class="navbar-collapse-bottom collapse">

希望這個解決您的問題

來源

2014-08-29 08:29:42 Sidharth

好:)如果我知道如何:( – 2014-08-29 08:30:20

檢查出這個小提琴[導航]（http://www.bootply.com/KEaBb7Hapj）。 – Sidharth 2014-08-29 09:40:57

這是錯誤的小提琴抱歉，這是正確的[navbar] – Sidharth 2014-08-29 09:48:20

製作bootstrap 3固定頁腳，並提供滑動內容？

回答

相關問題