②bootstrap栅栏使用基础案例
<!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 超小分辨率显示
②bootstrap栅栏使用基础案例的更多相关文章
- 【7】了解Bootstrap栅格系统基础案例（2）
ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...
- 【10】了解Bootstrap栅格系统基础案例（5）
这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...
- 【9】了解Bootstrap栅格系统基础案例（4）
这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...
- 【8】了解Bootstrap栅格系统基础案例（3）
这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...
- 【6】了解Bootstrap栅格系统基础案例（1）
从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...
- ⒂bootstrap组件 折叠 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ⒀bootstrap组件 选项卡 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- ⑤bootstrap表格使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ④bootstrap列表使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- AES加密解密——AES在JavaWeb项目中前台JS加密，后台Java解密的使用
一:前言 在软件开发中,经常要对数据进行传输,数据在传输的过程中可能被拦截,被监听,所以在传输数据的时候使用数据的原始内容进行传输的话,安全隐患是非常大的.因此就要对需要传输的数据进行在客户端进行加密 ...
- Ngnix技术研究系列2-基于Redis实现动态路由
上篇博文我们写了个引子: Ngnix技术研究系列1-通过应用场景看Nginx的反向代理 发现了新大陆,OpenResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 ...
- Spring之注解实现aop(面向切面编程)
1:Aop(aspect object programming)面向切面编程,名词解释: 1.1:功能:让关注点代码与业务逻辑代码分离 1.2:关注点 重复代码就叫做关注点 ...
- Select的option事件问题
一开始看你们会觉得没问题,我也就是觉得没问题所以才找不到错误所在. 问题出在option本身是没有事件的说法的,只能在select里添加事件,再获取option的属性值 这是我的写法 select设置 ...
- ios实现无限后台任务
需求 我们的app是使用心跳机制来保持用户的登陆状态,这样才能收到服务器发来的消息和命令,但是当app进入后台以后大约3分钟或者10分钟之后app就会被系统挂起,用户就会超时下线,这样就必须保持app ...
- vuejs2-生命周期
https://segmentfault.com/a/1190000008879966 1 声明周期图示 2 过渡
- js 浏览器上调试方法多样
1.alert(111) 直接打印出 111 2.debugger 写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...
- C#综合揭秘——细说多线程（二）
/* 异步写入 FileStream中包含BeginWrite.EndWrite 方法可以启动I/O线程进行异步写入. public override IAsyncResult BeginWrite ...
- c#字符编码,System.Text.Encoding类,字符编码大全：如Unicode编码、GB18030、UTF-8，UTF-7，GB2312，ASCII，UTF32，Big5
本页列出来目前window下所有支持的字符编码 ---c#通过 System.Text.Encoding.GetEncodings()获取,里面可以对其进行查询,筛选,对同一个字符,在不同编码进行查 ...
- Java 7 JVM和垃圾收集
---恢复内容开始--- 写JAVA程序,一定要了解JVM(JAVA Virtual machine)一些基础知识和垃圾收集.如果对JVM已经很了解了,可以不用继续往下阅读了.本文只针对Java 7, ...