关于bootstrap--表单(按钮<button>效果、大小、禁用)
2016-07-02 12:00
585 查看
1、各种标签实现按钮效果:
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a class="btn btn-default">啊哈哈</a>
注:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
2、各种按钮效果:
3、各种按钮的大小:
3、按钮禁用:
方法1:在标签中添加disabled属性:
方法2:在元素标签中添加类名“disabled”:
4、关闭符:
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a class="btn btn-default">啊哈哈</a>
注:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
2、各种按钮效果:
3、各种按钮的大小:
3、按钮禁用:
方法1:在标签中添加disabled属性:
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2:在元素标签中添加类名“disabled”:
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<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>
4、关闭符:
<p>关闭图标实例 <button type="button" class="close" aria-hidden="true"> × </button> </p>
相关文章推荐
- 关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)
- BootStrap
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
- 很棒的Bootstrap选项卡切换效果
- mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理
- Bootstrap实现遮罩层
- 关于bootstrap--表单(水平表单)
- MyEclipse 2016 CI 4 支持BootStrap模板
- Bootstrap3.3.5响应式导航栏 实例
- bootstrap inputfile.js
- Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
- bootstrap datetimepicker
- Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
- 解决bootstrap导航栏navbar在IE8上存在缺陷的方法
- 基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)
- ASP.NET MVC+Bootstrap个人博客之打造清新分页Helper(三)
- ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug(四)
- ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表(五)
- ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表(五)