當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

bootstrap学习（一)栅格、布局

發布時間：2024/9/15 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap学习（一)栅格、布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

bootstrap學習（一)柵格、布局

柵格：

柵格將整個屏幕分為12份，當使用單一的一組?.col-md-*?柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ”?.row?內，所有的row必須在container內。

clo-md-* ：中等分辨率  <div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div> </div>  <div class="row"><div class="col-md-8 col-sm-6">.col-md-8</div><div class="col-md-4 col-sm-6">.col-md-4</div> </div>  <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div> </div>  <div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div> </div>

媒體查詢：（在特定分辨率的屏幕下顯示不同的效果）

//當屏幕（瀏覽器）寬度大于767時，div的背景顏色就改為red @media(min-width: 767px){div{background: red; } } 或 //當屏幕寬度在767px和1176px之間時，div的背景染色為red @media(min-width: 767px) and (mxa-width: 1176px) { div{ background: red; } }

柵格的用法：

bootstrap布局

container：會自動更具屏幕的大小調整寬度（具體顯示參數，看柵格參數圖）

container-fluid：不管什么分辨率，都將會鋪滿整個屏幕

1、固定布局<div class="container">

//bootstrap.min.js中的具體代碼 //默認外邊界左右寬度為自動 .container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto }//屏幕寬度大于768是 container顯示寬度為750 @media (min-width: 768px) {.container {width: 750px} }//屏幕寬度打野992時，container顯示寬度為970 @media (min-width: 992px) {.container {width: 970px} }@media (min-width: 1200px) {.container {width: 1170px} }

2、流式布局<div class="container-fluid">

//container-fluid 沒有媒體查詢，寬度都是自動調整 .container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto }

2、響應式設計

通過在文檔中的<head>標簽里邊添加合適的meta標簽并引入一個額外的樣式表，即可啟用響應式css

清除浮動：

//以下情況： md-6 在超小屏幕下，顯示為兩行（顯示為兩行是因為浮動）；在小屏幕內顯示為1行 <div class="container"><div class="row"><div class="col-xs-6 col-sm-3">aaa</div><div class="col-xs-6 col-sm-3">aaa</div><div class="col-xs-6 col-sm-3">aaa</div><div class="col-xs-6 col-sm-3">aaa</div></div> </div> 以上為正常顯示 //當第一個div中的內容過長時，他會向下擴展，會占用第三個div的位置，導致第三個div占用第四個div的位置。整體顯示為三行內容 <div class="container"><div class="row"><div class="col-xs-6 col-sm-3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div><div class="col-xs-6 col-sm-3">aaa</div><div class="col-xs-6 col-sm-3">aaa</div><div class="col-xs-6 col-sm-3">aaa</div></div> </div> 想要清除這種情況，需要在第三個div前加入清除浮動樣式 <div class="clearfix visible-xs"></div>

?官方：https://v3.bootcss.com/css/#grid

posted @ 2019-04-14 19:42 巡山小妖N 閱讀(...) 評論(...) 編輯收藏

總結

以上是生活随笔為你收集整理的bootstrap学习（一)栅格、布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python学习-Pillow图像处理
下一篇： bootstrap学习（二）页面