Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
網格系統類似一個表格,有行和列,它必須放置在一個類型設置為container的容器裡，可以是div,內容放置在列內，網頁設計中的網格用於佈局內容，讓網站易於瀏覽，下面是一個用bootstrap網格佈局的例子。
<div><div>col2</div><div>col10</div></div>
顯示效果如下:
加了Class=”row”的樣式表示行，加了class=”col-sm-2”的樣式表示列，系統將整個屏幕分為12份，col-sm-2表示該列跨2份，col-sm-10比表示該列跨10份。顯示的效果就會如上圖所示，表示一行兩列，第一列佔2份，第二列佔10份。
bootstrap是一個響應式的前端框架，體現在網格系統中就是對應於不同的顯示大小的設備,可以呈現出不同的顯示效果。如下所示：
<div> <div>.col-xs-12 .col-md-8</div> <div>.col-xs-6 .col-md-個4</div> </div>
Col-md-8表示在中等屏幕比如普通台式機和筆記本下該列佔8份。 Col-xs-12表示在小屏幕比如平板電腦下該列佔12份。以上代碼表示在普通台式機和筆記本下一行兩列，第一列佔8份，第二列佔4份，在平板電腦下一行兩列，第一列佔12份，第二列佔6份。通過此種方式達到在不同的顯示設備上展示不同效果。可以通過調整瀏覽器的大小來模擬一下這兩種情況。
下圖表示Bootstrap 的網格系統是如何在多種屏幕設備上工作的
以上所述是小編給大家介紹的第三篇Bootstrap網格基礎的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！