bootstrap ch2清除浮动+12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>code2</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{border:1px solid red} @media only screen and (min-width: 500px) and (max-width: 640px) {
div {background: #1B6D85;}
}
</style>
</head>
<body>
<div class="container">
<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-6 col-sm-6">.col-md-6</div>
<div class="col-md-6 clo-sm-6">.col-md-6</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>code3</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{background: #C4E3F3;}
</style>
</head>
<body>
<div class="container">
container </div>
<div class="container-fluid">
<!--container-fluid占满行-->
container-fluid
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lie-zu-he</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{border: 1px solid red;}
</style>
</head>
<body>
<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="clo-xs-6">col-xs-6</div> </div>
<!--/列偏移-->
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3</div>
<div class="clo-md-2 col-md-offset-2">col-md-2</div> </div>
<!--列嵌套-->
<div class="row">
<div class="col-md-8">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--列的排序-->
<div class="row">
<!--push是向后推几格子
pull是向前拉几个格子-->
<div class="col-md-3 col-md-push-5">col-md-3</div>
<div class="col-md-2 col-md-pull-3">col-md-2</div>
</div>
<!--跨分辨率-->
<div class="row">
<div class="col-md-8 col-xs-5 col-sm-4">div</div>
<div class="col-md-4 col-sm-8 col-xs-7">div</div>
</div> </div>
</body>
</html>
bootstrap ch2清除浮动+12的更多相关文章
- bootstrap ch2清除浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 5.bootstrap栅格 清除浮动
只要用到栅格,就注意要清除浮动,清除方法就是在父元素的class上加一个clearfix 1.情景: . <div class="col-sm-7"> <div ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap清除浮动问题
所有的col-样式都是左浮动 <div class="row"> <div class="col-xs-6 col-sm-3">d ...
- clearfix清除浮动
首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...
- 细微之处:比较两种CSS清除浮动的兼容
http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...
- 第五篇:web之前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- Css清除浮动最优方式之一
---恢复内容开始--- .container:before, .container:after { display: table; content: " "; } .contai ...
随机推荐
- 用 monitorix 开启linux图形化监控
# yum install monitorix # service monitorix starthttp://host:8080/monitorix/
- 用CKEDITOR 做自助上传的解决方案2
1,在plugins下新建文件夹 multiimg 2,创建文件plugin.js (function() { CKEDITOR.plugins.add("multiimg", { ...
- ring3 hook ZwWriteVirtualMemory
typedef LONG NTSTATUS;typedef NTSTATUS (NTAPI *PNtZwWriteVirtualMemory) ( IN HANDLE hProcess, IN PVO ...
- S.O.L.I.D五大原则之单一职责SRP
转自 : 汤姆大叔的blog Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是: The Single Responsibility Principle(单 ...
- LeetCode 328. Odd Even Linked List C#
Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...
- 常用Git命令大全
Git命令 查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show ...
- TheSixthWeekJavaText
加密文档 实验要求编写一个算法加密一串英文字串. 设计思想:对于一个字符串,我们可以用String.charAt()方法依次取出其中的字符元素,组成一个字符数组.由于字符可以转化为short类型变量进 ...
- 教务处sso设计缺陷
前言 刚学习python,觉得比较枯燥总不知道从哪里入手,偶然一次,同学让我帮忙看看选课,发给我的是学校统一的默认格式的密码,突然就想试试有多少人还是默认密码,从QQ群里找了一份学生信息尝试了一下,发 ...
- On the first day here
记录一下到这里的第一天 简单的自我介绍一下: 姓名: 郑超杰 昵称: 蝴蝶 English Nickname: developerbfl 技能: OC H5 Swift ...
- 【转】使用sinopia五步快速完成本地npm搭建
使用sinopia五步快速完成本地npm搭建 时间 2016-03-01 14:55:30 繁星UED 原文 http://ued.fanxing.com/shi-yong-sinopiawu-b ...