bootstrap4如何设置按钮


本文摘自PHP中文网,作者(*-*)浩,侵删。

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!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如何设置按钮的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap4有哪些版本?

bootstrap4兼容哪些浏览器

聊聊bootstrap4中的网格系统

bootstrap4如何设置按钮

bootstrap4的版本有哪些

bootstrap4 过时了吗

bootstrap4如何设置进度条

bootstrap4如何设置弹出框

bootstrap3和bootstrap4的区别

更多相关阅读请进入《bootstrap4》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...