精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

互聯網知識

精準傳達 ? 價值共享

洞悉互聯網前沿資訊，探尋網站營銷規律

查看其它板塊

bootstrap響應式設計visible-sm、hidden-xs等的使用

作者：狐靈科技 | 2019-07-30 22:32 |點擊：

啟用響應式特性

通過在文檔中的 <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在你當前的可視窗口是隱藏的。


    
	
  • 
		手機? 手機
    • 
	
  • 
		平板? 平板
    • 
	
  • 
		電腦
    • 


	  
	  

  
 
如沒特殊注明，文章均為狐靈科技原創,轉載請注明?? "bootstrap響應式設計visible-sm、hidden-xs等的使用
     


	相關推薦
	



      
      
    


    
  









    

    

      
多一份免費策劃方案，總有益處。

      

        
        
請直接添加技術總監微信聯系咨詢

      

      
    

  

	
      




        

            

                

                    網站設計
                    品牌營銷
                

                

                    
多一份參考，總有益處

                    
聯系狐靈科技，免費獲得專屬《策劃方案》及報價

                    

                        
咨詢相關問題或預約面談，可以通過以下方式與我們聯系

                        
業務熱線：15082661954 / 大客戶專線：15523356218
                        

                    

                

            

            
        

    

	
		

        

            

                

                    

                        
關于狐靈科技
                        
                         +                    
  
                    

                    
狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括  網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！								
                    
 
                

                

                    

                        
我們的優勢

                    

                    

                        

                       
量身打造個性化網站制作


代碼深度符合SEO優化


一站式企業網站建設服務


前沿視覺設計、研發能力


重慶網站建設公司

                       

                        

                       
多項網站設計傳播大獎


營銷型網站建設專家


自主研發網站管理系統


B2C電商網站建設供應商


完善的售后服務體系
         
                       
     
                    

                

                

                    

                        
我們的不同

                       +                    

                    

                 在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！
				   

                

            

            
        

        

            

                

                    公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954 
                

                

                     Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1
                

                

                    專業團隊為您提供
                    
                    重慶網頁設計,
                    品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！
                     | TAG標簽					
                    | 網站建設地圖
                    | 網站地圖