Bootstrap-04-常用样式——表单控件(按钮)

最新推荐文章于 2023-10-12 09:59:34 发布

Void_CM

最新推荐文章于 2023-10-12 09:59:34 发布

阅读量504

点赞数

分类专栏： Bootstrap 文章标签： bootstrap button

本文链接：https://blog.csdn.net/baidu_41656912/article/details/114274409

版权

Bootstrap 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

按钮

<!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">
    <title>Button</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 原生按钮 几种不同的实现方式-->
    <h4>原生按钮</h4>
    <button>原生按钮</button>
    <input type="submit" value="原生按钮">
    <input type="button" value="原生按钮">
    <!-- 
        bootstrap 按钮 
        1.使用按钮
            基础样式:.btn
            附加样式(颜色):
                        .btn-primary
                        .btn-info
                        .btn-success
                        .btn-warning
                        .btn-danger
                        .btn-link
                        .btn-default
    -->
    <br>
    <h4>基础样式</h4>
    <button class="btn">B按钮</button>
    <br>
    <h4>附加样式</h4>
    <button class="btn btn-primary">B按钮</button>
    <button class="btn btn-info">B按钮</button>
    <button class="btn btn-success">B按钮</button>
    <button class="btn btn-warning">B按钮</button>
    <button class="btn btn-danger">B按钮</button>
    <button class="btn btn-link">B按钮</button>
    <button class="btn btn-default">B按钮</button>
    <!-- 
        按钮大小 
        .btn-lg 大
        .btn-sm 小
        .btn-xs 超小
    -->
    <br>
    <h4>按钮大小</h4>
    <button class="btn btn-primary btn-lg">B按钮</button>
    <button class="btn btn-info btn-sm">B按钮</button>
    <button class="btn btn-success btn-xs">B按钮</button>
    <!-- 
        按钮样式多标签复用
     -->
    <br>
    <h4>多标签复用按钮样式</h4>
    <a href="#" class="btn btn-info">a标签</a>
    <span class="btn btn-primary">span标签</span>
     <!-- 
         按钮禁用
            添加disabled属性 真的禁用
            添加disabled类名 仅在样式上禁用
      -->
    <br>
    <h4>按钮禁用</h4>
    <button class="btn btn-success" onclick="alert('hello')" disabled="disabled">B按钮</button>
    <button class="btn btn-warning disabled" onclick="alert('hello')">B按钮</button>
</body>
</html>

在这里插入图片描述

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap-04-常用样式——表单控件(按钮)

按钮<!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"> <title>
复制链接

扫一扫