目录
插件
图表插件 Echarts
BootStrap
插件开发
图表插件 Echarts
使用步骤:
-
引入插件的JS文件
案例:
<script src="js/echarts.min.js"></script>
<body onload="load()">
<div id="chart" style="width:600px;height:400px"></div>
<script>
function load(){
var div = document.getElementById("chart");
//传入div , 创建图表对象
var chart = echarts.init(div);
//4. 编写图标对象的配置信息(JSON对象)
var option = {
title : {
text: '孙宽常去洗脚店消费统计',
subtext: '真实数据',
x:'right'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['洗脚','捏脚','按摩','推油','拔罐','皮鞭','低温蜡','辣椒油','风油精']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:588, name:'洗脚'},
{value:1588, name:'捏脚'},
{value:2320, name:'按摩'},
{value:999, name:'推油'},
{value:666, name:'拔罐'},
{value:888, name:'皮鞭'},
{value:333, name:'低温蜡'},
{value:2888, name:'辣椒油'},
{value:2888, name:'风油精'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//5. 将配置的JSON对象, 设置给图标对象
chart.setOption(option);
}
</script>
自定义 弹出层插件
编写步骤:
1. 将设计好的视觉样式, 先通过html文件 编写出来
2. 将上述设计好的元素的样式,全部修改为内联样式 (元素的style属性中)
3. 将上述设计好的插件效果, 转换为JS中的字符串形式
4. 通过编写函数, 向网页中 动态的添加上述的字符串代码 !
BootStrap
2018/10/18 14:21:24
简介
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的
是一个基于HTML、CSS、JavaScript 的开源框架。
该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
特点:
Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
跨设备、跨浏览器
响应式布局
提供的全面的组件
基于 jQuery 插件
支持 HTML5、CSS3 HTML5 语义化标签和 CSS3
支持 LESS 动态样式
使用步骤:
1. 下载用于生产环境的 框架文件包
- css文件夹
- fonts文件夹
- js文件夹
2. 将上述的三个文件夹, 解压并复制到项目的webContent目录下
3. 将jquery.js文件, 复制到js文件夹下
4. 在使用框架的位置 , 引入如下三个文件:
- bootstrap的核心样式文件
<link rel="stylesheet" href="css/bootstrap.css">
- jquery框架
<script src="js/jquery.js"></script>
- bootstrap的核心脚本文件
<script src="js.bootstrap.min.js"></script>
默认页面排版的变化
- 所有文字默认为 14px
- line-height 行高设置为了20px
- p标签取消了上外边距 , 指定了下外边距为10px(二分之一行高)
- 文本颜色 为 #333
标题标签样式
可以通过标题标签编写标题 , 也可以通过class=h1 – h6 来完成标题的编写 !
内联文本样式
元素或.mark 类//添加标记
兄弟连Java-Bootstrap 框架教程
//各种加线条的文本
兄弟连Java-Bootstrap 框架教程 //删除的文本
兄弟连Java-Bootstrap 框架教程 //无用的文本
兄弟连Java-Bootstrap 框架教程 //插入的文本
兄弟连Java-Bootstrap 框架教程 //效果同上，下划线文本
//各种强调的文本
兄弟连Java-Bootstrap 框架教程 //标准字号的 85%
兄弟连Java-Bootstrap 框架教程 //加粗 700
兄弟连Java-Bootstrap 框架教程 //倾斜
文本对齐方式
class:
- text-left : 文本居左
- text-center : 文本居中
- text-right : 文本居右
案例:
p class=“text-left”>锄禾日当午
汗滴和下土
还有盘中餐
大小写文本
class:
- text-lowercase : 小写
- text-uppercase : 大写
- text-capitalize : 首字母大写
案例:
BOOTstrap
BOOTstrap
BOOTstrap
列表样式:
class:
- list-unstyled : 取消前置文字或图标 以及 将列表左侧内边距设置为0
- list-inline : 横向排列 , 取消了前置的文字和图标
案例:
- 白日依山尽
- 造血干细胞
- 班长兼学委
- 平方差公式
- 青青河边草
- 离离原上草
<ul class="list-unstyled">
<li>白日依山尽</li>
<li>造血干细胞</li>
<li>班长兼学委</li>
<li>平方差公式</li>
<li>青青河边草</li>
<li>离离原上草</li>
</ul>
<ul class="list-inline">
<li>白日依山尽</li>
<li>造血干细胞</li>
<li>班长兼学委</li>
<li>平方差公式</li>
<li>青青河边草</li>
<li>离离原上草</li>
</ul>
代码块样式
// 内联代码
public static …
//用户输入
请输入:alt+f4
//代码块
一二三四五, 上山打老虎 . 老虎没打到 , 打到小松鼠 !
//代码块2
前景后景色 掌握
前景色(文本颜色)
class
- text-muted : 柔和灰
- text-success : 成功绿
- text-info : 信息蓝
- text-primary : 主要蓝
- text-warning : 警告黄
- text-danger : 危险红
后景色(背景颜色)
class (部分后景色会修改前景色) :
- bg-success : 成功绿
- bg-info : 信息蓝
- bg-primary : 主要蓝
- bg-warning : 警告黄
- bg-danger : 危险红
案例:
- 床前明月光
- 地上鞋几双?
- 床上哔哔哔
- 其中哔哔哔
- 哈哈哈哈哈
- 嘿嘿嘿嘿嘿
表格样式 ***
基本表格样式:
class : table
案例:
基本表格样式
| 图书编号 | 图书名称 | 图书作者 | 图书简介 | 图书价格 |
|---|---|---|---|---|
| 10001 | 武术讲义-平沙落雁 | 小泽马老师 | 讲述了古武招式 平沙落雁的精髓 … | 98 |
| 10002 | 武术讲义-老树盘根 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 298 |
| 10003 | 武术讲义-观音坐莲 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 998 |
| 10004 | 武术讲义-一阳指 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 8 |
| 10005 | 武术讲义-冈本拔刀术 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 78 |
条纹表格样式:
class : table table-striped
案例:
条纹表格样式
| 图书编号 | 图书名称 | 图书作者 | 图书简介 | 图书价格 |
|---|---|---|---|---|
| 10001 | 武术讲义-平沙落雁 | 小泽马老师 | 讲述了古武招式 平沙落雁的精髓 … | 98 |
| 10002 | 武术讲义-老树盘根 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 298 |
| 10003 | 武术讲义-观音坐莲 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 998 |
| 10004 | 武术讲义-一阳指 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 8 |
| 10005 | 武术讲义-冈本拔刀术 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 78 |
带有边框的表格样式
class : table table-bordered
案例:
带有边框的表格样式
| 图书编号 | 图书名称 | 图书作者 | 图书简介 | 图书价格 |
|---|---|---|---|---|
| 10001 | 武术讲义-平沙落雁 | 小泽马老师 | 讲述了古武招式 平沙落雁的精髓 … | 98 |
| 10002 | 武术讲义-老树盘根 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 298 |
| 10003 | 武术讲义-观音坐莲 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 998 |
| 10004 | 武术讲义-一阳指 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 8 |
| 10005 | 武术讲义-冈本拔刀术 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 78 |
鼠标悬停显示激活样式
class : table table-hover
案例:
鼠标悬停激活
| 图书编号 | 图书名称 | 图书作者 | 图书简介 | 图书价格 |
|---|---|---|---|---|
| 10001 | 武术讲义-平沙落雁 | 小泽马老师 | 讲述了古武招式 平沙落雁的精髓 … | 98 |
| 10002 | 武术讲义-老树盘根 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 298 |
| 10003 | 武术讲义-观音坐莲 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 998 |
| 10004 | 武术讲义-一阳指 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 8 |
| 10005 | 武术讲义-冈本拔刀术 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 78 |
给tr单独指定颜色值
class:
- active : 激活样式
- success : 成功绿
- info : 信息蓝
- warning : 警告黄
- danger : 危险红
- sr-only : 隐藏不显示
案例:
给tr单独指定颜色值
| 图书编号 | 图书名称 | 图书作者 | 图书简介 | 图书价格 |
|---|---|---|---|---|
| 10001 | 武术讲义-平沙落雁 | 小泽马老师 | 讲述了古武招式 平沙落雁的精髓 … | 98 |
| 10002 | 武术讲义-老树盘根 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 298 |
| 10003 | 武术讲义-观音坐莲 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 998 |
| 10004 | 武术讲义-一阳指 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 8 |
| 10005 | 武术讲义-冈本拔刀术 | 小泽马老师 | 讲述了古武招式 哔哔哔哔的精髓 … | 78 |
文字图标样式
将class值设置给span元素
案例:
更多的class:
1764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
