web前端 (17)插件开发+BootStrap

目录
插件图表插件 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

列表样式:

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: