笔记: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 { font…; 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-rightBootstrap全局图片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-inlineBootstrap全局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-1div>
div>
<divclass="row">
<divclass="col-md-2">col-md-2div>
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使用方面的错误——默认情况下浏览器是检查不出来的。
仅在开发时查错使用.
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap101 Templatetitle>
<linkhref="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>Hello World！h1>
<scriptsrc="js/jquery.min.js">script>
//仅在开发时查错使用:
//begin
<script>
(function(){
var s=document.createElement("script");
s.οnlοad=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