admin

浅谈bootstrap按钮样式
Bootstrap是一个很常见的UI框架简洁方便深受大家喜爱几条代码即可接入BS <!-- 最新版本的 Bo...
扫描右侧二维码阅读全文
09
2017/09

浅谈bootstrap按钮样式

Bootstrap是一个很常见的UI框架
简洁方便深受大家喜爱
几条代码即可接入BS

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

接下来就谈谈关于Bootstrap的各种样式美化
第一:按钮
按钮有很多样式btn-success btn-info btn-danger btn-default btn-primary等等...
接入直接就

<div class="row">
<button type="button" class="btn btn-defult">按钮</button>
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-success">按钮</button>
<button type="button" class="btn btn-waring">按钮</button>
<button type="button" class="btn btn-info">按钮</button>
<button type="button" class="btn btn-danger">按钮</button>
<button type="button" class="btn btn-link">按钮</button>
</div>

除了button,input a同样可以使用这些class样式

Last modification:April 27th, 2019 at 08:18 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment