BootStrap系统

BootStrsp的引入：

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

兼容IE

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

使部分国产浏览器默认采用高速模式渲染页面

国内浏览器厂商一般都支持兼容模式（IE内核）和高速模式（webkit内核），但是所有国内浏览器都是默认兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。

<meta name="renderer" content="webkit">

目前只有360浏览器支持以上标签。

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 并没有对屏幕的宽度和视口（viewport）的宽度进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。

引入CSS 代码暂时修复此问题：

@-ms-viewport       { width: device-width; }

然而，这样做并不能对 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本之前的设备起作用，由于这样做将导致 Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的“手机”呈现方式，为了解决这个问题，还需要加入以下 CSS 和 JavaScript 代码来化解此问题。

@-webkit-viewport   { width: device-width; }

@-moz-viewport      { width: device-width; }

@-ms-viewport       { width: device-width; }

@-o-viewport        { width: device-width; }

@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.

// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

  var msViewportStyle = document.createElement('style')

  msViewportStyle.appendChild(

    document.createTextNode(

      '@-ms-viewport{width:auto!important}'

    )

  )

  document.querySelector('head').appendChild(msViewportStyle)

}

为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

校验状态—图标：

1、aria-hidden="true"

为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label属性。

2、aria-describedby="inputSuccess2Status"；辅助设备读取数据

3、

<input type="search" name="user_search" placeholder="Search W3School" />

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。