一、Bootstrap介绍
1.什么是bootstrap?
简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。
Bootstrap是基于HTML,CSS,Javascript的
2.特点
移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局）偏UI，综合框架，包含一些常用的UI组件以及一些JS组件
3.Bootstrap的适用场景？
bootstrap适用于偏展示类的网站或者项目
4.Bootstrap的使用方法？
资源网站：bootstrap中文网站：http://www.bootcss.com/
使用方法： ①环境搭建（依赖文件的引入）② 静态结构的满足③功能初始化
注意：bootstrap是基于jquery的！！！
二、Bootstrap栅格系统
1.容器
流体布局：container-fluid (百分百平铺整个页面)
固定布局：container
固定布局根据浏览器不同分辨率，固定尺寸不同，不同阈值对应的宽度如下：
>=1200 width为1170px
>=992 width为970px
>=768 width为750px
<768 为自适应宽度auto
2.什么是bootstrap栅格系统？
Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的强大的混合类
表示行的class: row
表示列的class：
col-lg-*:大型设备台式电脑(>=1200)
col-md-*:中型设备台式电脑(>=992)
col-sm-*:小型设备平板电脑(>=768)
col-xs-*:超小设备手机(<768)
注：("*"可选：1-12之间的任意数字，其它无效)
栅格系统的组合模式：在不同的屏幕下显示不同的排列方式
列偏移
col-[*]-offset-*
含义：表示在对应的屏幕分辨率下偏移多少个栅格
说明：[*]可选：lg/md/sm/xs
*可选：1-12之间的任意数字(其它数字无效)
列排序
col-[*]-push-*: 往后排多少个网格
col-[*]-pull-*: 往前排多少个网格
说明：[*]可选：lg/md/sm/xs
*可选：1-12之间的任意数字(其它数字无效)
注：排序和偏移有什么区别？
(1)offset偏移只能向右偏，排序既可以向右也可以向左。
(2)在有多列存在时，如果一行排不下的时候，offset会换行偏移，而排序会在一行显示
二、Bootstrap模板文件
使用bootstrap写HTML需要导入CSS与JS代码，为了避免每次都要做一些重复工作，可以预先做好一个模版文件。
代码如下：
实例
<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <link href="../static/css/bootstrap.css" rel="stylesheet"> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css --> <title>Bootstrap 101 Template</title> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <!-- https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js --> <script src="../static/js/jquery-3.4.1.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js --> <script src="../static/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、一个适应所有阈值的栅格布局小案例
本例可以自适应所有阈值的视口
实例
<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <link href="../static/css/bootstrap.css" rel="stylesheet"> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css --> <title>Bootstrap 101 Template</title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 bg-info">A</div> <div class="col-lg-8 col-md-6 col-sm-4 col-xs-2 bg-warning">B</div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <!-- https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js --> <script src="../static/js/jquery-3.4.1.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js --> <script src="../static/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、利用bootstrap搭的一个简单布局示例
实例
<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <link href="../static/css/bootstrap.css" rel="stylesheet"> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css --> <title>Bootstrap 101 Template</title> </head> <body> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Hello, world!</h1> <p>你最喜欢的都在这里~</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> </div> </div> <div class="containet"> <div class="row"> <div class="col-md-3"> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> </div> <div class="col-md-6"> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> </div> <div class="col-md-3"> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> </div> </div> <p></p> <div class="row"> <div class="col-md-12"> <ul class="nav nav-tabs"> 关于 <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 分类 <span class="caret"></span> </a> <ul class="dropdown-menu"> ***的电影 </ul> </li> 其它 </ul> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <!-- https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js --> <script src="../static/js/jquery-3.4.1.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <!-- https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js --> <script src="../static/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例