bootstrap是一種開發比較簡潔，直觀，強悍的前端開發框架，也算是網頁框架當中的一種，然而這種框架都響應式該如何布局呢?相信許多朋友已經迫不及待想知道答案了，今天就與小編一起來了解一下吧。
bootstrap響應式布局——bootstrap響應式布局快速入門教程
后使用方法實例，截圖如下：
方法/步驟
首先要在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>
響應式布局12列柵格常用類屬性介紹，md類為電腦端，xs類為手機端，sm為平板端。
本例以手機和電腦為例演示響應式，代碼如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>雙創空間</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,在手機端寬度占100%</div>
<divclass=”col-md-4col-xs-12″>我也是</div>
<divclass=”col-md-4col-xs-12″>我也是</div>
</div>
</body>
</html>
bootstrap框架響應式工具有哪些
1. 為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。另外還包含了針對打印機顯示或隱藏內容的工具類。
2. 可用的類
通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容。
3. 可用的類：從v3.2.0版本起，形如.visible-*-*的類針對每種屏幕大小都有了三種變體，每個針對css中不同的display屬性
- 因此，以超小屏幕(xs)為例，可用的.visible-*-*類是：.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。
以上就是bootstrap響應式布局的入門教程，相信大家對其也有了一個基礎的了解，那如果大家還想要更深入的了解這一個布局的方式，可以直接關注我們文軍營銷的官網。
推薦閱讀
400-685-0732(7x24小時)
關注文軍
