笔记:Bootstrap总结1

1. 响应式/自适应网页：

   一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。
   响应式网页的三个特征：
   (1)流式布局
   (2)可伸缩的图片和字体
   (3)CSS3Media Query

2. 编写响应式网页

   (1)设置viewport元标签
   
   (2)避免使用绝对单位(px)，用相对单位代替(%、auto、em等)
   (3)使用流式定位：float
   (4)图片大小实现自适应：
   img { max-width: 100%; }
   会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。
   (5)根据浏览器屏幕的特征，有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)

3. 测试响应式网页

   (1)使用真实物理设备:在同一个局域网/互联网的手机/平板/PC。
   (2)使用第三方测试/模拟软件
   (3)使用Chrome自带的浏览器模拟器测试: 优势：可以模拟常见的设备、网速、经纬度、加速度….不足：实际效果有待验证

4. 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 {  ...  }}

1. 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)

2. 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-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