1、引入bootstrap.min.css

選用于生產(chǎn)環(huán)境下載后，引入css。

<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">

2、使用bootstrap類布局

BootStrap3默認(rèn)將網(wǎng)頁(yè)分成12等份，頁(yè)面寬度縮小時(shí)自動(dòng)折行。

如以下代碼，使用了bootstrap的class類container和col-*。

col-lg-3這里意思是大屏?xí)r每個(gè)div占用3份，4個(gè)div剛好把12份占滿，中屏?xí)r使用col-md-6，每個(gè)div占用6份，前兩個(gè)div把12份占滿了，后兩個(gè)div另起一行占滿。


<div class="container">
  <div class="col-lg-3 col-md-6">1</div>
  <div class="col-lg-3 col-md-6">2</div>
  <div class="col-lg-3 col-md-6">3</div>
  <div class="col-lg-3 col-md-6">4</div>
</div>

小屏：

中屏：

大屏：

該文章在 2024/7/19 9:05:27 編輯過

關(guān)鍵字查詢

css

響應(yīng)

布局

bootstrap

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。