Bootstrap学习之起步

安装Bootstrap环境
从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。我下载的是预编译版，即下图中的第一个。

将其解压缩到任意目录即可看到以下（压缩版的）目录结构，由于文件是被编译过和压缩过的，在独立的功能开发中，不必每次都包含这些独立的文件。
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ └── npm.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
HTML模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
    <title>Bootstrap Template</title>

    <!-- Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!-- HTML5 shim and 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 IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery)，务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 包括所有已编译的插件，最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

说明：

HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性，因此在使用 Bootstrap 项目的开头应包含下面的代码段：

<!DOCTYPE html>
<html>
....
</html>

移动设备优先
Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

1、width 属性控制设备的宽度。假设网站被带有不同屏幕分辨率的设备浏览，将它设置为 device-width 可以确保它能正确呈现在不同设备上。
2、initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
3、在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用。

秒客网

Bootstrap学习之起步

相关文章