bootstrap学习（一)栅格、布局
生活随笔
收集整理的這篇文章主要介紹了
bootstrap学习（一)栅格、布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bootstrap學習（一)柵格、布局
柵格：
柵格將整個屏幕分為12份，當使用單一的一組?.col-md-*?柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ”?.row?內，所有的row必須在container內。
clo-md-* ：中等分辨率 <!-- 第一行分了12份 1:1:1、、、--> <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> <!-- 第二行分了兩份 8:4 如果屏幕為小屏是，第二份將為等分6:6--> <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> <!-- 第三行分了3份 4:4:4 --> <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> <!-- 遞四行分了2份 6:6 --> <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">
<body><div class="container">...</div> </body> //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">
<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content--></div><div class="span10"><!--Body content--></div></div> </div> //container-fluid 沒有媒體查詢，寬度都是自動調整 .container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto }?
2、響應式設計
通過在文檔中的<head>標簽里邊添加合適的meta標簽并引入一個額外的樣式表，即可啟用響應式css
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> Bootstrap 所支持的幾個media queries都放在了一個文件中， 可以讓你的項目更靈活的去適應不同設備和屏幕分辨率。包括：類型 布局寬度 列寬 間隙寬度 大屏幕 大于等于1200px 70px 30px 默認 大于等于980px 60px 20px 平板 大于等于768px 42px 20px 手機到平板 小于等于767px 流式列，無固定寬度 手機 小于等于480px 流式列，無固定寬度 /* 大屏幕 */ @media (min-width: 1200px) { ... }/* 平板電腦和小屏電腦之間的分辨率 */ @media (min-width: 768px) and (max-width: 979px) { ... }/* 橫向放置的手機和豎向放置的平板之間的分辨率 */ @media (max-width: 767px) { ... }/* 橫向放置的手機及分辨率更小的設備 */ @media (max-width: 480px) { ... }?
清除浮動：
//以下情況： 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学习（二）页面