自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

互聯(lián)網(wǎng)知識

精準(zhǔn)傳達 ? 價值共享

洞悉互聯(lián)網(wǎng)前沿資訊，探尋網(wǎng)站營銷規(guī)律

bootstrap響應(yīng)式設(shè)計visible-sm、hidden-xs等的使用

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

啟用響應(yīng)式特性

通過在文檔中的 <head> 標(biāo)簽里添加合適的meta標(biāo)簽并引入一個額外的樣式表即可啟用響應(yīng)式CSS。如果你已經(jīng)在定制頁面編譯好一個Bootstrap, 那么只需添加一個meta標(biāo)簽。



    
	
  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在默認(rèn)情況下是沒有引入響應(yīng)式特性的，因為不是任何情況都需要使用到。我們并不是鼓勵開發(fā)者移除此功能, 而是在需要使用的時候才啟用它。



	關(guān)于響應(yīng)式Bootstrap

Responsive devices


	Media queries允許在一些條件基礎(chǔ)上自定義CSS 例如：—ratios、widths、display type, etc— 但通常都是圍繞著 min-width 和 max-width 這兩者。


    
	
  • 
		修改柵格系統(tǒng)中列的寬度
    • 
	
  • 
		需要的時候, 用堆疊元素代替浮動
    • 
	
  • 
		調(diào)整標(biāo)題和文本的大小以便適合各種設(shè)備
    • 




	謹(jǐn)慎的使用media queries，先從你的手機用戶開始吧。對于大型的項目, 應(yīng)該考慮使用專門的代碼庫, 而不是構(gòu)筑在media queries之上。



	被支持的設(shè)備



	Bootstrap 所支持的幾個media queries都放在了一個文件中， 可以讓你的項目更靈活的去適應(yīng)不同設(shè)備和屏幕分辨率。包括：



	
		

			
				類型
			
				布局寬度
			
				列寬
			
				間隙寬度
		

	
	
		

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

		

			
				默認(rèn)
			
				大于等于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. 
		/* 橫向放置的手機及分辨率更小的設(shè)備 */
    11. 
	
  11. 
		@media (max-width: 480px) { ... }
    12. 




	響應(yīng)式布局輔助class



	為了更快的針對移動設(shè)備做開發(fā), 下面列出的輔助class用于針對不同設(shè)備顯示和隱藏內(nèi)容。下表是可用的class列表, 以及它們在各個media query布局下的效果。這些class可以在 responsive.less 文件中找到。



	
		

			
				Class
			
				手機767px 及以下
			
				平板979px 到 768px
			
				電腦默認(rèn)
		

	
	
		

			
				.visible-phone
			
				顯示
			
			
		

		

			
				.visible-tablet
			
			
				顯示
			
		

		

			
				.visible-desktop
			
			
			
				顯示
		

		

			
				.hidden-phone
			
			
				顯示
			
				顯示
		

		

			
				.hidden-tablet
			
				顯示
			
			
				顯示
		

		

			
				.hidden-desktop
			
				顯示
			
				顯示
			
		

	




	何時使用



	在有限的情況下使用, 避免創(chuàng)建同一個站點的不同版本。當(dāng)這些class能對每種設(shè)備的展示做有益的補充的時候才使用。響應(yīng)式工具不能用于table元素，而且本就不支持。



	響應(yīng)式工具測試案例



	調(diào)整瀏覽器的寬度或者在不同的設(shè)備上加載該頁面用以測試上述的class。



	在...上顯示



	綠色選中標(biāo)記用以指示這些class在你當(dāng)前的可視窗口是可見的。


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




	在...上隱藏



	這里的綠色選中標(biāo)記用以指示這些class在你當(dāng)前的可視窗口是隱藏的。


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


	  
	  

  
 
如沒特殊注明，文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請注明?? "bootstrap響應(yīng)式設(shè)計visible-sm、hidden-xs等的使用
     


	相關(guān)推薦
	



      
      
    


    
  









    

    

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

      

        
        
請直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

      

      
    

  

	
      




        

            

                

                    網(wǎng)站設(shè)計
                    品牌營銷
                

                

                    
多一份參考，總有益處

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

                    

                        
咨詢相關(guān)問題或預(yù)約面談，可以通過以下方式與我們聯(lián)系

                        
業(yè)務(wù)熱線：15082661954 / 大客戶專線：15523356218
                        

                    

                

            

            
        

    

	
		

        

            

                

                    

                        
關(guān)于狐靈科技
                        
                         +                    
  
                    

                    
狐靈致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括  網(wǎng)站建設(shè)、 SEO優(yōu)化、移動互聯(lián)網(wǎng)營銷、高端網(wǎng)站建設(shè)、高端網(wǎng)站設(shè)計、品牌網(wǎng)站定制開發(fā)、營銷策劃推廣電子商務(wù)、移動互聯(lián)網(wǎng)營銷、 為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，我們將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供一體化全方位的互聯(lián)網(wǎng)品牌整合方案！								
                    
 
                

                

                    

                        
我們的優(yōu)勢

                    

                    

                        

                       
量身打造個性化網(wǎng)站制作


代碼深度符合SEO優(yōu)化


一站式企業(yè)網(wǎng)站建設(shè)服務(wù)


前沿視覺設(shè)計、研發(fā)能力


重慶網(wǎng)站建設(shè)公司

                       

                        

                       
多項網(wǎng)站設(shè)計傳播大獎


營銷型網(wǎng)站建設(shè)專家


自主研發(fā)網(wǎng)站管理系統(tǒng)


B2C電商網(wǎng)站建設(shè)供應(yīng)商


完善的售后服務(wù)體系
         
                       
     
                    

                

                

                    

                        
我們的不同

                       +                    

                    

                 在我們的對手消耗大量的時間停留在碎片化的互聯(lián)網(wǎng)設(shè)計或者程序?qū)崿F(xiàn)的時候，我們已經(jīng)開始把數(shù)字化品牌建設(shè)和網(wǎng)絡(luò)傳播進行了整合。我們提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、創(chuàng)意表現(xiàn)、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站運營反饋建議等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,為所有謀求長遠發(fā)展的企業(yè)品牌貢獻全力！
				   

                

            

            
        

        

            

                

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

                

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

                

                    專業(yè)團隊為您提供
                    
                    重慶網(wǎng)頁設(shè)計,
                    品牌網(wǎng)站設(shè)計,營銷型網(wǎng)站制作,SEO優(yōu)化關(guān)鍵詞排名推廣等服務(wù),建網(wǎng)站就找狐靈科技！
                     | TAG標(biāo)簽					
                    | 網(wǎng)站建設(shè)地圖
                    | 網(wǎng)站地圖