Bootstrap
1. Bootstrap下载使用
网址:https://www.bootcss.com/
注意:Bootstrap下载后包含样式 js 模板 字体等文件 根据不同需要选择使用
2. Bootstrap详解
2.1 Bootstrap栅格系统
2.1.1 栅格介绍
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
- 栅格是Bootstrap的核心所在
- 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。行与列的布局很像table的使用方式,bootstrap吸取了table的优点,使用div+css进行布局
<div class="container">
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-6">right</div>
</div>
</div>
2.1.2 栅格原理
- Bootstrap会检测窗口宽度,根据具有特征的几种宽度可以动态改变显示效果
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
2.1.3 栅格布局细节
- 将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
- 布局时每行不要超过12列,超过会变形。
- 布局时可以不满12列,布局左对齐。如果想让左边产生空白 可以在class中加
.col-分辨率-offset-列数 相当于在左侧加了margin
<div class="col-sm-offset-2 col-sm-10">
</div>
- 如果需要让整体位置不动,某一列自己位移,可以使用
.col-分辨率-push-列数 向右移动
.col-分辨率-pull-列数 向左移动
<div class="col-sm-push-2 col-sm-10">
</div>
2.2 Bootstrap样式
Bootstrap提供了很多样式
- 表格
- 表单
- 按钮
- 图片
- 辅助类
这些样式只需要导入bootstrap的css文件即可
2.3 Bootstrap组件
Bootstrap提供了一系列组件
- 字体图标
- 下拉菜单
- 按钮式下拉菜单
- 输入框组
- 导航
- 导航条 等等
Bootstrap组件需要配合bootstrap提供的js bootstrap的js依赖于jquery
2.4 Bootstrap内置插件
- 模态框
- 标签页
- 工具提示
- 弹出框
- 警告框
- 轮播图 等等
Bootstrap插件包含了开发过程中有可能使用的一些组件
注意:Bootstrap官方文档中例子非常完善,可以直接从官方文档中查找需要使用的样式、组件和插件
3.Bootstrap合作插件
Bootstrap有很多基于bootstrap开发的插件 需要单独下载js文件
如日期选择、开关按钮、下拉菜单、富文本编辑器等
Bootstrap工具
下载地址:http://www.ibootstrap.cn/ 可视化工具
注意:使用此工具时注意是否跟使用的bootstrap版本匹配
4. 图表插件
- 图表插件在国内主要使用由百度提供的Echarts
- Echarts通过原生js绘制图表,文件小,不需要依赖其他文件,开发人员设置json格式的参数完成个性化图表绘制
- Echarts可以在官网下载所需要的图表组件js文件,参考官方文档demo
下载地址:https://echarts.apache.org/zh/index.html
其它UI库
layui
nowui