Boostrap的组件使用(二)

感谢Jie’ blog http://ilog.vip/ ,谢谢他让我有了继续写下去的信念。愿一起坚持，在路上…
上一章简单介绍了Bootstrap的简单使用(一),如果没有看过，请观看上一章

一. 字体图标

字体图标引用的是glyphicon 提供的，需要添加一个基类 .glyphicon,和一个具体的图标类，如.glypyhicon-user,.glyphicon-lock
glyphicon需要用一个span进行包括起来，不能直接使用。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

也可以将其放置在按钮上面.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

二. 下拉菜单

基本样式

<div class="dropdown">
			<!-- 添加按钮  设置data-toggle=dropdown -->
			<button class="btn btn-default dropdown-toggle" type="button"
				id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
				aria-expanded="true">
				编程语言 
				<!-- 添加三角图标 -->
				<span class="caret"></span>
			</button>
			<!-- 这个ul的aria-labelledby 与button的id相一致 -->
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li><a href="#">Java</a></li>
				<li><a href="#">Java Web</a></li>
				<li><a href="#">Python</a></li>
				<li><a href="#">Go</a></li>
			</ul>
		</div>

也可以添加分隔线

<li role="separator" class="divider"></li>

默认是向下弹出，也可以设置向上弹出,只需要将

<div class="dropup">   <!--将最开始的dropdown改成dropup即可-->
	
</div>

可以设置ul的对齐方式
只需要将ul中class=“dropdown-menu” 中添加对齐方式,“dropdown-menu-right” 或者"dropdown-menu-left" 即可。其中会将其放置在整个div=“container” 的最左边或者最右边。很可能被认定为bug,不喜欢这种方式.
设置禁用，在ul中的li 中设置 class=“disabled” 即可.
也可以设置相应的标题，这样可以增加可读性

<div class="dropdown" style="margin-top:500px;">
			<!-- 添加按钮  设置data-toggle=dropdown -->
			<button class="btn btn-default dropdown-toggle" type="button"
				id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
				aria-expanded="true">
				城市 
				<!-- 添加三角图标 -->
				<span class="caret"></span>
			</button>
			<!-- 这个ul的aria-labelledby 与button的id相一致 -->
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li class="dropdown-header">辽宁</li>
				<li><a href="#">沈阳</a></li>
				<li><a href="#">大连</a></li>
				<li class="dropdown-header">河南</li>
				<li><a href="#">商丘</a></li>
				<li><a href="#">民权</a></li>
			</ul>
		</div>

表现样式为:
在这里插入图片描述

三.按钮组

将多个按钮放置在一起，组成一个按钮组的形式, 用.btn-group 包括起来，设置role=“group”

<div class="btn-group" role="group">
			<button type="button" class="btn btn-default">新建</button>
			<button type="button" class="btn btn-default">保存</button>
			<button type="button" class="btn btn-default">删除</button>
		</div>

也可以将多个btn-group 用.btn-toolbar包括起来，设置role=“toolbar”,组成按钮工具栏

<div class="btn-toolbar" role="toolbar">
			<!-- 第一个按钮组 -->
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default">新建</button>
				<button type="button" class="btn btn-default">保存</button>
				<button type="button" class="btn btn-default">删除</button>
			</div>
			<!-- 第二个按钮组 -->
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default">编译</button>
				<button type="button" class="btn btn-default">保存</button>
				<button type="button" class="btn btn-default">撤消</button>
			</div>
		</div>

可以给按钮组设置尺寸，在.btn-group 中添加.btn-group-lg,btn-group-sm,btn-group-xs三种类型.
可以将按钮组与下拉菜单整合起来,btn-group里面可以放置另外一个btn-group

<div class="btn-group" role="group" aria-label="...">
			<button type="button" class="btn btn-default">1</button>
			<button type="button" class="btn btn-default">2</button>
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default dropdown-toggle"
					data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenu1">
					Dropdown <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
					<li><a href="#">Dropdown link</a></li>
					<li><a href="#">Dropdown link</a></li>
				</ul>
			</div>
		</div>

按钮组是水平排列的，可以将其设置成竖直排列，只需要将div中的.btn-group改成.btn-group-vertical即可。

<div class="btn-group-vertical" role="group" aria-label="...">

可以将按钮设置成两端对齐方式方式，在.btn-group 中添加.btn-group-justified 即可.

<div class="btn-group btn-group-justified" role="group"
			aria-label="...">
			<button type="button" class="btn btn-default">1</button>
			<button type="button" class="btn btn-default">2</button>
			<button type="button" class="btn btn-default">3</button>
		</div>

这样写，是有兼容性问题的，是不会两端对齐的。应该这样写:

<div class="btn-group btn-group-justified" role="group"
			aria-label="...">
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Left</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Middle</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Right</button>
			</div>
		</div>

两端对齐btn-group,而不是普通的button.

四.按钮式下拉菜单

样式与下拉菜单差不多，是按钮组与下拉菜单的结合体.

<!--设置样式为btn-group-->
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle"
				data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				Action <span class="caret"></span>
			</button>
			<!-- 不需要在button中设置id,这里也不需要指定id -->
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>

也可以将按钮的下拉菜单的文字与三角符号进行分隔

	<!--设置样式为btn-group-->
		<div class="btn-group">
			<!-- 设置文字按钮 -->
			<button type="button" class="btn btn-primary">Action</button>
			<!-- 设置只有图标 的按钮 -->
			<button type="button" class="btn btn-primary dropdown-toggle"
				data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				<span class="caret"></span>
			</button>
			<!-- 不需要在button中设置id,这里也不需要指定id -->
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>

设置尺寸,在按钮button里面，设置btn btn-primary 中添加,btn-lg,btn-sm,btn-xs 三种尺寸大小

<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

设置弹出方向
在最上面的div中，在class=“btn-group” 中添加相应的方向, dropup 表示向下，默认是向下的,dropdown

<!--设置样式为btn-group-->
		<div class="btn-group dropup">

五. 输入框组

基本样式

<div class="input-group">
			<!-- 普通的输入框是label,不是span  span是将其放在Input里面。 -->
			<span class="input-group-addon" id="basic-addon1">@</span> <input
				type="text" class="form-control" placeholder="Username"
				aria-describedby="basic-addon1">
		</div>

在span中设置id的值,在input里面添加一个aria-describedby=“span的Id”,将其关联起来。

可以设置尺寸，在div中的input-group 中添加，input-group-lg,input-group-sm,input-group三种样式. 默认是md样式

<div class="input-group input-group-lg">
</div>

可以在前面添加一个复选框

<div class="input-group">
			<span class="input-group-addon"> <input type="checkbox"
				aria-label="...">
			</span> <input type="text" class="form-control" aria-label="...">
		</div>

也可以添加一个单选框

<div class="input-group">
			<span class="input-group-addon"> <input type="radio"
				aria-label="...">
			</span> <input type="text" class="form-control" aria-label="...">
		</div>

可以将button按钮放置进去，如Go, 表示搜索的意思。

<div class="input-group">
			<input type="text" class="form-control" placeholder="Search for...">
			<!-- 也可以将input整体放置在前面 -->
			<span class="input-group-btn">
				<!-- 放置一个按钮 -->
				<button class="btn btn-default" type="button">Go!</button>
			</span>
		</div>

可以将下拉菜单放置过去

<div class="input-group">
			<!-- 添加下拉菜单 ，用的class为input-group-btn -->
			<div class="input-group-btn">
				<button type="button" class="btn btn-default dropdown-toggle"
					data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Action <span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!--输入框 -->
			<input type="text" class="form-control" aria-label="...">
		</div>

将分裂式按钮下拉菜单放置进去

<div class="input-group">
			<div class="input-group-btn">
				<!-- 设置文字按钮 -->
				<button type="button" class="btn btn-primary">Action</button>
				<!-- 设置只有图标 的按钮 -->
				<button type="button" class="btn btn-primary dropdown-toggle"
					data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="caret"></span>
				</button>
				<!-- 不需要在button中设置id,这里也不需要指定id -->
				<ul class="dropdown-menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<input type="text" class="form-control" aria-label="...">
		</div>

里面可以放置按钮组

<div class="input-group">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default">新建</button>
				<button type="button" class="btn btn-default">保存</button>
				<button type="button" class="btn btn-default">删除</button>
			</div>
			<input type="text" class="form-control" aria-label="...">
		</div>

谢谢!!!