Bootstrap 入门

什么是 Bootstrap?

Bootstrap 是一个免费的前端框架，用于更快、更简单的 web 开发
Bootstrap 包括基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模型、图像和许多其他功能，以及可选的 JavaScript 插件
Bootstrap 还使您能够轻松创建响应式的页面设计

什么是响应式网页设计?

响应式网页设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

Bootstrap 实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>调整此响应页面的大小以查看效果!</p>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
</body>
</html>

运行一下

Bootstrap 历史

Bootstrap 由 Mark Otto 和 Jacob Thornton 在 Twitter 上开发，并于 2011 年 8 月在 GitHub 上作为开源产品发布。

2014 年 6 月，Bootstrap 在 GitHub 上的项目上排名第一！

为什么使用 Bootstrap?

Bootstrap 的优势:

易于使用：只要对 HTML 和 CSS 有基本了解，任何人都可以开始使用 Bootstrap
响应功能：Bootstrap 的响应 CSS 可根据手机、平板电脑和台式机进行调整
Mobile-first（移动优先）方法：在 Bootstrap 3 中，Mobile-first 样式是核心框架的一部分
浏览器兼容性：Bootstrap 兼容所有现代浏览器（Chrome、Firefox、Internet Explorer、Edge、Safari 和 Opera）

哪里能下载 Bootstrap?

有两种方法可以开始在自己的网站上使用 Bootstrap。

您可以:

从 getbootstrap.com 下载 Bootstrap
从一个 CDN 包含 Bootstrap

下载 Bootstrap

如果您想自己下载并管理 Bootstrap，请访问 getbootstrap.com, 然后按照里面的指示下载。

Bootstrap CDN

如果您不想自己下载和管理 Bootstrap，可以从 CDN（Content Delivery Network）中包含它。

百度 CDN 库 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持，您必须包含 jQuery:

百度 CDN:

 <!-- 最新编译压缩版 CSS -->
 <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
 <!-- jQuery 库 -->
 <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 <!-- 最新编译的 JavaScript -->
 <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

使用 Bootstrap CDN 的一个优势:

许多用户在访问另一个站点时已经从 百度 CDN 库 下载了 Bootstrap。因此，当他们访问您的站点时，它将从缓存中加载，这将减少加载时间。此外，大多数 CDN 将确保一旦用户向其请求文件，它将从离他们最近的服务器获得服务，这也会减少加载的时间。

jQuery

Bootstrap 将 jQuery 用于 JavaScript 插件（如modals、工具提示等）。但是，如果只使用 Bootstrap 的 CSS 部分，就不需要 jQuery。

使用 Bootstrap 创建第一个网页

1. 添加 HTML5 doctype

Bootstrap 使用需要 HTML5 doctype 的 HTML 元素和 CSS 属性。

始终在页面开头包含 HTML5 doctype，以及 lang 属性和正确的字符集:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 是 mobile-first（移动优先）

Bootstrap 3 就是为了对移动设备做出响应。Mobile-first 样式是核心框架的一部分。

为确保在触摸缩放下进行正确的渲染，请在 <head> 元素中添加以下 <meta> 标记:

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

width=device-width 将页面宽度设置为跟随设备的屏幕宽度（根据设备的不同而有所不同）。

initial-scale=1 将设置浏览器首次加载页面时的初始缩放级别。

3. Containers

Bootstrap 还需要一个包含元素来包装站点内容。

有两个容器类可供选择:

.container 类提供了一个响应性强的固定宽度容器

.container-fluid 类提供了一个完全宽度的容器，跨越视口的整个宽度

两个基础的 Bootstrap 页面

下面的实例显示了基本 Bootstrap 页面（带有响应固定宽度容器）的代码:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>这个部分在 .container 里</p>
  <p>.container 样式类提供了带有响应固定宽度容器</p>
</div>
</body>
</html>

运行一下

下面的实例显示了基本 Bootstrap 页面（带有全宽度容器）的代码:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>这个部分在 .container-fluid 里</p>
  <p>.container-fluid 样式类提供了一个完全宽度的容器，跨越视口的整个宽度</p>
</div>
</body>
</html>

运行一下

Bootstrap 入门

什么是 Bootstrap?

Bootstrap 实例

Bootstrap 历史

为什么使用 Bootstrap?

哪里能下载 Bootstrap?

下载 Bootstrap

Bootstrap CDN

百度 CDN:

使用 Bootstrap 创建第一个网页

两个基础的 Bootstrap 页面

实例

实例

分类导航