Sematic UI框架的学习-button样式(2)

最新推荐文章于 2024-05-16 09:36:47 发布

电脑小白路过

最新推荐文章于 2024-05-16 09:36:47 发布

阅读量660

点赞数 1

分类专栏： UI 前端 html 文章标签： ui html 前端

本文链接：https://blog.csdn.net/weixin_52786722/article/details/122558879

版权

UI 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

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>