Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。
1、下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
下载解压后，直接在文件夹内搜索bootstrap，找到bootstrap.min.js 和 bootstrap.min.css 文件，将两个文件及jquery.min.js复制粘贴到新文件夹下。
搜索bootstrap，你会发现有好多bootstrap开头的文件，其中bootstrap.js,bootstrap.css，是bootstrap对应的开发版，开发版内部代码含有很多控制台打印，方便开发者调试及查找问题，同样也导致了其文件大小相对过大，所以项目引用的直接引用min版即可
yk_20201130
如图：
2、教你使用Bootstrap一分钟做成html页面
在同级目录下新建20201130.html文件，如图：
一个使用了 Bootstrap 控件的基本的 HTML 模板20201130.html代码如下所示：
<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world!</h1><script src="jquery.min.js"></script><!-- 包括所有已编译的插件 --><script src="bootstrap.min.js"></script></body></html>
引入jquery.min.js、bootstrap.min.js、bootstrap.min.css文件，至此一个常规的使用Bootstrap 组件的静态 HTML 页面模板就完成了。
ps：注意
1、浏览器加载顺序：自页面头部到底部顺序加载，所以css引入放在<head>标签中，可以防止页面在加载不完全时造成页面乱版；
2、jquery.min.js放置的位置一定要在bootstrap.min.js之前，因为bootstrap组件依赖jquery.min.js实现的，所以切记两个js文件的位置；
用浏览器打开20201130.html效果：
3、基于bootstrap便捷构建html
上面介绍了怎么下载、引用bootstrap,在实际开发项目中构建代码，讲究便捷、高效快速，接下来就介绍一下怎么在一分分钟构建一个页面出来
首先给大家介绍一个工具，bootstrap可视化编辑工具，该工具由菜鸟教程提拱：https://www.runoob.com/try/bootstrap/layoutit/
子曰：“工欲善其事，必先利其器。”只要把这个工具搞明白了， 再多的页面都不在话下，一切都是毛毛雨。
现在开始介绍怎么使用这个工具：
左边
页面布局是指你要将一个页面分为多少分，一般页面都是上、左、中、右、下结构，工具提供了5中方式：
第一种12：全页不划分；
第二种6 6 ：将页面一分为二；
第三种8 4 ：将页面一分为二，左边占三分之二，右边占三分之一；
第四种4 4 4：将页面一分为三；
第五种2 6 4：将页面一分为三，左边占六分之一，中间占二分之一，右边占3分之一；
基本CSS是工具写好现成的css,直接鼠标点住相应的样式拖拽到页面布局上即可完成引用；
工具组件:同上，直接鼠标点住相应的样式拖拽到页面布局上即可完成引用；
JAVASCRIPT：同上，直接鼠标点住相应的样式拖拽到页面布局上即可完成引用；
多说无用下面来实际操作一下
进入工具，工具会默认加载一下页面元素，
只需点击右上角将其删除，然后来按照咱们自己的要求组装页面；删除完后如图：
然后从左边菜单中先拖拽一个页面布局到右边空白，我这里就拖拽一个8 4布局，其他布局自行去尝试一下
然后向布局每个栏位中添加基本CSS、工具组件、JAVASCRIPT，同样是傻白甜式拖拽即可；我这边左边拖拽了一个基本CSS表格，右边拖拽JAVASCRIPT手风琴切换
点击预览
暂定页面元素就这些
然后点击下载
之后会弹出页面所有的代码如图
选中代码然后，复制粘贴 到之前写的20201130.html模板<body></body>内
<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><div class="row clearfix"><div class="col-md-8 column"><table class="table table-hover table-bordered"><thead><tr><th>编号</th><th>产品</th><th>交付时间</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>TB - Monthly</td><td>01/04/2012</td><td>Default</td></tr><tr class="success"><td>1</td><td>TB - Monthly</td><td>01/04/2012</td><td>Approved</td></tr><tr class="error"><td>2</td><td>TB - Monthly</td><td>02/04/2012</td><td>Declined</td></tr><tr class="warning"><td>3</td><td>TB - Monthly</td><td>03/04/2012</td><td>Pending</td></tr><tr class="info"><td>4</td><td>TB - Monthly</td><td>04/04/2012</td><td>Call in to confirm</td></tr></tbody></table><ul class="pagination"><li><a href="#">Prev</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">Next</a></li></ul></div><div class="col-md-4 column"><div class="panel-group" id="panel-505071"><div class="panel panel-default"><div class="panel-heading"><a class="panel-title" data-toggle="collapse" data-parent="#panel-505071" href="#panel-element-310073">Collapsible Group Item #1</a></div><div id="panel-element-310073" class="panel-collapse in"><div class="panel-body">Anim pariatur cliche...</div></div></div><div class="panel panel-default"><div class="panel-heading"><a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-505071" href="#panel-element-908561">Collapsible Group Item #2</a></div><div id="panel-element-908561" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche...</div></div></div></div></div></div></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="jquery.js"></script><!-- 包括所有已编译的插件 --><script src="bootstrap.min.js"></script></body></html>
这样既完成了一个页面，保存一下 在浏览器中预览一下，
一般页面都是左侧菜单，右侧内容，可我们生成的页面刚刚好反过来了，下面来介绍怎么调换左右位置
首先 用文本编辑器打开刚刚粘贴上代码的20201130.html,可以看到左侧既表格代码，右侧既菜单代码，如图：
理论知识：bootstrap css架构把页面分成了12份，并且页面元素是流式布局，流式布局即页面自行排版每横向排满12份，如果页面横向超过12份超出的元素整体换行至下一横向；
在代码中可以看到左侧占了8份，右侧占了4份，整好12份布局，所以如果想左边菜单栏右边表格数据，只需将左右侧代码调换位置即可；
扩展可以看到 bootstrap 流式布局是用CLASS class="col-md-8" 控制，如果嫌弃左边菜单太宽，右边太窄，可以调整一下col-md-8 后面的数字 ，我们来试一下 ，左边菜单分配3成页面即可，右边分配9成页面，代码调整如下：
<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><div class="row clearfix"><!-- 左侧菜单 --><div class="col-md-3 column"><div class="panel-group" id="panel-505071"><div class="panel panel-default"><div class="panel-heading"><a class="panel-title" data-toggle="collapse" data-parent="#panel-505071" href="#panel-element-310073">Collapsible Group Item #1</a></div><div id="panel-element-310073" class="panel-collapse in"><div class="panel-body">Anim pariatur cliche...</div></div></div><div class="panel panel-default"><div class="panel-heading"><a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-505071" href="#panel-element-908561">Collapsible Group Item #2</a></div><div id="panel-element-908561" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche...</div></div></div></div></div><!-- 右侧菜单 --><div class="col-md-9 column"><table class="table table-hover table-bordered"><thead><tr><th>编号</th><th>产品</th><th>交付时间</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>TB - Monthly</td><td>01/04/2012</td><td>Default</td></tr><tr class="success"><td>1</td><td>TB - Monthly</td><td>01/04/2012</td><td>Approved</td></tr><tr class="error"><td>2</td><td>TB - Monthly</td><td>02/04/2012</td><td>Declined</td></tr><tr class="warning"><td>3</td><td>TB - Monthly</td><td>03/04/2012</td><td>Pending</td></tr><tr class="info"><td>4</td><td>TB - Monthly</td><td>04/04/2012</td><td>Call in to confirm</td></tr></tbody></table><ul class="pagination"><li><a href="#">Prev</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">Next</a></li></ul></div></div></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="jquery.js"></script><!-- 包括所有已编译的插件 --><script src="bootstrap.min.js"></script></body></html>
效果如图：
当然boostrap css还有很多样式组合，所以需要大家灵活运用，以上教程只是带大家进门，后面还需大家发挥自己的小脑袋。
end 如有不懂，请在公众号内留言
打赏一下呗
