響應(yīng)式網(wǎng)站制作之Bootstrap框架的使用

2023-03-21 分類(lèi)：響應(yīng)式網(wǎng)站

在響應(yīng)式網(wǎng)站中使用bootstrap的使用率是極大的，很多開(kāi)發(fā)者都在使用它。那boosttrap的優(yōu)勢(shì)是什么了？在boosttrap出現(xiàn)前有很多網(wǎng)站的頁(yè)面排版命名重復(fù)、復(fù)雜、無(wú)意義，樣式重復(fù)、冗余、不規(guī)范、不和諧，頁(yè)面錯(cuò)亂、不規(guī)范、不和諧，而boosttrap出現(xiàn)后各種命名都統(tǒng)一并且規(guī)范化，頁(yè)面風(fēng)格統(tǒng)一，畫(huà)面和諧。
Bootstrap的核心是柵格系統(tǒng)，Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類(lèi)。

圖像1

排列如圖：

柵格參數(shù)如圖：
柵格系統(tǒng)是通過(guò)一系列的行（row）與列（column）的組合來(lái)組建頁(yè)面布局的，Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器。Bootstrap提供了兩個(gè)容器類(lèi)（.container和.container-fluid），而這兩種容器類(lèi)不能互相嵌套。
HTML代碼2

如圖：
當(dāng)屏幕寬度大于和等于1200px時(shí).Bootstrap使用.col-lg-的類(lèi)來(lái)組建頁(yè)面布局，當(dāng)屏幕寬度大于和等于992px時(shí).Bootstrap使用.col-md-的類(lèi)來(lái)組建頁(yè)面布局，當(dāng)屏幕寬度大于和等于768px時(shí).Bootstrap使用.col-sm-的類(lèi)來(lái)組建頁(yè)面布局，當(dāng)屏幕寬度小于768px時(shí).Bootstrap使用.col-sm-的類(lèi)來(lái)組建頁(yè)面布局，通過(guò)這些響應(yīng)式的類(lèi)Bootstrap組建了一個(gè)在多種屏幕設(shè)備上的響應(yīng)式網(wǎng)站。

文章標(biāo)題：響應(yīng)式網(wǎng)站制作之Bootstrap框架的使用
標(biāo)題來(lái)源：http://muchs.cn/news/246232.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容