互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 互联网知识 >

查看其它板块

bootstrap响应式设计visible-sm、hidden-xs等的使用

作者：狐灵科技 | 2019-07-30 22:31 |点击：

启用响应式特性

通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。



    
	
  1. 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    2. 
	
  2. 
		<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    3. 




	注意！ Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。



	关于响应式Bootstrap

Responsive devices


	Media queries允许在一些条件基础上自定义CSS 例如：—ratios、widths、display type, etc— 但通常都是围绕着 min-width 和 max-width 这两者。


    
	
  • 
		修改栅格系统中列的宽度
    • 
	
  • 
		需要的时候, 用堆叠元素代替浮动
    • 
	
  • 
		调整标题和文本的大小以便适合各种设备
    • 




	谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。



	被支持的设备



	Bootstrap 所支持的几个media queries都放在了一个文件中， 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括：



	
		

			
				类型
			
				布局宽度
			
				列宽
			
				间隙宽度
		

	
	
		

			
				大屏幕
			
				大于等于1200px
			
				70px
			
				30px
		

		

			
				默认
			
				大于等于980px
			
				60px
			
				20px
		

		

			
				平板
			
				大于等于768px
			
				42px
			
				20px
		

		

			
				手机到平板
			
				小于等于767px
			
				流式列，无固定宽度
		

		

			
				手机
			
				小于等于480px
			
				流式列，无固定宽度
		

	





    
	
  1. 
		/* 大屏幕 */
    2. 
	
  2. 
		@media (min-width: 1200px) { ... }
    3. 
	
  3. 
		 
    4. 
	
  4. 
		/* 平板电脑和小屏电脑之间的分辨率 */
    5. 
	
  5. 
		@media (min-width: 768px) and (max-width: 979px) { ... }
    6. 
	
  6. 
		 
    7. 
	
  7. 
		/* 横向放置的手机和竖向放置的平板之间的分辨率 */
    8. 
	
  8. 
		@media (max-width: 767px) { ... }
    9. 
	
  9. 
		 
    10. 
	
  10. 
		/* 横向放置的手机及分辨率更小的设备 */
    11. 
	
  11. 
		@media (max-width: 480px) { ... }
    12. 




	响应式布局辅助class



	为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。



	
		

			
				Class
			
				手机767px 及以下
			
				平板979px 到 768px
			
				电脑默认
		

	
	
		

			
				.visible-phone
			
				显示
			
			
		

		

			
				.visible-tablet
			
			
				显示
			
		

		

			
				.visible-desktop
			
			
			
				显示
		

		

			
				.hidden-phone
			
			
				显示
			
				显示
		

		

			
				.hidden-tablet
			
				显示
			
			
				显示
		

		

			
				.hidden-desktop
			
				显示
			
				显示
			
		

	




	何时使用



	在有限的情况下使用, 避免创建同一个站点的不同版本。当这些class能对每种设备的展示做有益的补充的时候才使用。响应式工具不能用于table元素，而且本就不支持。



	响应式工具测试案例



	调整浏览器的宽度或者在不同的设备上加载该页面用以测试上述的class。



	在...上显示



	绿色选中标记用以指示这些class在你当前的可视窗口是可见的。


    
	
  • 
		手机
    • 
	
  • 
		平板
    • 
	
  • 
		电脑✔ 电脑
    • 




	在...上隐藏



	这里的绿色选中标记用以指示这些class在你当前的可视窗口是隐藏的。


    
	
  • 
		手机✔ 手机
    • 
	
  • 
		平板✔ 平板
    • 
	
  • 
		电脑
    • 



	  
	  

  
 
如没特殊注明，文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/hulianwang/546.html
     


	相关推荐
	



      
      

        返回首页
		
        	了解更多建站资讯
		
      

    


    

      

        
        
—— 微信公众号 ——

        

          
        

      

      

        
热门标签

        
      

      

        

          
上一篇———————

         网站写响应式好还是手机和PC端分开来写好？ 
        

        

          
下一篇———————

        type=＂submit＂默认文字是提交修改成其他 
        

      

    

  









    

    

      
多一份免费策划方案，总有益处。

      

        
        
请直接添加技术总监微信联系咨询

      

      

        立即询问
        技术总监在线
        15523356218
      

    

  

	
      




        

            

                

                    网站设计
                    品牌营销
                

                

                    
多一份参考，总有益处

                    
联系狐灵科技，免费获得专属《策划方案》及报价

                    

                        
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                        
业务热线：023-68168040 / 大客户专线：15523356218
                        

                    

                

            

            

                在线咨询
                在线咨询
                提交需求
            

        

    

	
		

        

            

                

                    

                        
关于狐灵科技
                        
                        +
                    
  
                    

                    
狐灵致力于互联网品牌建设与网络营销，专业领域包括  网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！								
                    
 
                

                

                    

                        
我们的优势

                    

                    

                        

                       
量身打造个性化网站制作


代码深度符合SEO优化


一站式企业网站建设服务


前沿视觉设计、研发能力


重庆网站建设公司

                       

                        

                       
多项网站设计传播大奖


营销型网站建设专家


自主研发网站管理系统


B2C电商网站建设供应商


完善的售后服务体系
         
                       
     
                    

                

                

                    

                        
我们的不同

                      +
                    

                    

                 在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！
				   

                

            

            

                

                    友情链接
                    交换友情链接
                    交换友情链接
                    展开
                

                

                    

					

                    

                

            

        

        

            

                

                    公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：023-68168040 
                

                

                     Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有
 | 渝ICP备19005721号-1
                

                

                    专业团队为您提供
                    
                    重庆网页设计,
                    品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！
                     | TAG标签					
                    | 网站建设地图
                    | 网站地图
					

			   

            

        

        

            
                业务咨询
            
            
                业务咨询
            
            
                业务热线
                023-68168040
            
            
                提交需求
                
            
            
                官方微信
                
                    狐灵网络科技官方微信