注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

融智技术学院

融智技术学院163分站,为广大好友提供更多的帮助

 
 
 

日志

 
 

【JavaScript每日一问】怎么使用twitter boostrap 3.1.1模式?  

2014-05-19 16:36:24|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Q

我看过了很多模式的例子。但是他们只有在使用bootstrap 2CSS文件)的时候才是最完美的,当我使用bootstrap 3.1.1 CSS文件时。他不能正常显示。

  • <div class="container">
       
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
       
    <div id="example" class="modal hide fade in" style="display: none; ">
            
    <div class="modal-header">
                
    <a class="close" data-dismiss="modal">×</a>
                
    <h3>This is a Modal Heading</h3>
            
    </div>
            
    <div class="modal-body">
                
    <h4>Text in a modal</h4>
                
    <p>You can add some text here.</p>            
            
    </div>
            
    <div class="modal-footer">
                
    <a href="#" class="btn btn-success">Call to action</a>
                
    <a href="#" class="btn" data-dismiss="modal">Close</a>
            
    </div>
       
    </div>
       
    <p>
           
    <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>
       
    </p>
    </div>

译文

A:

根据Bootstrap 3文档说明(http://getbootstrap.com/javascript/#modals),你需要结构化你的HTML像这样:

这里是例子http://jsfiddle.net/jN2yU/

  • <a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>
  • <div class="modal fade">
       
    <div class="modal-dialog">
           
    <div class="modal-content">
               
    <div class="modal-header">
                
    <a class="close" data-dismiss="modal">×</a>
                
    <h3>This is a Modal Heading</h3>
            
    </div>
            
    <div class="modal-body">
                
    <h4>Text in a modal</h4>
                
    <p>You can add some text here.</p>            
            
    </div>
            
    <div class="modal-footer">
                
    <a href="#" class="btn btn-success">Call to action</a>
                
    <a href="#" class="btn" data-dismiss="modal">Close</a>
            
    </div>
           
    </div>
       
    </div>
    </div>

 
温馨提示:您的支持与理解,是我们工作最大的动力。如果您是从网上购买的图书,请在对应的网店,给予本书一个好评,我们将衷心感谢!!!
以下是
《轻松学HTML+CSS网站开发》对应的购书评论地址:
当当网http://product.dangdang.com/1196254105.html
亚马逊http://www.amazon.cn/dp/B00E1MMUR4
京东网http://item.jd.com/11283717.html

  评论这张
 
阅读(10)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018