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

目录
插件
    图表插件 Echarts
BootStrap

插件开发
图表插件 Echarts

使用步骤:

1. 引入插件的JS文件

案例:

自定义 弹出层插件

编写步骤:

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的核心样式文件
    
    -   jquery框架
    
    -   bootstrap的核心脚本文件
    

默认页面排版的变化

1. 所有文字默认为 14px
2. line-height 行高设置为了20px
3. p标签取消了上外边距 , 指定了下外边距为10px(二分之一行高)
4. 文本颜色 为 #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 : 横向排列 , 取消了前置的文字和图标

案例:

• 白日依山尽


• 造血干细胞


• 班长兼学委


• 平方差公式


• 青青河边草


• 离离原上草

    
白日依山尽
    
造血干细胞
    
班长兼学委
    
平方差公式
    
青青河边草
    
离离原上草



    
白日依山尽
    
造血干细胞
    
班长兼学委
    
平方差公式
    
青青河边草
    
离离原上草

代码块样式

// 内联代码
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: