bootstrap框架之按钮

按钮

基础用法

<button tyoe="button" class="btn btn-default"></button>

按钮组

<dvi class="btn-group">
	<button type="button" class="btn btn-default"></button>
</div>

<!--垂直--->
<dvi class="btn-group-vertical">
	<button type="button" class="btn btn-default"></button>
</div>

按钮工具栏

<div class="btn-toolbar">
	<div class="btn-group"></div>
	<div class="btn-group"></div>
	...
</div>

按钮下拉菜单

<div class="btn-group">
	<a href="" class="btn btn-default"></a>
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
		<ul class="dropdown-menu"><>
	</div>
</div>

按钮主要源码

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-weight: normal;
  line-height: 1.42857;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn {
  position: relative;
  float: left;
}

外观和大小是由padding、border、line-height来弄的。display是设置成inline-block，对于按钮组里设置了相对定位，倒是不懂是为了干什么，按钮组里的按钮设置了浮动，有多个按钮时排成一列。white-space属性，解决元素内的空白(??)

按钮自适应分组

.btn-group-justified能够使按钮组里的按钮100%充满父容器，这是一个附加样式，在按钮组的基础上添加上该样式即可。
这个样式的原理是使用display：table和display:table-cell的特性，模拟table的功能，能够解决所有在使用绝对定位和浮动定位进行多列布局时所遇到的问题（不懂是什么问题。。。日后再看）。