如何使引導模式從屏幕滑出？

我想使用Twitter Bootstrap重新制作這個網頁（bobabear.com）。我已經完成了大部分工作，但我無法弄清楚如何使用模態內聯並向左或向右滑動，因爲點擊了不同的標題鏈接。我是Bootstrap的新手，我正試圖進一步發展我的技能，所以任何幫助都是超讚賞的。如何使引導模式從屏幕滑出？

我的CSS是這樣的：

<style type="text/css"> 
@import url('http://fonts.googleapis.com/css?family=Niconne'); 
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300); 
@media only screen and (min-width : 768px) { 
/* Make Navigation Toggle on Desktop Hover */ 
    .dropdown:hover .dropdown-menu { 
    display: block; 
} 
} 

body { 
    padding-top: 3em; 
    background-image: url("http://i1074.photobucket.com/albums/w408/5b45cbba/Unknown_zpsuqd7guy6.jpeg"); 
    background-color: #86cccd; 
} 

ul.dropdown-menu{ 
    background-color: #86cccd; 
} 

.navbar { 
    background-color: #86cccd; 
    font-size: .8em; 
    border-color: #86cccd; 
    color: #ffffff !important; 
    padding-top: 3em; 
    padding-bottom: 3em; 
} 

.navbar a { 
    color: white !important; 
} 

.dropdown-menu { 
    border-color: #86cccd; 
    border-radius: 0px; 
} 

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    color: #86cccd; 
    text-decoration: none; 
    background-color: #86cccd; /*change color of links in drop down here*/ 
} 

.panel-footer { 
    background-color: #86cccd; 
    border-color: #86cccd; 
} 

.footer-align { 
    text-align: center; 
    color: white; 
} 
.navbar a { 
    color: white !important; 
} 

.modal-content{ 
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0); 
     -moz-box-shadow: 0 5px 15px rgba(0,0,0,0); 
     -0-box-shadow: 0 5px 15px rgba(0,0,0,0); 
    box-shadow: 0 5px 15px rgba(0,0,0,0); 
} 
</style>

我的模式是這樣的：

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"> 
<div class="modal-dialog custom-class"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 
</div> 
</div>

我的話，我就把這塊JS的底部，使模態負荷沒有影子。

我想要做的是使用莫代爾滑入和滑出視口，因爲不同的導航欄項目被點擊。萬分感謝任何和所有幫助窺視。

來源

2015-11-21 IzzyD

您可以使用類似於cycle.js或bxslider的滑塊/旋轉木馬來設置它。它們各自使用無序列表作爲尋呼機。您可以使用它來創建導航菜單。

來源

2015-11-21 16:31:01

如何使引導模式從屏幕滑出？

回答

相關問題