Sematic UI框架的学习-button样式(2)
2024-05-30 22:54:10
Sematic UI - button
接着上次的内容Sematic UI框架的学习-button样式(1)接下来说一下按钮的一些变形
按钮的激活和禁用状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title>
</head>
<body><button class="ui button">标准</button><button class="ui active button">激活</button><button class="ui disabled button">禁用</button>
</body>
</html>
效果如下：
按钮的左右浮动状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title></head>
<body><!-- left floated:左偏按钮right floated:右偏按钮--><button class="ui left floated button">向左</button><button class="ui right floated button">向右</button>
</body>
</html>
效果如下：
按钮的部分样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title></head>
<body><!-- fluid: 满行按钮compact:紧凑按钮--><button class="ui fluid button">满行</button> <button class="ui compact button">紧凑</button><button class="ui button">普通</button>
</body>
</html>
效果如下：
一些商标按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title></head>
<body><!-- 一些商标按钮 --><button class="ui facebook button"><i class="facebook icon"></i>Facebook</button><button class="ui twitter button"><i class="twitter button">Twitter</i></button><button class="ui google plus button"><i class="google plus icon"></i>Google plus</button><button class="ui vk button"><i class="vk icon"></i>VK</button><button class="ui youtube button"><i class="youtube icon"></i>Youtube</button></body>
</html>
效果如下：
设置圆形按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title>
</head>
<body><!-- circular圆形按钮 --><button class="ui circular teal icon button"><i class="setting icon"></i></button><button class="ui circular red icon button"><i class="youtube icon"></i></button><button class="ui circular blue icon button"><i class="vk icon"></i></button><button class="ui circular yellow icon button"><i class="google plus icon"></i></button><button class="ui circular vk button"><i class="vk icon"></i></button>
</body>
</html>
效果如下：
紧贴的按钮（attached）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title>
</head>
<body><!-- attached 就是起到一个连附的作用 --><!-- 上下紧贴的两个按钮 --><div class="ui top attached button">Top</div><div class="ui attached segment">123456789</div><div class="ui bottom attached button">Bottom</div><br><br><br><!-- 左右紧贴的按钮 --><div class="ui left attached button">左</div><div class="ui right attached button">右</div>
</body>
</html>
效果如下：
buttons容器的设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><title>博客</title>
</head>
<body><!-- 使用div时用buttons作为class可以做按钮的容器，默认为横向排列,加入vertical可以改为纵向排列 --><!-- 纵向排列 --><div class="ui vertical buttons"><div class="ui button">A</div><div class="ui button">A</div><div class="ui button">A</div></div><br><br><!-- 横向排列 --><div class="ui buttons"><div class="ui button">A</div><div class="ui button">A</div><div class="ui button">A</div></div><br><br><!-- icon buttons--><div class="ui icon buttons"><div class="ui button"><i class="play icon"></i></div><div class="ui button"><i class="pause icon"></i></div><div class="ui button"><i class="shuffle icon"></i></div></div><br><br><!-- 容器里的button可以自由设置样式 --><div class="ui buttons"><button class="ui red basic button">One</button><button class="ui green basic button">Two</button>、<button class="ui yellow basic button">Three</button></div><br><br><!-- buttons中可以加入div(class 为 or或者and) --><div class="ui buttons"><button class="ui red button"><i class="goohle plus icon"></i></button><div class="or"></div><button class="ui green button"><i class="vk icon"></i></button></div>
</body>
</html>
效果如下：
Sematic UI框架的学习-button样式(2)相关推荐
- Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架 在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
- Android 需要学习的UI框架
Android需要了解学习的UI框架等 UI Awesome-MaterialDesign - MaterialDesignCenter改名为Awesome-MaterialDesign,优化了布局, ...
- 不断学习UI框架的写法
在web开发的过程中,我们会需要用到很多大大小小的插件,比如文本框,下拉树,下拉框等等各种各样的都需要.或许在开发的网页中会用到同一种插件来满足各种各样复杂的业务逻辑,比如简单的一个下拉树,有的地方需 ...
- 带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言 在我们前端的开发中经常会使用到各种 ui 框架 下面这两个是比较火的,也是我常用的两个ui框架. 问题描述 但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
- 使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式
使用UI框架时 css不生效 完美解决避免污染全局样式 使用前端UI框架时 在页面上单独修改css 但是不生效 都是在 <style scoped> </style>这样的模式 ...
- 修改taro-ui的样式，在自定义组件中使用taro-ui，修改ui框架样式
其实修改ui框架的样式还是很容易碰见的,但是每个框架处理的方式可能还有点不太一样, taro编译出来的小程序样式. addGlobalClass 添加这个 只能让我们修改页面中的taro-ui 样式 ...
- 手把手学习Android的 Facebook Litho UI框架---（一）入门篇
1.什么是Litho? Litho是Facebook推出的一套高效构建Android UI 的声明式框架,主要 目的是提升RecyclerView复杂列表的滑动性能和降低内存的使用. Litho是一套 ...
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
最新文章
- 湖南省第八届大学生计算机程序设计竞赛1115: 最短的名字（模拟）
- 怎么给mysql用户添加权限_MySQL下添加用户以及给予权限的实现
- 函数--函数的快速体验
- 数据结构——图的深度遍历
- 图表样式无法实现个性化定制？这个ECharts插件解锁多图表样式
- DeOccNet：国防科大提出阵列相机去除前景遮挡成像新方法
- spikingjelly中的ANN2SNN程序20201221是好使的
- Mysql like ' ' 会不会用到索引
- mono webservice问题请教
- Java实现冒泡排序算法
- Android源码下载编译（TI）
- 开源框架ZedGraph的使用
- IEEE 会议论文的参考文献
- 玩游戏显示服务器不稳定,FPS不稳定是什么原因？玩游戏FPS低怎么办？
- yamada算法_脉宽调制中的颤振算法
- Windows 入侵痕迹清理技巧
- 游戏分类与热点探索——【作业１】
- b站尚硅谷springmvc学习视频：springmvc文档
- 如何在Dockerfile中发表评论？
- 【工具】BT - 比特彗星（端口监听（UPnP、ipv6、防火墙）、反吸血、tracker、杀毒）
热门文章
- Unity3d 游戏汉化之IL注入文本替换--木石世纪
- 问题：所有播放器打开均提示网络加载失败，有时候浏览器还打不开网页
- 2022年8月11日：使用 ASP.NET Core 为初学者构建 Web 应用程序--使用 ASP.NET Core 控制器创建 Web API（没看懂，需要再看一遍）
- 使用JQuery快速高效制作网页交互特效第二章所有上机
- 【读书笔记】金字塔原理-构建金字塔的序言
- 苹果cms海螺大橙子首途v7模板源码
- 搭建文件服务器或nas免费版,nas文件服务器搭建
- Jeffrey Dean联署论文 The Case for Learned Index Structures
- 字母缩写对应的世界各国家及其官方语言java工具类
- Metaverse 元宇宙入门-06-Interchange Tools + Standards and the Metaverse 交换工具+标准和元界