笔记:Bootstrap总结1

响应式/自适应网页：

一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

响应式网页的三个特征：

(1)流式布局

(2)可伸缩的图片和字体

(3)CSS3Media Query

编写响应式网页

(1)设置viewport元标签

(2)避免使用绝对单位(px)，用相对单位代替(%、auto、em等)

(3)使用流式定位：float

(4)图片大小实现自适应：

img { max-width: 100%; }

会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。

(5)根据浏览器屏幕的特征，有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)

测试响应式网页

(1)使用真实物理设备:在同一个局域网/互联网的手机/平板/PC。

(2)使用第三方测试/模拟软件

(3)使用Chrome自带的浏览器模拟器测试: 优势：可以模拟常见的设备、网速、经纬度、加速度….不足：实际效果有待验证

CSS3提供的Media Query技术

作用：根据客户端浏览设备的特性，有选择性的执行部分CSS

Media：浏览网页的设备，screen(pc/pad/phone)、print、tv、projection、屏幕阅读器

Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、方向Orientation(Landscape/Portrait)，根据这些特性，执行特定的CSS样式。

CSS3MediaQuery有两种用法：

(1)根据媒体的特性，执行不同的外部CSS：

<link media="screen and (min-width:768px)and (max-width: 990px)" rel="stylesheet" href="xx.css">

不足：客户端会不管媒体特性，请求所有的CSS文件。

(2)根据媒体的特性，执行某段CSS中的部分内容：

@media screen and (min-width:768px) and(max-width:990px) {
h1 {  ...  }
.box {  ...  }
}

TwitterBootstrap

http://v3.bootcss.com/css/

Bootstrap(bootcss.com )是一个框架HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

Bootstrap分为五部分：

(1)起步(Startup)

(2)全局CSS样式(Global CSS)

(3)组件(Component)

(4)插件(Plugin)

(5)定制(Customize)

Bootstrap提供的CSS Reset

{box-sizing: border-box; }

body { fo
4000
nt…; color: #333; background: …; margin: 0;}

h1 {font-size: ; margin-top: 20px; margin-bottom: 10px;}

h2 {font-size: ; margin-top: 20px; margin-bottom: 10px;}

h3 {font-size: ; margin-top: 20px; margin-bottom: 10px;}

h4 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

h5 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

h6 { font-size: ; margin-top: 10px; margin-bottom: 10px;}

a {color:; text-decoration: ;}

img {border: 0; vertical-align: middle; }

p {margin-bottom:10px; }

……

CSS：

盒子模型的计算方法 box-sizing

div {
box-sizing:  content-box;   /*默认值*/
box-sizing:  border-box;    /*推荐使用*/
}

content-box: 一个盒子的总宽度=margin+border+padding+width

border-box: 一个盒子的总宽度=margin+width

Bootstrap全局按钮CSS样式

.btn-danger

.btn-success

.btn-warning

.btn-info

.btn-primary

–按钮颜色

.btn-lg

.btn-sm

.btn-xs

–按钮-大号,小号,超小号

.btn-block

.pull-left

.pull-right

Bootstrap全局图片CSS样式

.img-rounded

.img-circle

.img-thumbnail //缩略图片/拇指图片

.img-responsive // 响应式图片

4.Bootstrap全局CSS样式排版

.text-danger

.text-success

.text.warning

.text-info

.text-primary

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-primary

.text-left

.text-right

.text-center

.text-justify //文本两端调整对齐

.text-uppercase

.text-lowercase

.text-capitalize

.list-unstyled

.list-inline

Bootstrap全局CSS表格样式

.table

.table-bordered //带边框的表格

.table-responsive //响应式表格 注意：使用在table的父元素上，而不是table上

.table-striped //隔行变色的表格

.table-hover // 带悬停效果的表格

6.Bootstrap全局CSS样式——栅格布局系统

Web开发中页面布局可以采用的方式：

(1)早期使用TABLE做布局(已过时) 优势：简单不易出错 不足：加载效率

(2)使用DIV+CSS做布局 优势：加载速度快、灵活 不足：不易控制

(3)使用Bootstrap提供的栅格(Grid Layout)布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）

栅格布局系统的特点：

(1)所有的行必须放在容器中： .container或.container-fluid

(2)分为多行(row)，一行中平均分为12列(col)

(3)网页内容只能放在列(col)中，不能直接放在行(row)

.container的宽度问题：

当屏幕宽度>1200px（超大PC显示器-lg）： 容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）: 容器宽970px

当屏幕宽度>768px（平板显示器-sm）: 容器宽750px

当屏幕宽度<768px（手机显示器-xs）: 容器宽auto

.container-fluid的宽度： width: auto; + before + after

Bootstrap布局系统中容器的特点？

①宽度做了媒体查询。

②添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

(4)可以在col中再嵌套row

(5)col分为四大类： col-xs col-sm col-md col-lg

(6)col-md-几 值可为1~12，值就为某个列的宽度( 几分之12 )

<divclass="container">
<divclass="row">
<divclass="col-md-1">col-md-1</div>
</div>
<divclass="row">
<divclass="col-md-2">col-md-2</div>
</div>

(7)可以为一个列指定不同屏幕下的不同宽度

(8)col-lg-* 只对大PC屏幕有效

col-md-* 对普通PC和大PC屏幕都有效

col-sm-* 对平板、PC、大PC屏幕都有效

col-xs-* 对手机、平板、PC大PC屏幕都有效

(9) .hidden-lg 当前列只在大PC屏幕下隐藏

.hidden-md 当前列只在PC屏幕下隐藏

.hidden-sm 当前列只在平板屏幕下隐藏

.hidden-xs 当前列只在手机屏幕下隐藏

(10).col-md-offset-1~12——自学

CSS相关知识

(1)如何解决父元素的第一个子元素的margin-top越界问题

1)为父元素加border-top: 1px;——有副作用

2)为父元素指定padding-top: 1px;——有副作用

3)为父元素指定overflow:hidden;——有副作用

4)为父元素添加前置内容生成——推荐使用

.parent:before {

content: ’ ‘;

display: table;

}

(2)如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素

1)为父元素指定overflow:hidden;——有副作用

2)为父元素指定高度：height: xxx;——有局限性

3)为父元素添加后置内容生成——推荐使用

.parent:after {

content: ’ ‘;

display: table;

clear: both;

}

Bootlint工具:

是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

仅在开发时查错使用.

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport" content="width=device-width,initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap101 Template</title>

<!-- Bootstrap-->
<linkhref="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shimand Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE9]>
<scriptsrc="js/html5shiv.min.js"></script>
<scriptsrc="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello World！</h1>

<!-- jQuery(necessary for Bootstrap's JavaScript plugins) -->
<scriptsrc="js/jquery.min.js"></script>
<!-- Includeall compiled plugins (below), or include individual files as needed -->
//仅在开发时查错使用:
//begin
<script>
(function(){
var s=document.createElement("script");
s.onload=function(){bootlint.showLintReportForCurrentDocument([]);
};
s.src="js/bootlint.min.js";
document.body.appendChild(s)
})();
</script>
//end
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

html的 lang属性的两个作用：

(1)告诉浏览器翻译时如何确定当前网页的基础语言

(2)告诉读屏软件当前页面的基础发音

IE浏览器的兼容性问题：

X-UA-Compitable: Cross-UserAgent-Compatible，该元标签只有IE浏览器支持。

<metahttp-equiv="X-UA-Compatible" content="IE=edge">

设置IE的兼容模式为edge。

IE 6/ 7/ 8/ 9/ 10/ 11

Windows10 IE彻底被抛弃，新浏览器为 Edge