Sematic UI - button
首先在使用Sematic UI框架时,我们需要先引用一写现成的js 和 css,下面是我在网上找到的,大家可以直接拿去使用。
<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>
按钮的形式
<!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 basic button">基础按钮</button>
<!-- 积极按钮 -->
<button class="ui positive button">积极按钮</button>
<!-- 消极按钮 -->
<button class="ui negative 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 button">参照</button>
<!-- mini 最小 -->
<button class="ui mini button">最小</button>
<!-- tiny 微小 -->
<button class="ui tiny button">微小</button>
<!-- small 很小 -->
<button class="ui small button">很小</button>
<!-- medium 中等 -->
<button class="ui medium button">中等</button>
<!-- large 稍大 -->
<button class="ui large button">稍大</button>
<!-- big 很大 -->
<button class="ui big button">很大</button>
<!-- huge 巨大 -->
<button class="ui huge button">巨大</button>
<!-- massive 最大 -->
<button class="ui massive 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 button">标准</button>
<!-- primary 主要-->
<button class="ui primary button">主要按钮</button>
<!-- secondary 次要-->
<button class="ui secondary button">次要按钮</button>
<!-- positive 积极按钮 -->
<button class="ui positive button">积极按钮</button>
<!-- negative 消极按钮 -->
<button class="ui negative button">消极按钮</button>
<br><br>
<!-- 直接设置按钮颜色 -->
<!-- red 红色 -->
<button class="ui red button">红色</button>
<!-- orange 橙色 -->
<button class="ui orange button">橙色</button>
<!-- yellow 黄色 -->
<button class="ui yellow button">黄色</button>
<!-- olive 橄榄色 -->
<button class="ui olive button">橄榄色</button>
<!-- green 绿色 -->
<button class="ui green button">绿色</button>
<!-- teal 水鸭绿 -->
<button class="ui teal button">水鸭绿</button>
<!-- blue 蓝色 -->
<button class="ui blue button">蓝色</button>
<!-- violet 紫罗兰 -->
<button class="ui violet button">紫罗兰</button>
<!-- purple 紫色 -->
<button class="ui purple button">紫色</button>
<!-- pink 粉色 -->
<button class="ui pink button">紫色</button>
<!-- brown 棕色 -->
<button class="ui brown button">棕色</button>
<!-- grey 灰色 -->
<button class="ui grey button">灰色</button>
<!-- black 黑色 -->
<button class="ui grey button">黑色</button>
<br><br>
<!-- inverted 翻转 -->
<button class="ui inverted red button">红色</button>
<button class="ui inverted orange button">橙色</button>
<button class="ui inverted yellow button">黄色</button>
<button class="ui inverted olive button">橄榄色</button>
<button class="ui inverted green button">绿色</button>
<button class="ui inverted teal button">水鸭绿</button>
<button class="ui inverted blue button">蓝色</button>
<button class="ui inverted violet button">紫罗兰</button>
<button class="ui inverted purple button">紫色</button>
<button class="ui inverted pink button">粉色</button>
<button class="ui inverted brown button">棕色</button>
<button class="ui inverted grey button">灰色</button>
<button class="ui inverted black 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>
<style>
body{
width: 1250px;
margin: 100px auto;
}
</style>
</head>
<body>
<!-- 默认左右切换 -->
<div class="ui animated button">
<!-- 直接显示的内容 -->
<div class="visible content">向左</div>
<!-- 隐藏的内容 -->
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<!-- vertical:垂直切换 -->
<div class="ui vertical animated button">
<div class="visible content">向上</div>
<div class="hidden content">
<i class="up arrow icon"></i>
</div>
</div>
<!-- fade渐变显示 -->
<div class="ui fade animated button">
<div class="visible content">显示</div>
<div class="hidden content">隐藏</div>
</div>
</body>
</html>