bootstrap,demo,bootstrap,按钮在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样式 btn-defult 表示默认样式 默认样式
btn-primary 表示背景色为蓝色 <button type="button" class="btn btn-defult">按钮</button> primary
btn-success表示背景色为绿色 <button type="button" class="btn btn-success">按钮</button> success
其他颜色属性 btn-waring 表示背景色为橙色 btn-danger 表示背景色为红色 btn-info 表示背景色为浅蓝色 btn-link 表示无背景色 <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> 
效果展示 按钮尺寸: btn-lg 较大 btn-md 中等 btn-sm 较小 btn-xs 更小 <div class="row" style="text-align: center"> <button type="button" class="btn btn-defult btn-lg">按钮</button> <button type="button" class="btn btn-primary btn-md">按钮</button> <button type="button" class="btn btn-success btn-sm">按钮</button> <button type="button" class="btn btn-warning btn-xs">按钮</button> <button type="button" class="btn btn-info btn-sm">按钮</button> <button type="button" class="btn btn-danger btn-md">按钮</button> <button type="button" class="btn btn-link btn-lg">按钮</button></div> 
效果展示 其他属性 btn-block 让按钮的宽度变为100%并且成了块级元素 active 表示按钮为激活状态 disabled 表示按钮为禁用状态不可点击 <button type="button" class="btn btn-danger btn-lg" disabled>按钮</button> 
禁用变为灰色 三. 用a标签做一个按钮 <a herf="#" class="btn btn-danger active">按钮</a> 以上所述是小编给大家介绍的使用Bootstrap美化按钮实例代码(demo),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对wanshiok.com网站的支持! bootstrap,demo,bootstrap,按钮
|