吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式的列重置</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</div>
</div>
</div> </body>
</html>
吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：响应式图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：中型和大型设备
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：列排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- vue 使用 jsonp 请求数据
vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...
- for each.遍历集合或数组使用
package seday11; import java.lang.reflect.Array;import java.util.ArrayList;import java.util.Collecti ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- redis常用配置参数
首先弄清楚当前redis读取的是哪个配置文件,然后去配置文件修改,例如windows 打开服务列表,点击Redis,右键属性 "D:\Program Files\Redis\redis-se ...
- hz和s和脉冲
先弄清楚定义,HZ是频率的单位,而s是周期的单位:而f=1/T. 故1hz=1s:5hz=1/5=0.02s; 占空比 占空比(Duty Ratio)在电信领域中有如下含义: 在一串理想的 ...
- kali 安装与配置
打开虚拟机 新建一个虚拟机 导入虚拟文件 然后进行下面的步骤 开启虚拟机 语言:中文简体 地区: 中国 语言: 汉语 自动安装 配置网络 配置域名 填写密码(两次一致) 自动校对时钟 使用整个磁盘 选 ...
- m大子段和 hdu1024
给出n个数,m个区间: 求选区m个区间的最大值: #include<cstdio> #include<algorithm> #include<math.h> #in ...
- MXnet的使用
关于MXnet的介绍: MXNet: A flexible and efficient library for deep learning. 这是MXNet的官网介绍,“MXNet是灵活且高效的深度学 ...
- Spring AOP编程(二)-AOP实现的三种方式
AOP的实现有三种方式: l aop底层将采用代理机制进行实现. l 接口 + 实现类 :spring采用 jdk 的动态代理Proxy. l 实现类: ...
- Codeforces Round #618 (Div. 1)C（贪心）
把所有数看作N块,后面的块比前面的块小的话就合并,这个过程可能会有很多次,因为后面合并后会把前面的块均摊地更小,可能会影响更前面地块,像是多米诺骨牌效应,从后向前推 #define HAVE_STRU ...