bootstrap是一種開發(fā)比較簡(jiǎn)潔，直觀，強(qiáng)悍的前端開發(fā)框架，也算是網(wǎng)頁框架當(dāng)中的一種，然而這種框架都響應(yīng)式該如何布局呢?相信許多朋友已經(jīng)迫不及待想知道答案了，今天就與小編一起來了解一下吧。
bootstrap響應(yīng)式布局——bootstrap響應(yīng)式布局快速入門教程
后使用方法實(shí)例，截圖如下：
方法/步驟
首先要在html文件的頭部寫如下代碼：
其次同樣在頭部引入bootstrap的文件：示例如下：
首先要在html文件的頭部寫如下代碼：
<metaname=”viewport”content=”width=device-width,initial-scale=1″>
其次同樣在頭部引入bootstrap的文件：示例如下：
<linkrel=”stylesheet”href=”css/bootstrap.min.css”>
<scriptsrc=”js/jquery-1.11.1.min.js”></script>
<scriptsrc=”js/bootstrap.min.js”></script>
響應(yīng)式布局12列柵格常用類屬性介紹，md類為電腦端，xs類為手機(jī)端，sm為平板端。
本例以手機(jī)和電腦為例演示響應(yīng)式，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>雙創(chuàng)空間</title>
<metaname=”viewport”content=”width=device-width,initial-scale=1″>
<linkrel=”stylesheet”href=”css/bootstrap.min.css”>
<scriptsrc=”js/jquery-1.11.1.min.js”></script>
<scriptsrc=”js/bootstrap.min.js”></script>
<scriptsrc=”js/riqi.js”></script>
<styletype=”text/css”>
body{margin:0;padding:0;}
.row{width:100%;}
</style>
</head>
<body>
<divclass=”row”>
<divclass=”col-md-4col-xs-12″>我在電腦端寬度占1/3,在手機(jī)端寬度占100%</div>
<divclass=”col-md-4col-xs-12″>我也是</div>
<divclass=”col-md-4col-xs-12″>我也是</div>
</div>
</body>
</html>
bootstrap框架響應(yīng)式工具有哪些
1. 為了加快對(duì)移動(dòng)設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁面內(nèi)容。另外還包含了針對(duì)打印機(jī)顯示或隱藏內(nèi)容的工具類。
2. 可用的類
通過單獨(dú)或聯(lián)合使用以下列出的類，可以針對(duì)不同屏幕尺寸隱藏或顯示頁面內(nèi)容。
3. 可用的類：從v3.2.0版本起，形如.visible-*-*的類針對(duì)每種屏幕大小都有了三種變體，每個(gè)針對(duì)css中不同的display屬性
- 因此，以超小屏幕(xs)為例，可用的.visible-*-*類是：.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。
以上就是bootstrap響應(yīng)式布局的入門教程，相信大家對(duì)其也有了一個(gè)基礎(chǔ)的了解，那如果大家還想要更深入的了解這一個(gè)布局的方式，可以直接關(guān)注我們文軍營(yíng)銷的官網(wǎng)。
推薦閱讀
400-685-0732(7x24小時(shí))
關(guān)注文軍
