#BootStrap ##基本概念： 1.一个前端开发的框架 * 框架：一个半成品软件，开发人员可以在框架基础上，再次进行开发 * 好处： 1.定义了很多的css样式和js插件，我们开发人员直接可以使用这些样式 和插件丰富的页面效果 2.效应式布局 同一套页面可以兼容不同分辨率设备 2.入门 1.下载bootstrap 2.在项目中将这三个文件复制 3.创建html页面，引入必要的资源文件 儿子
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <!--<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>--> <![endif]--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1> </body> </html>##响应式布局 * 同一套页面可以兼容不同分辨率的设备 * 实现：依赖于栅格系统：将一行分为平均分成12个格子，可以指定元素占几个格子 * 步骤: 1.定义容器，相当于之前的table *容器分类： 1.container 两边留白 2.container.fluid：100%宽度 2.定义行，相当于之前的tr 3.定义元素 指定该元素在不同设备上所占格子的数目.样式：col.设备代号.格子数目 *设备代号 四种： xs：超小屏幕 手机 (<768px) sm:小屏幕 平板 (≥768px) md:中等屏幕 桌面显示器 (≥992px) lg:(≥992px) 大屏幕 大桌面显示器 (≥1200px) *注意 1.一行中如果格子数目超出12，则超出部分自动换行 2.栅格类属性可以向上兼容，栅格类适用于与屏幕宽度大于或等于分界点大小的设备 3.如果真实设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素沾满一整行
##CSS样式和js插件 全局CSS样式 * 按钮：class=“btn btn-default” * 图片 * class=“img-responsive”:图片在任意尺寸都占100% * 图片形状方的 * 圆的 * 相框 * * 表格 * 表单 组件 * 导航条 * 分页条 插件 *轮播图
