這篇文章主要講解了“bootstrap響應式布局的概念是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap響應式布局的概念是什么”吧！

網站建設哪家好，找創(chuàng)新互聯！專注于網頁設計、網站建設、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了溫縣免費建站歡迎大家使用！

在bootstrap中，響應式布局是指同一個頁面在不同的屏幕尺寸下有著不同的布局，響應式布局可以兼容不同分辨率的設備，可以利用柵格系統(tǒng)將一行平均分成12個格子，指定元素占幾個格子來實現。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap的響應式布局是什么意思

一、基本概念

響應式布局指的是同一頁面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的設備

傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機端再開發(fā)一套，而使用響應式布局只要開發(fā)一套就夠，缺點就是CSS比較重。

實現：依賴于柵格系統(tǒng)，將一行平均分成12個格子，可以指定元素占幾個格子

* 步驟：
	（1）定義容器：相當于之前的table
			* 容器分類：
				* container：兩邊留白
				* container-fluid：每一種設備都是100%寬度
	（2）定義行：相當于之前的tr，樣式：row
	（3）定義元素：指定該元素在不同的設備上，所占的格子數目，
				樣式：col-設備代號-格子數目

柵格參數：

注意：

（1）一行中如果格子數目超過12，則超出部分自動換行。
（2）柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。
（3）如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

二、示例

    
    
    
        
        
        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

        柵格

    

感謝各位的閱讀，以上就是“bootstrap響應式布局的概念是什么”的內容了，經過本文的學習后，相信大家對bootstrap響應式布局的概念是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！