HTML5 doctype头部规范

HTML5标准的doctype头部定义是首要的，否则会导致样式失真。

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. ...
  4. </html>

响应式meta标签

为了确保所有设备的渲染和触摸效果，必须在区域添加响应式的视图标签。
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

盒尺寸

为了更直观地用Bootstrap的尺寸规范而不受浏览标准影响，将全局box-sizing的值由默认的content-box重定义为border-box，以保证padding不会影响元素的最后计算宽度。
恢复原尺寸：

.selector-for-some-widget{
  box-sizing:content-box;
}