本周学习了bootstrap的栅格系统，JavaScript的组成、在HTML中使用JavaScript。

一、bootstrap

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

1.简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，下面是 Bootstrap 栅格系统的工作原理：

1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2. 通过“行（row）”在水平方向创建一组“列（column）”。
3. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
4. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

2.媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

3.栅格参数

列数：12
槽宽 30px ：（每列左右均有 15px）
可嵌套：是
偏移（Offsets）：是
列排序：是

（1）超小屏幕 手机 (<768px) 【.col-xs-】

栅格系统行为：总是水平排列
.container 最大宽度：None （自动）
最大列宽：自动

（2）小屏幕 平板 (≥768px) 【.col-sm-】

栅格系统行为：开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度：750px
最大列宽：~62px

（3）中等屏幕 桌面显示器 (≥992px) 【.col-md-】

栅格系统行为：开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度：970px
最大列宽：~81px

（4）大屏幕 大桌面显示器 (≥1200px) 【.col-lg-】

栅格系统行为：开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度：1170px
最大列宽：~97px

4.流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

5.移动设备和桌面屏幕

图形说明

<!-- 通过制作一个全宽和另一个半宽来堆叠移动列 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- 移动设备上的列开始宽度为50％，台式机上的列宽为33.3％ -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- 移动和桌面上的列总是宽50％ -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

6.手机、平板、电脑

图形说明

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- 可选：如果XS cols的内容高度不匹配，请清除它们 -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

可选：如果XS cols的内容高度不匹配，请清除它们
<div class="clearfix visible-xs-block"></div>

7.多余的列将另起一行排列

图形说明

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>
由于9 + 4 = 13＆gt; 12，这个4列宽的div被包装到一个新的行中作为一个连续的单元。</div>
  <div class="col-xs-6">.col-xs-6<br>后续列继续沿着新行。</div>
</div>

8.列偏离

使用' .col-md-offset- * '类可以将列向右侧偏移。这些类实际是通过使用 ' * '选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

图形说明

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

9.嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

图形说明

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

10.列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序，其中 * 范围是从 1 到 11。
我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

图形说明

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

二、JavaScript

1.JavaScript的组成

虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但事实上JavaScript的含义要比ECMA-262中规定的要多得多。

一个完整的JavaScript实现应由下列三个不同的部分组成。

1.核心（ECMAScript）-提供核心语言功能

由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系 ，ECMA-262只是这门语言的基础，在此基础上可以构建更完善的脚本语言，Web浏览器只是ECMAScript实现可能的宿主环境之一。
宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言和环境之间对接交互。

2.文档对象模型（DOM）-提供访问和操作网页内容的方法和接口

DOM是针对XML但经过扩展用于HTML的应用程序编程接口。
DOM把整个页面映射为一个多层节点结构。
DOM并不只是针对JavaScript的。

3.浏览器对象模型（BOM）-提供与浏览器交互的方法和接口

BOM只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分。

2.在HTML使用JavaScript

（1）<script>元素

1.type - 表示编写代码使用的脚本语言的内容类型

2.src - 表示要执行代码的外部文件

3.defer - 表示脚本可以延迟到文档完全被解析和显示之后再执行（只对外部脚本有效）（立即下载，延迟执行）【总是顺序执行】

4.async - 表示立即下载脚本，但不妨碍页面中的其他操作【不保证顺序执行】

5.charset - 表示通过src属性指定的代码的字符集

（2）使用<script>元素的两种方式

直接在页面中嵌入JavaScript代码

指定type属性为text/javascript。
在使用<script>嵌入JavaScript代码时，不能再代码中任何位置出现"</script>"字符串，而通过转义字符" \ "解决这个问题。

     <script type="text/javascript">
        function sayScript(){
            alert("<\/script>");
        }
    </script>

包含外部JavaScript文件

<!-- 指向一个外部JavaScript文件的链接 -->
<script type="text/javascript" src="example.js"></script>
<!-- 如果是在XHTML文档中，也可以省略</script> -->
<script type="text/javascript" src="example.js"/>
<!-- 也可以是指向当前HTML页面所在域之外的某个域中的完整URL -->
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

最好使用外部文件来包含JavaScript代码，这种做法的优点是：
1.增加代码的可维护性
2.可缓存，如果有两个页面使用同一个文件，那么这个文件只需下载一次，可以加快页面加载的速度。
3.适应未来

（3）<script>的位置

如果所有的JavaScript文件放在head里面的话，意味着要等待全部JavaScript文件下载、解析、执行完成后才开始呈现页面内容。为了避免这个问题，现在Web应用程序一般都把全部JavaScript引用放在<body>元素后面。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Example HTML Page</title>
</head>
<body>
    <!--这里是内容-->
    <script type="text/javascript">
        function sayScript(){
            alert("<\/script>");
        }
    </script>
    <script type="text/javascript" src="example.js"></script>
    <script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
</body>
</html>

（4）把JavaScript代码包含在HTML注释中

<script type="text/javascript"><!--
        function sayHi(){
            alert("Hi！");
        }
//--></script>

由于现在所有的浏览器都支持JavaScript，所以这种格式也就没必要使用了。

（5）文档模式

混杂模式
标准模式
准标准模式

（6）<noscript>元素

用已在不支持JavaScript的浏览器中显示（浏览器不支持脚本，浏览器支持脚本，但脚本被禁用）代替的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Example HTML Page</title>
    <script type="text/javascript" src="example.js"></script>
    <script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
</body>
</head>
<body>
    <noscript>
        <p>本页面需要浏览器支持（启用）JavaScript。</p>
    </noscript>
</body>
</html>