前端框架BootStrap
前端框架BootStrap
1.BootStrap简介
2.BootStrap使用步骤
3.BootStrap栅格系统
4.BootStrap全局样式
5.BootStrap组件
6.BootStrap插件
1.BootStrap简介
(1)Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
(2)中文官网: https://www.bootcss.com/
(3)使用BootStrap框架可以快速布局响应式网页
注意：响应式网页指的是：可以根据使用者的设备自动识别屏幕宽度并调整布局，使网页在不同环境(系统平台、屏幕尺寸、屏幕定向等)均可获得较佳的浏览展示的网页。
2.BootStrap使用步骤
(1) 引入： BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
(2) 调用类：使用BootStrap提供的样式
(3)container：响应式布局版心类
3.BootStrap栅格系统
（1）栅格化是指将整个网页的宽度分成若干等份
（2）BootStrap3默认将网页分成12等份
（3）.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
（4）.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
（5）分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
(1)container类自带间距15px;
(2)row类自带间距-15px
例如：
<!--需求：大屏：一行排列4个内容；中屏：一行排列2个内容--> <div class="container"> <div class="col-lg-3 col-md-6">1</div> <div class="col-lg-3 col-md-6">2</div> <div class="col-lg-3 col-md-6">3</div> <div class="col-lg-3 col-md-6">4</div> </div>
4.BootStrap全局样式
5.BootStrap组件
6.BootStrap插件
插件的使用步骤
（1） 先引入BootStrap样式
（2）再引入js文件：jQuery.js + BootStrap.min.js
原因：因为bootstrap用到了jquery中的功能
