BootStrap简介
1、什么是bootstrap?
简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的。
2、特点
移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件
3、为什么要学习Bootstrap
由于Bootstrap的普及率非常之高，至少在CSS UI库这个领域的地位是至今没有任何UI库可以撼动的。而且它本身就是基于CSS编写的，对于一个Web前端开发工程师来说Bootstrap是我们必须要学习了解的一个UI库。
4、安装与使用
直接在官网里下载 https://v3.bootcss.com/getting-started/ （我是用的是v3.3.7版本）
下载完解压之后
保留这几个重要文件即可以入门使用BootStrap 直接将相关文件导入项目中
使用bootStrap基本结构
代码语言：javascript复制<!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响应式页面</title>
<!-- Bootstrap核心样式文件 （必须）-->
<link href="lib/bootstrap/css/bootstrap.css" rel="nofollow noopener" rel="stylesheet">
<!-- Bootstrap默认主题样式文件 （可选）-->
<link href="lib/bootstrap/css/bootstrap-theme.css" rel="nofollow noopener" rel="stylesheet">
<!--导入你自己样式或者其他文件-->
<link href="css/index.css" rel="nofollow noopener" rel="stylesheet">
<!-- 引入jQuery -->
<script src="lib/jquery/jquery.js"></script>
<!-- 引入所有Bootstrap的JS插件 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 引入自己的JS文件 -->
<script src="js/index.js"></script>
</head>
<body>
<h2>你好，世界！</h2>
</body>
</html>BootStrap使用
组件简单使用的案例
1.按钮
代码语言：javascript复制<!--按钮-->
<button>点我</button>
<button class="btn btn-danger">百度一下</button>
<button class="btn btn-warning">谷歌一下</button>
<button class="btn btn-success test">搜狗一下</button>
2.进度条
代码语言：javascript复制<!--进度条-->
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
3.字体图标
代码语言：javascript复制<!--字体图标-->
<span class="glyphicon glyphicon-envelope" style="font-size: 240px; color: rebeccapurple;"></span>
<span class="glyphicon glyphicon-music" style="font-size: 50px;color: aqua"></span>
<span class="glyphicon glyphicon-earphone" style="font-size: 50px"></span>
4.面板
代码语言：javascript复制<!--面板-->
<div class="panel panel-default panel-warning">
<div class="panel-heading">面板的头部</div>
<div class="panel-body">面板的内容</div>
<div class="panel-footer">面板的尾部</div>
</div>
5.模态框
代码语言：javascript复制<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
</div>
<div class="modal-body">
Hello World!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
6.轮播图
代码语言：javascript复制<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 小圆点 -->
<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>
<!-- 轮播的图片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/lb.jpg" alt="...">
</div>
<div class="item">
<img src="img/lb1.jpg" alt="...">
</div>
<div class="item">
<img src="img/lb2.jpg" alt="...">
</div>
</div>
<!-- 轮播的控件 -->
<a class="left carousel-control" href="#carousel-example-generic" rel="nofollow noopener" rel="nofollow noopener" 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" rel="nofollow noopener" rel="nofollow noopener" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
注： 1.这些案例和组件的使用都要去参考官网的API https://v3.bootcss.com/components/ 2.样式的用可以根据自己的需要改变，关键是看懂API 3.Bootstrap中的组件和样式大部分都是响应式布局，支持pc端和移动端 4.Bootstrap是依赖于jQuery库的，所以使用BootStrap时必须导入jQuery库
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格系统主要用于排版和进行响应式布局 示例：
代码语言：javascript复制<div class="container">
<!-- 栅格系统：能把页面划分成十二列 -->
<div class="row">
<div class="col-md-8">
<p class="text-muted">
撩课学院是秣码教育旗下线上教育品牌。成立于2017年06月，集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式，真正解决开发者在成长过程中的各种技术瓶颈，帮助学生在IT职场取得成功。</p>
<p class="text-muted">撩课学院明星讲师云集，包括李南江、叶建华、王顺子、高新强等十几位专业实战型讲师团队，悉心打造六大综合体系课程，细致且全面，全面助力学生成长。</p>
<p class="text-muted">撩课学院课程体系完善，包含HTML5 全栈开发、Python 人工智能、JavaEE、Go语言 区块链、UI/UE设计、新媒体、电商运营等系列课程。</p>
</div>
<div class="col-md-4">
<img src="imgs/team.png" alt="核心团队" class="img-rounded img-responsive">
</div>
</div>
</div>
栅格系统响应式布局底层实现的两种方法
1.媒体查询 2.jQuery的屏幕监听
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
height: 40px;
margin: 0 auto;
background-color: rebeccapurple;
}
/*媒体查询*/
@media screen and (max-width: 768px){
.container{
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.container{
width: 750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
width: 970px;
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container"></div>
<script>
/*
屏幕监听
window.addEventListener("load", function () {
// 1. 获取常量
let container = document.querySelector(".container");
let clientW = 0;
resize();
// 2. 监听窗口的大小变化
window.addEventListener("resize", resize);
function resize() {
// 2.1 获取改变后的宽度
clientW = window.innerWidth;
// console.log(clientW);
// 2.2 判断
if(clientW >= 1200){ // 超大屏幕
container.style.width = "1170px";
}else if(clientW >= 992){ // 大屏幕
container.style.width = "970px";
}else if(clientW >= 768){ // 小屏幕
container.style.width = "750px";
}else { // 超小屏幕
container.style.width = "100%";
}
}
});
*/
</script>
</body>
</html>标签页
代码语言：javascript复制<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" rel="nofollow noopener" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a href="#profile" rel="nofollow noopener" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" rel="nofollow noopener" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" rel="nofollow noopener" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
<li role="presentation"><a href="#s1" rel="nofollow noopener" aria-controls="settings" role="tab" data-toggle="tab">哈哈哈</a></li>
<li role="presentation"><a href="#s2" rel="nofollow noopener" aria-controls="settings" role="tab" data-toggle="tab">呵呵呵</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<img src="img/s1.jpg" alt="">
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>好借好还或或</h2>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
<p>今天的天气很好!</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<img src="img/s2.jpg" alt="">
</div>
<div role="tabpanel" class="tab-pane" id="s1">
<h2>好借好还或或</h2>
</div>
<div role="tabpanel" class="tab-pane" id="s2">
<p>今天的天气很好!</p>
</div>
</div>
</div>
总结
在BootStrap的学习中，大部分都是依赖于使用API，利用里面的框架和案例来实现自己想要的功能和布局，所以学会看文档很重要，不仅要学会看文档，还要熟悉使用里面常用的属性，模块，控件。这是我第一次学习和使用响应式布局的框架，多加摸索，就是在学习，以后自己使用属于自己的一套框架。 下一篇博客，我用BootStrap基础来实现一整个响应式网页的布局。
