Bootstrap響應式布局以及柵格框架
阿新 • • 發佈:2018-07-28
效果 測試 blog code jquer images ima mark 入門 一、Bootstrap簡單配置
簡單使用Bootstrap,只需引入: 我們利用Bootstrap,寫一個簡答的div:
二、Bootstrap柵格布局
我們在.container中定義類似table的div單元格row(行)與col(列)-md(屏幕尺寸:可以設置手機、平板等設備)-4(以12等分當前窗口,若超過12份會自動下排)...可以實現簡單的柵格布局,例如:
簡單使用Bootstrap,只需引入:
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
為什麽要引入<link rel="stylesheet" href="css/bootstrap.css" />呢?舉一個簡單的例子:
<div class="container">
<h1>Bootstrap學習</h1>
<p>
以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用!
以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用!
</p>
</div>
通過調節瀏覽器窗口的大小,我們可以看到,Bootstrap是對樣式為container有著響應式布局的。
我們在.container中定義類似table的div單元格row(行)與col(列)-md(屏幕尺寸:可以設置手機、平板等設備)-4(以12等分當前窗口,若超過12份會自動下排)...可以實現簡單的柵格布局,例如:
<div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm當屏幕小到sm時,該div隱藏 --> <h1>側邊欄</h1> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> <div class="col-sm-6 col-md-8 col-lg-10 "> <h1>Bootstrap學習</h1> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2"> <h3>Bootstrap學習</h3> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> <div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger給該div一個醒目色塊--> <h3>Bootstrap學習</h3> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> <div class="col-sm-6 col-md-4 col-lg-2"> <h3>Bootstrap學習</h3> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> <div class="visible-md"><!--當屏幕到 某個尺寸 時,顯示該div--> <h2>屏幕到了這個尺寸了</h2> <p>只有尺寸合適才能看到哦</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自適應當前設備--> <h1>Bootstrap學習</h1> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> <div class="col-sm-6 col-md-8 col-lg-2"> <h1>Bootstrap學習</h1> <p> 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! 以下為測試內容,僅做占位使用!以下為測試內容,僅做占位使用! </p> </div> </div> </div>
實現的效果:
可以針對屏幕微調位置柵格位置,左邊右推一格col-md-push-1,右邊左拉一格col-md-pull-1左推右拉都是絕對位置,而偏移col-md-offset-1是相對的會同步修改後續內容的位置。柵格如table可以嵌套使用,同樣也有著網站的響應式布局。
此篇文章只是入門筆記!
Bootstrap響應式布局以及柵格框架