| 标题 | Bootstrap 组件之按钮(二) |
| 内容 | Bootstrap是Twitter推出的一个用于前端开发的开源工具包。本文给大家介绍Bootstrap 组件之按钮的相关知识，感兴趣的朋友一起学习吧 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 按钮组 .btn-group>.btn : 一组.btn按钮包裹在.btn-group 外包元素.btn-group {position/display/} 按钮元素.btn <div role="group"> <button type="button">left</button> <button type="button">middle</button> <button type="button">right</button> </div> 按钮工具栏 .btn-toolbar>.btn-group 外包元素.btn-toolbar {margin-left} <div role="toolbar"> <div role="group">...</div> <div role="group">...</div> <div role="group">...</div> </div> 按钮尺寸 .btn-group-*(lg/md/sm/xs) .btn-group-*>.btn {padding/font-size/border-radius} <div> <button>left</button> <button>middle</button> <button>right</button> </div> 按钮嵌套 .btn-group嵌套.btn-group <div role="btn-group"> <button>按钮1</button> <button>按钮2</button> <div role="btn-group"> <button data-toggle="dropdown">下拉 <span></span> </button> <ul> <li><a>项目一</a></li> <li><a>项目二</a></li> </ul> </div> </div> 按钮组垂直排列 .btn-group-vertical <div role="btn-group"> ... </div> 按钮组两端对齐 表现为填满父元素宽度 缺陷：因margin不支持display:table-cell;会出现双边框的效果 需要按钮嵌套.btn-group-justified {display/width/float} <div role="group"> <div role="group"> <button>left</button> </div> <div role="group"> <button>left</button> </div> <div role="group"> <button data-toggle="dropdown">right <span></span></button> <ul> <li><a>item1</a></li> <li><a>item2</a></li> </ul> </div> </div> 按钮式下拉菜单 外包元素类.btn-group {display/position} 依赖下拉菜单插件 单按钮下拉菜单 <div role="group"> <button data-toggle="dropdown"> button <span></span> </button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> 分裂式按钮下拉菜单 <div> <button>button</button> <button data-toggle="dropdown"><span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> 按钮下拉菜单尺寸 控制大小.btn-*:.btn-lg/btn-sm/btn-xs {padding/font-size/border-radius} <div> <button data-toggle="dropdown">button <span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> 向上弹出菜单 控制弹出方向.dropup: .dropup.drop-menu {bottom/margin-bottom} <div> <button data-toggle="dropdown">button <span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> 以上所述是小编给大家介绍的Bootstrap 组件(二)之按钮的相关知识，希望对大家有所帮助！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。