Home >Web Front-end >JS Tutorial >Detailed explanation of Bootstrap framework (code example)
Detailed explanation of Bootstrap framework (code example)
- 不言forward
- 2018-10-15 17:17:174717browse
This article brings you a detailed explanation (code example) of the Bootstrap framework. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
(Free course recommendation: bootstrap tutorial)
Bootstrap introduction
Bootstrap is Twitter’s open source HTML-based , CSS, JavaScript front-end framework.
It is a set of front-end toolkit designed for rapid development of web applications.
It supports responsive layout and adheres to mobile device priority after the V3 version.
Why use Bootstrap?
Before Bootstrap appeared:
Naming: repetitive, complex, meaningless (it’s hard to come up with a name)
Style: repetitive, redundant, non-standard, Disharmonious
Page: disordered, irregular, disharmonious
After using Bootstrap: Various naming are unified and standardized. The page style is unified and the picture is harmonious.
Bootstrap download
Official address: https://getbootstrap.com
Chinese address: http://www.bootcss.com/
We use the V3 version of Bootstrap, and we downloaded Bootstrap for the production environment.
Bootstrap environment construction
Directory structure:
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.jsHandling dependencies
Since some components of Bootstrap depend on jQuery, so Please make sure to download the corresponding version of jQuery file to ensure that Bootstrap related components run properly.
Bootstrap Global Style
For our commonly used HTML elements such as layout, buttons, tables, forms, pictures, etc., Bootstrap provides global styles.
We can apply Bootstrap styles by setting classes on basic HTML elements, thereby making our pages more beautiful and harmonious.
Title related
Title
<h1>一级标题36px</h1> <h2>二级标题30px</h2> <h3>三级标题24px</h3> <h4>四级标题18px</h4> <h5>五级标题14px</h5> <h6>六级标题12px</h6> <!--除了使用h标签，Bootstrap内置了相应的全局样式--> <!--内联标签应用标题样式--> <span class="h1">一级标题36px</span> <span class="h2">二级标题30px</span> <span class="h3">三级标题24px</span> <span class="h4">四级标题18px</span> <span class="h5">五级标题14px</span> <span class="h6">六级标题12px</span>
Subtitle
<!--一级标题中嵌入小标题--> <h1>一级标题<small>小标题</small></h1>
Text Alignment
<!--文本对齐--> <p class="text-left">文本左对齐</p> <p class="text-center">文本居中</p> <p class="text-right">文本右对齐</p>##Text Case
<!--大小写--> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
Table
| Description | |
| Striped table | |
| With border The table | |
| The table that changes color when hovering the mouse | |
| Compact table | |
| Responsive table |
| Description | |||
|---|---|---|---|
|
|||
|
|||
|
|||
|
|||
|
| 名称 | 可选值 | 默认值 | 描述 |
|---|---|---|---|
| backdrop | true/false/'static' | true | false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框 |
| keyboard | true/false | true | 键盘上的 esc 键被按下时关闭模态框。 |
| show | true/false | true | 模态框初始化之后就立即显示出来。 |
方法：
$('#myModal').modal({
keyboard: false
})
轮播图
HTML代码：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>可以在为图片添加介绍信息：
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>方法：
设置切换间隔为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懒加载
示例：
<!DOCTYPE html>
<html>
<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>懒加载示例</title>
</head>
<body>
<div>
<div><img src="img/0.jpg" alt="" data-original="img/5.jpg" width="600px" height="400px"></div>
...
<div><img src="img/0.jpg" alt="" data-original="img/6.jpg" width="600px" height="400px"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$("img.lazy").lazyload({
effect: "fadeIn",
event: "click"
})
</script>
</body>
</html>
The above is the detailed content of Detailed explanation of Bootstrap framework (code example). For more information, please follow other related articles on the PHP Chinese website!