本文是一篇关于Bootstrap前端框架的简单使用教程，详细介绍了什么是Bootstrap、如何部署和使用，以及Bootstrap的栅格系统、CSS全局样式和常用组件，如按钮、图片边框、表格和导航栏等。通过实例展示Bootstrap如何提升网页开发效率和界面美观度。
前言
我们在写前端网页的时候，如果全部都是自己一点一点的编写，工作量巨大，效率不高，而且界面可能也不一定符合大众审美；因此就有了框架来让开发变得更加的简单，且更有效率，而这Web开发中，Bootstrap就是一个很常用的框架。
目录
一、什么是Bootstrap？
Bootstrap的概念：
Bootstrap （Web框架）：
一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap是目前很受欢迎的一个前端框架，那么什么是框架呢？
框架：
一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
Bootstrap 框架的优点：
1. 其中定义了很多的css样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 使用了响应式布局（同一套页面可以兼容不同分辨率的设备）。
什么是响应式布局呢？简单来说就是在不同大小的屏幕上能够有不同的显示效果，比较好的一个例子就是苹果的官网，当屏幕较大时，导航栏显示的很多，而屏幕较小时，导航栏的内容也相应减少。
例：苹果官网
随着屏幕缩小，页面变化为：
而淘宝的官网就不是响应式布局，而是用了两个网站来区分大小屏幕的，当我们屏幕缩小，大屏幕版的显示方式也不会发生变化。
例：淘宝网触屏版
（注：这里只是区分响应式布局和非响应式布局，没有打广告和鼓励大家买东西，希望大家理性消费哈）
二、使用步骤
刚刚大致讲了一下BootStrap框架和它的优点，接下来就开始简单讲一下BootStrap的使用步骤。
1.下载Bootstrap
BootStrap官网下载地址为：https://v3.bootcss.com/
在官网里，不仅仅有下载地址，还有很多对应的组件的使用方法，但我们使用的时候可以去官网查阅。
2.部署文件
下载后解压后复制三个文件夹css、fonts、js到项目中去
3.创建html页面，引入必要的资源文件
导入上图所勾选的三个文件，代码为：
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
在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 HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
运行结果如下：
接下来我们就来使用Bootstrap框架，看看其具体的组件怎么实现吧！
三、Bootstrap详解
1.栅格系统
在前面已经简单的介绍了Bootstrap的使用，我们知道Bootstrap中使用的是响应式布局，即同一套页面可以兼容不同分辨率的设备，而在Bootstrap中，响应式布局的实现依赖于栅格系统。
实现：将一行平均分成12个格子，可以指定元素占几个格子。
实现步骤如下：
- 定义容器。相当于之前的table,
容器又可分为两类：
（1）container：两边留白
（2）container-fluid：每一种设备都是100%宽度- 定义行。相当于之前的tr 样式：row
- 定义元素。指定该元素在不同的设备上，所占的格子数目。
样式：col-设备代号-格子数目
设备代号：
（1）xs：超小屏幕 手机 (<768px)：col-xs-12
（2）sm：小屏幕 平板 (≥768px)
（3）md：中等屏幕 桌面显示器 (≥992px)
（4）lg：大屏幕 大桌面显示器 (≥1200px)
注意：
- 一行中如果格子数目超过12，则超出部分自动换行。
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
示例：
<!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">
<title>Bootstrap 栅格系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.inner {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 inner">栅格</div>
<div class="col-md-4 inner">栅格</div>
<div class="col-md-4 inner">栅格</div>
</div>
</div>
</body>
</html>
代码表示在中等大小的屏幕每个栅格占4格，前面已经知道了一共有12个格子，那么在屏幕较大时，三个栅格各占1/3。
屏幕较大时：
屏幕较小时，不足12格，每个栅格占满一行：
2.CSS全局样式
（1）按钮
不使用Bootstrap，原样式：
<a href="#">Link</a>
<button type="submit">Button</button>
<input type
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
