第三篇Bootstrap網(wǎng)格基礎(chǔ)
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。
網(wǎng)格系統(tǒng)類似一個(gè)表格,有行和列,它必須放置在一個(gè)類型設(shè)置為container的容器里，可以是div,內(nèi)容放置在列內(nèi)，網(wǎng)頁(yè)設(shè)計(jì)中的網(wǎng)格用于布局內(nèi)容，讓網(wǎng)站易于瀏覽，下面是一個(gè)用bootstrap網(wǎng)格布局的例子。
<div> <div>col2</div> <div>col10</div> </div>
顯示效果如下:
加了Class=”row”的樣式表示行，加了class=”col-sm-2”的樣式表示列，系統(tǒng)將整個(gè)屏幕分為12份，col-sm-2表示該列跨2份，col-sm-10比表示該列跨10份。顯示的效果就會(huì)如上圖所示，表示一行兩列，第一列占2份，第二列占10份。
bootstrap是一個(gè)響應(yīng)式的前端框架，體現(xiàn)在網(wǎng)格系統(tǒng)中就是對(duì)應(yīng)于不同的顯示大小的設(shè)備,可以呈現(xiàn)出不同的顯示效果。如下所示：
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-個(gè)4</div> </div>
Col-md-8表示在中等屏幕比如普通臺(tái)式機(jī)和筆記本下該列占8份。Col-xs-12表示在小屏幕比如平板電腦下該列占12份。以上代碼表示在普通臺(tái)式機(jī)和筆記本下一行兩列，第一列占8份，第二列占4份，在平板電腦下一行兩列，第一列占12份，第二列占6份。通過(guò)此種方式達(dá)到在不同的顯示設(shè)備上展示不同效果?？梢酝ㄟ^(guò)調(diào)整瀏覽器的大小來(lái)模擬一下這兩種情況。
下圖表示Bootstrap 的網(wǎng)格系統(tǒng)是如何在多種屏幕設(shè)備上工作的
以上所述是小編給大家介紹的第三篇Bootstrap網(wǎng)格基礎(chǔ) 的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js canvas實(shí)現(xiàn)放大鏡查看圖片功能
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)放大鏡查看圖片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript generator生成器函數(shù)與asnyc/await語(yǔ)法糖
本文主要介紹了javascript generator生成器函數(shù)與asnyc/await語(yǔ)法糖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
超全面的JavaScript開(kāi)發(fā)規(guī)范（推薦）
作為一名開(kāi)發(fā)人員（WEB前端JavaScript開(kāi)發(fā)），不規(guī)范的開(kāi)發(fā)不僅使日后代碼維護(hù)變的困難，同時(shí)也不利于團(tuán)隊(duì)的合作，通常還會(huì)帶來(lái)代碼安全以及執(zhí)行效率上的問(wèn)題。本文就主要介紹了關(guān)于Javascript的命名規(guī)范、注釋規(guī)范以及框架開(kāi)發(fā)的一些問(wèn)題，需要的朋友可以參考學(xué)習(xí)。2017-01-01
js導(dǎo)出table數(shù)據(jù)到excel即導(dǎo)出為EXCEL文檔的方法
導(dǎo)出table為EXCEL文檔的方法有很多，在本文為大家介紹下js中時(shí)如何做到的，感興趣的朋友可以參考下2013-10-10
javascript實(shí)現(xiàn)根據(jù)身份證號(hào)讀取相關(guān)信息
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)身份證號(hào)讀取相關(guān)信息,需要的朋友可以參考下2014-12-12
JS實(shí)現(xiàn)的跨瀏覽器解析XML文件實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實(shí)例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06
小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Invalid?Host?header問(wèn)題該如何解決的幾種方式
Invalid Host header是一個(gè)常見(jiàn)的錯(cuò)誤信息,通常發(fā)生在Web應(yīng)用程序中,下面這篇文章主要給大家介紹了關(guān)于Invalid?Host?header問(wèn)題該如何解決的幾種方式,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了js正則表達(dá)式驗(yàn)證郵件地址，利用javaScript語(yǔ)言實(shí)現(xiàn)一下電子郵件地址驗(yàn)證程序，使用的是JavaScript語(yǔ)言的正則表達(dá)式庫(kù)，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript手寫(xiě)一個(gè)前端存儲(chǔ)工具庫(kù)
在項(xiàng)目開(kāi)發(fā)的過(guò)程中，為了減少提高性能，減少請(qǐng)求，開(kāi)發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來(lái)用JavaScript手寫(xiě)一個(gè)前端存儲(chǔ)工具庫(kù)，希望對(duì)大家有所幫助2023-02-02