• 技术文章 >web前端 >Bootstrap教程

    bootstrap4如何设置按钮

    (*-*)浩(*-*)浩2019-07-20 15:20:16原创859

    bootstrap4设置按钮代码:<button type="button" class="btn">,Bootstrap 4 提供了不同样式的按钮,可通过class来选择不同样式的按钮。

    实例:(推荐学习:Bootstrap视频教程

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>按钮样式</h2>
      <button type="button" class="btn">基本按钮</button>
      <button type="button" class="btn btn-primary">主要按钮</button>
      <button type="button" class="btn btn-secondary">次要按钮</button>
      <button type="button" class="btn btn-success">成功</button>
      <button type="button" class="btn btn-info">信息</button>
      <button type="button" class="btn btn-warning">警告</button>
      <button type="button" class="btn btn-danger">危险</button>
      <button type="button" class="btn btn-dark">黑色</button>
      <button type="button" class="btn btn-light">浅色</button>
      <button type="button" class="btn btn-link">链接</button>      
    </div>
    
    </body>
    </html>

    按钮类可用于 <a>, <button>, 或 <input> 元素上。

    更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

    以上就是bootstrap4如何设置按钮的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap4
    上一篇:bootstrap4如何设置弹出框 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • bootstrap用什么软件• bootstrap怎么下载• bootstrap-vue是什么• 分享一个绿色的食品蔬菜水果外卖预订网站bootstrap模板
    1/1

    PHP中文网