本篇文章给大家带来的内容是关于bootstrap框架的详细讲解（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
（免费课程推荐：bootstrap教程）
Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
为什么要使用Bootstrap？
在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
Bootstrap下载
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。
Bootstrap环境搭建
目录结构：
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js处理依赖
由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
Bootstrap全局样式
排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。
我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。
标题相关
标题
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
一级标题36px 二级标题30px 三级标题24px 四级标题18px 五级标题14px 六级标题12px
副标题
一级标题小标题
文本对齐
文本左对齐
文本居中
文本右对齐
文本大小写
Lowercased text.
Uppercased text.
Capitalized text.
表格
| Class | 描述 |
| .table-striped | 条纹状表格 |
| .table-bordered | 带边框的表格 |
| .table-hover | 鼠标悬停变色的表格 |
| .table-condensed | 紧缩型表格 |
| .table-responsive | 响应式表格 |
状态类
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
表单
内联表单
表单状态
带图标的表单
按钮
Link
按钮样式
按钮大小
图片
图片形状
辅助类
文本颜色
...
...
...
...
...
...
背景颜色
...
...
...
...
...
关闭按钮
下拉三角
快速浮动
......
内容块居中
...
清除浮动
...
显示与隐藏
......
常用Bootstrap组件
字体图标
下拉菜单
按钮组
输入框俎
导航
分页
标签和徽章
页头
缩率图
进度条
模拟滚动的进度条：
var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);
function setValue() {
if (width === 100)
{
clearInterval(theID);
} else {
width++;
$d1.css("width", width+"%").text(width+"%");
}
}
响应式开发
为什么要进行响应式开发？
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。
什么是响应式？
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。
用到的技术：
CSS3@media查询
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
device-width, device-height 屏幕宽、高
width,height 渲染窗口宽、高
orientation 设备方向
resolution 设备分辨率
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
不同的媒体使用不同的stylesheet
viewport
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
Bootstrap的栅格系统
container
row
column
注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
JavaScript插件
下面常用的Bootatstrap自带插件
模态框
模态框的HTML代码放置的位置
务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
HTML代码：
注意：
通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
通过在 .modal-bodyp中设置 .row可以使用Bootstrap的栅格系统。
调用方式：
1.通过data属性
通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。
2.通过JS代码调用
$('#myModal').modal("show"); // 显示
$('#myModal').modal("hide") // 隐藏
常用参数：
| 名称 | 可选值 | 默认值 | 描述 |
|---|---|---|---|
| backdrop | true/false/'static' | true | false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框 |
| keyboard | true/false | true | 键盘上的 esc 键被按下时关闭模态框。 |
| show | true/false | true | 模态框初始化之后就立即显示出来。 |
方法：
$('#myModal').modal({
keyboard: false
})
轮播图
HTML代码：
可以在为图片添加介绍信息：
...
...
方法：
设置切换间隔为2秒，默认是5秒。
$('.carousel').carousel({
interval: 2000
})
其他常用插件
FontAwesome字体
Font Awesome
参考网址 : https://fontawesome.com/?from=io
详细用法参见上述站点的Examples。
SweetAlert系列
SweetAlert
参考网址 : https://github.com/t4t5/sweetalert
SweetAlert2
参考网址 : https://github.com/sweetalert2/sweetalert2
SweetAlert 到 SweetAlert2 升级指南
参考网址 : https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
示例：
基本使用：
swal("标题","内容","success);
使用SweetAlert在Ajax提交成功（done）或失败（error）时分别提示不用的内容。
这是更新之前版本的写法
function deleteRecord(recordID) {
swal({
title: "确定要删除这个产品吗？",
text: "删除后可就无法恢复了。",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要删除！",
confirmButtonColor: "#ec6c62",
cancelButtonText: "容我三思"
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
type: "post",
url: "/delete/",
data: {"id": recordID},
success: function (data) {
var dataObj = $.parseJSON(data);
if (dataObj.status === 0) { //后端删除成功
swal("删除成功", dataObj.info, "success");
$("#p-" + recordID).remove() //删除页面中那一行数据
} else {
swal("出错啦。。。", dataObj.msg, "error"); //后端删除失败
}
},
error: function () { // ajax请求失败
swal("啊哦。。。", "服务器走丢了。。。", "error");
}
})
});
}更新之后用这么写
swal({
title: "这里写标题",
text: "这里放内容",
icon: "warning", // 这里放图标的类型（success,warning,info,error）
buttons: {
cancel: {
text: "容我三思",
visible: true,
value: false
},
confirm: {
text: "我就是要删除"
}
}
}).then(function (isConfirm) {
if (isConfirm){
swal("你死定了", {button: "确认"});
}Toastr通知
toastr["success"]("你已经成功被绿!")
jQueryLazyload懒加载
示例：
懒加载示例 ...
