5-Bootstrap

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提供了很多样式

1. 表格
2. 表单
3. 按钮
4. 图片
5. 辅助类

这些样式只需要导入bootstrap的css文件即可

2.3 Bootstrap组件

Bootstrap提供了一系列组件

1. 字体图标
2. 下拉菜单
3. 按钮式下拉菜单
4. 输入框组
5. 导航
6. 导航条 等等

Bootstrap组件需要配合bootstrap提供的js bootstrap的js依赖于jquery

2.4 Bootstrap内置插件

1. 模态框
2. 标签页
3. 工具提示
4. 弹出框
5. 警告框
6. 轮播图 等等

Bootstrap插件包含了开发过程中有可能使用的一些组件

注意：Bootstrap官方文档中例子非常完善，可以直接从官方文档中查找需要使用的样式、组件和插件

3.Bootstrap合作插件

Bootstrap有很多基于bootstrap开发的插件 需要单独下载js文件

如日期选择、开关按钮、下拉菜单、富文本编辑器等

Bootstrap工具

下载地址：http://www.ibootstrap.cn/ 可视化工具

注意：使用此工具时注意是否跟使用的bootstrap版本匹配

4. 图表插件

1. 图表插件在国内主要使用由百度提供的Echarts
2. Echarts通过原生js绘制图表，文件小，不需要依赖其他文件，开发人员设置json格式的参数完成个性化图表绘制
3. Echarts可以在官网下载所需要的图表组件js文件，参考官方文档demo

下载地址：https://echarts.apache.org/zh/index.html

其它UI库

layui
nowui