正文 

当前位置： 首页 > 技术 > java教程

东拼西凑完成一个“前端框架”-按钮(代码片段)

顺势而为 顺势而为     2022-12-24     289

关键词：

目录

写在前面

完成了整体框架的工作，下面开始写一些组件；从按钮开始，设计的思路主要参照 Bootstrap

基类

首先定义按钮的基类 btn

CSS

.btn 
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #fbfbfb;
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 4px;

定义了常规状态后，我们还需要定义按钮的 hover、disabled、active、focus的状态：

.btn:focus 
    outline: 0;


.btn:hover 
    background-color: #f6f6f6;


.btn:active 
    background-color: #eee;


.btn:disabled 
    cursor: not-allowed;
    background: #f5f5f5;

按钮子类

下面是按钮的子类，参照 BootStrap ,我也把按钮的子类区分为 Primary、Success、Danger、Info、Warn、Link，下面以 Primary为例，首先定义一般状态下的按钮样式，由于基类样式已经定义了一些一本属性，所以我们只需要定义 background-color、color、border-color即可：

.btn-primary 
    color: #fff;
    background-color: #1d7ce3;
    border-color: #1d7ce3;

同样定义按钮的 hover、disabled、active、focus 的状态：

.btn-primary:hover 
    color: #fff;
    background-color: #1c70cc;
    border-color: #1c70cc;


.btn-primary:active 
    color: #fff;
    background-color: #1a68bc;
    background-color: #1a68bc;


.btn-primary:disabled 
    background: #74b5fc;

其它


.btn-success 
    color: #fff;
    background-color: #20be44;
    border-color: #20be44;


.btn-success:hover 
    color: #fff;
    background-color: #1da73d;
    border-color: #1da73d;


.btn-success:active 
    color: #fff;
    background-color: #1b9838;
    border-color: #1d9f3b;


.btn-success:disabled 
    background: #74e28d;


.btn-danger 
    color: #fff;
    background-color: #eb2a2a;
    border-color: #eb2a2a;


.btn-danger:hover 
    color: #fff;
    background-color: #d42a2a;
    border-color: #d42a2a;


.btn-danger:active 
    color: #fff;
    background-color: #b92020;
    border-color: #b92020;


.btn-danger:disabled 
    background: #ee7171;


.btn-warning 
    color: #fff;
    background-color: #fbc305;
    border-color: #fbc305;


.btn-warning:hover 
    color: #fff;
    background-color: #eab708;
    border-color: #eab708;


.btn-warning:active 
    color: #fff;
    background-color: #d6a707;
    background-color: #d6a707;


.btn-warning:disabled 
    background: #fadc77;


.btn-link 
    color: #1c70cc;
    border-color: transparent;
    background: transparent;


.btn-link:hover 
    text-decoration: underline;
    background: transparent;


.btn-link:active 
    color: #e53c0a;


.btn-link:disabled 
    background: transparent;
    color: #92c2f6;

Size

定义了按钮的基本状态后，我们还可以定义按钮的大小：

.btn-large 
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 6px;


.btn-mini 
    font-size: 8px;
    padding: 3px 6px;
    border-radius: 2px;

Block

.btn-block 
    display: block;
    width: 100%;

效果

欢迎批评指正

源码地址

https://github.com/LaosanShang/ls-admin-frontend

东拼西凑完成一个“前端框架”-tabs页(代码片段)

目录东拼西凑完成一个后台”前端框架“(1)-?布局?东拼西凑完成一个后台”前端框架“(2)-字体图标东拼西凑完成一个“前端框架”(3)-侧边栏写在前面在完成了侧边栏后，后台的基础架子已经基本出来了；下面是来加入Tab页面，... 查看详情

东拼西凑完成一个“前端框架”-侧边栏(代码片段)

写在前面东拼西凑完成一个后台”前端框架“(1)-?布局?东拼西凑完成一个后台”前端框架“(2)-字体图标项目引入?font-awesome<linkhref="lib/font-awesome/css/font-awesome.min.css"rel="stylesheet"/>iconfont自定义图标<linkhref="... 查看详情

东拼西凑完成一个“前端框架”-布局(代码片段)

前言在如今”大前端“时代，各种前端框架层出不穷，诸如：ant-Designant-DesignProElementiViewLayUI等许多非常优秀的前端框架；本着程序员折腾的精神，于是计划自己去写一套后台的“前端框架”，之所以这个前端框架要用“”，是... 查看详情

东拼西凑完成一个“前端框架”-字体图标(代码片段)

前言还记得以前开发的项目目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用优势轻量级：一个图标字体要比一系列的图... 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：制作一个大按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：制作一个小按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：制作一个超小按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：表示一个危险动作的按钮操作(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：按钮组(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮（Button）插件单选按钮</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：分割按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/boo 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：按钮标签(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮标签</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：按钮大小(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮大小</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：禁用按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

东拼西凑的模板·持续更新中(代码片段)

一.常用算法（应该不需要用到模板的那种常用）1.1快速幂1//https://blog.csdn.net/java_c_android/article/details/558020412longlongquickmod(longlonga,longlongb,longlongm)34longlongans=1;5while(b)//用一个循环从右到左便利b的所有二进制位67if(b&1 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：按钮被点击(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：默认/标准按钮(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="st 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：禁用状态(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮禁用状态</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css 查看详情

吴裕雄bootstrap前端框架开发——bootstrap按钮：激活状态(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-按钮激活状态</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css 查看详情