使用BootStrap建立响应式网页――通栏轮播图（carousel）

1、bootstrap提供了js插件――轮播图

　　我们还是照旧，直接拿过来用，需要改的地方再说。

2、修改

　　小屏幕看小图，大屏图看大图：这个可以利用自定义属性（data-XXX）data-img-lg（保存大图）和data-img-xs（保存小图）属性保存图片的路径，利用jQuery的data函数取出data-xxxx属性进行动态加载。

　　图片居中显示：大图用背景图片来做比较好一点，小图用img来做比较好一点（因为小图的话需要等比例缩放，用背景图做不到等比例缩放）。

　　承载轮播图的盒子高度：大图的的时候用图片的高度，小图自适应，所以要用到媒体查询，设置容器高度。

3、代码

        
        

          

          

          

          

        
        
        

          

          
          

          
          

          
          

          
        
        
        
          
          Previous
        
        
          
          Next
        
    

以上所述是小编给大家介绍的使用BootStrap建立响应式网页――通栏轮播图（carousel），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！