Bootstrap 入门


Bootstrap 是什么?

  • Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
  • Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,助你快速设计和自定义响应式、移动设备优先的站点。
  • Bootstrap 使您能够轻松创建响应式网页设计

什么是响应式网页设计

响应式网页设计是指创建网页可以自动调整,使其在所有设备上看起来都很好,从小型手机到大型台式机。

Bootstrap 实例

<div class="jumbotron text-center">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>调整这个响应页面的大小,看看效果!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
亲自试一试 »

Bootstrap 历史

Bootstrap 是由 TwitterMark OttoJacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

2014 年 6 月,Bootstrap 是 GitHub 上排名第一的项目!


为什么使用 Bootstrap?

Bootstrap 的优点:

  • 容易上手:只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。

  • 响应式设计:Bootstrap 可以根据不同平台(手机、平板电脑和台式机)进行调整。

  • 移动优先:在 Bootstrap 中,自适应移动端是框架的核心部分。

  • 浏览器兼容性:Bootstrap 4 兼容所有主流浏览器(Chrome、Firefox、Internet Explorer 10+,Edge、Safari 和 Opera)。 如果您需要支持 IE9 及以下版本,请使用 Bootstrap3。


Bootstrap 安装使用

我们可以通过以下两种方式来安装 Bootstrap:


下载 Bootstrap

你可以去官网 getbootstrap.com,下载 Bootstrap 资源库。



Bootstrap CDN

国内推荐使用 Staticfile CDN 上的库:

Bootstrap CDN:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

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

jQuery
Bootstrap 将 jQuery 用于 JavaScript 插件(如modals、工具提示等)。但是,如果只使用引导的 CSS 部分,就不需要 jQuery。


创建第一个 Bootstrap 页面

1. 添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明,并设置对应编码:

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

2. Bootstrap 3 移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 <head> 之中添加 <viewport meta> 标签,如下所示:

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

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

3. 容器类

Bootstrap 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类:

  1. The .container 类用于固定宽度并支持响应式布局的容器。
  2. The .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
.container
.container-fluid

两个 Bootstrap 页面实例

.container 实例 (带有响应固定宽度容器)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
亲自试一试 »

.container-fluid 实例(带有全宽度容器)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
亲自试一试 »