Bootstrap的按钮下

时间:2019-01-21
本文章向大家介绍Bootstrap的按钮下，主要包括Bootstrap的按钮下使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一 活动状态

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定制风格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
</body>
</html>

2 效果

二 禁用状态

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>按钮状态——禁用状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
   <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
   <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
</body>
</html>

2 效果

随机文章
WEB前端知识点必读
最近更新