本文详述了BootStrap的特点，如响应式设计、卓越的兼容性和丰富的组件，并通过实例介绍了其下载与使用、布局容器、栅格系统、表格样式等15个关键点，旨在帮助开发者快速上手并应用于实际项目。
BootStrap前端框架
为所有开发者、所有应用场景而设计。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
官网
Bootstrap中文网3 （当前版本 v3.3.7）
前言
是一套现成的css样式集合，是两个推特员工完成的，可以快速地出一个网页
一、BootStrap特点？
- 简洁、直观、强悍的前端开发框架，html css js工具集，让web开发更加的快速和简单
- 响应式设计、卓越的兼容性、12列网格、样式向导文档
- 丰富的组件
二、下载与使用
1.下载：https://v3.bootcss.com/getting-started/#download
2.下载完成，拷贝dist/css中的bootstrap.min.css到项目css中；拷贝dist/js中的bootstrap.min.js到项目js中
3.下载jQuery.js:http://jquery.com/
4.在html中的基本模板为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面
width指定视区的逻辑宽度
device-width指示视区宽度应该为设备的屏幕宽度
initial-scale指令用于设置web页面的初始缩放比例
initial-scale=1则将显示未经过缩放的web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap的HTML标准模板</title>
<!-- 载入Bootstrap的css -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。 -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
三、布局容器
代码如下（示例）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面
width指定视区的逻辑宽度
device-width指示视区宽度应该为设备的屏幕宽度
initial-scale指令用于设置web页面的初始缩放比例
initial-scale=1则将显示未经过缩放的web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>布局容器</title>
<!-- 载入Bootstrap的css -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!-- 布局容器 .container 1.类用于固定宽度并支持响应式布局的容器。 -->
<div class="container" style="background-color: thistle;height: 500px;">
字体变化不是从最右边开始
</div>
<!-- 2..container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。。 -->
<div class="container-fluid">
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。 -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
四、栅格网格系统
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格网格系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!-- 先布局容器 -->
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素1.col-xs-数值超小屏幕 手机 (<768px)
2.小屏幕 平板 (≥768px)col-sm-数值
3.中等屏幕 桌面显示器 (≥992px) col-md-数值
4.大屏幕 大桌面显示器 (≥1200px)col-lg-数值
-->
<div class="col-md-4 " style="background-color: deepskyblue;">4</div>
<div class="col-md-8" style="background-color: bisque;">8</div>
</div>
<hr>
<!-- 列组合 -->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
<div class="col-md-1" style="background-color: burlywood;">1</div>
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1" style="background-color: darkcyan;">1</div>
</div>
<hr>
<!-- 均分为6份 -->
<div class="row">
<div class="col-md-6" style="background-color:lightblue ;">1</div>
<div class="col-md-6" style="background-color:lightgoldenrodyellow;">1</div>
</div>
<hr>
<!-- 均分为3份 -->
<div class="row">
<div class="col-md-4" style="background-color:green;">1</div>
<div class="col-md-4" style="background-color:fuchsia;">1</div>
<div class="col-md-4" style="background-color:azure;">1</div>
</div>
<!-- 列的总数不能超过12 放不下就会自动换行-->
<hr>
<div class="row">
<div class="col-md-4" style="background-color:brown;">1</div>
<div class="col-md-4" style="background-color:darkcyan;">1</div>
<div class="col-md-5" style="background-color:hotpink;">1</div>
</div>
<hr>
<!-- 列偏移
使用 col-md-offset-* 类可以将列向右侧偏移。
-->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: burlywood;">1</div>
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1" style="background-color: darkcyan;">1</div>
</div>
<hr >
<!-- 列排序 改变列的方向 就是改变左右浮动 通过使用
.col-md-push-往后* 和 .col-md-pull-往前* 类就可以很容易的改变列（column）的顺序
-->
<div class="row">
<div class="col-md-1" style="background-color: mediumslateblue;">1</div>
<div class="col-md-1 col-md-push-1" style="background-color: burlywood;">1</div>
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1 " style="background-color: darkcyan;">1</div>
</div>
<hr >
<!-- 列嵌套可以通过添加一个新的 .row 元素和一系列
.col-sm-* 元素到已经存在的 .col-sm-* 元素内。
被嵌套的行（row）所包含的列（column）的个数不能超过12
（其实，没有要求你必须占满12列）。 -->
<div class="row">
<div class="col-md-6" style="background-color: navajowhite;">
<div class="row">
<div class="col-md-1" style="background-color: salmon;">1</div>
<div class="col-md-9"style="background-color: beige;">9</div>
<div class="col-md-1" style="background-color: lawngreen;">1</div>
<div class="col-md-1" style="background-color: powderblue;">1</div>
</div>
</div>
<!-- 把这两份在均分为12份 -->
<div class="col-md-6" style=" background-color: teal;">
6
</div>
</div>
<hr >
<div class="row">
<!-- 实现自适应效果 在不同设备可以显示不同的列数 -->
<div class="col-md-3 col-sm-6" style="background-color: salmon;">3</div>
<div class="col-md-3 col-sm-6"style="background-color: beige;">3</div>
<div class="col-md-3 col-sm-6" style="background-color: lawngreen;">3</div>
<div class="col-md-3 col-sm-6" style="background-color: powderblue;">3</div>
</div>
</div>
</body>
</html>
五、常用样式
代码如下（示例）：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
