如何使引导模式从屏幕滑出？

我想使用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

如何使引导模式从屏幕滑出？

回答

相关问题