<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动设备优先--> <title>bootstrap</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> div{border: 1px solid #f40; } @media(max-width: 767px){ div{background:#378232} } </style> </head> <body> <div class="container"> <!--row必须放在container里--> <div class="row"> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> </div> <div class="row"> <div class="col-md-8 col-sm-6">md8</div> <div class="col-md-4 col-sm-6">md4</div> </div> </div> <div class="container"> <h1>Container</h1> </div> <div class="container-fluid"> <h1>Container-fluid</h1> </div> <div class="container"> <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-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div> <div class="col-md-2 col-md-offset-2">col-md-2 col-md-offset-2</div> </div> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6">col-md-8 col-md-6</div> <div class="col-md-6">col-md-8 col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-3 col-md-push-5">col-md-3 col-md-push-5</div> <div class="col-md-2 col-md-pull-2">col-md-2 col-md-pull-2</div> </div> <div class="row"> <div class="col-md-8 col-sm-3 col-xs-6">3级</div> <div class="col-md-4 col-sm-6 col-xs-6">3级</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</br>超小有变化</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</br>超小有变化</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> </div> </nav> </body> </html>
bootstrap栅栏布局及用法 bootstrap主要用到{min-width,max-width以及and语法,用于在不同的分辨率下设置不同的css样式} @media(max-width:767px){ 在小于767px的屏幕里,这样的样式才会生效 } @media(min-width:768px)and(max-width:991px){ 在768-991px的屏幕里,这样的样式才生效 } @media(min-width:1200px){ 大于1200px屏幕,这样的样式才生效 } /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px) */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min) { ... } div使用样式 container 自动居中留左右空白的div container-fluid 沾满全屏的div row 行 列如下: (从小到大兼容一行12格:后面跟数字几就是几格:如.col-xs-6) 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) .col-xs- .col-sm- .col-md- .col-lg- 列偏移col-md-offset-3(md:是中等屏幕 offset偏移 3格) 拉列col-md-push-5从出生位置向右推几格 拉列col-md-pull-2从出生位置向左推几格 clearfix 清除浮动 visible-xs 超小分辨率显示