BootStrap组件

一：字体图标组件
字体图标是以glyphicon-开头，是由https://glyphicon.com/网站提供的。

• 图标类不能和其他组件直接联合使用，它们不能在同一个元素上与其他类共同存在，应该创建一个嵌套的span标签，并将图标类应用到这个span标签上。
• 图标类只能应用在不包含任何文本的内容或子元素上。
  二：下拉菜单组件
  1.基本下拉菜单
  将下拉菜单触发器和下拉菜单都包裹在.dropdown里或者另一个声明了position:relative;的元素。最后加入组成菜单的HTML代码中。
• 为下拉菜单的父元素设置.dropup类，可以让菜单向上弹出。
• .open类用于控制菜单收缩展开。
• .caret类用于设置向下的小三角。
• .active类默认是选中状态。
• .divider类是分割线，用于将多个链接分组。
• 引入jQuery和bootstrap.js文件是为了有交互效果。
  2.按钮式下拉菜单
  语法

<div class="btn-group">
	<button type="button" class="btn btn-success">...</button>
	<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
	</button>

三：输入框组件
示例：

<div class="input-group">
	<input type="text" class-"form-control" placeholder="请输入要搜索的内容">
	<span class="input-group-btn">
		<button class="btn btn-primary" type="button">百度一下</button>
	</span>
</div>

四：导航组件
.nav nav-tabs 选项卡导航
.nav nav-pills 胶囊式导航
*** nav-justified 自适应导航
下拉菜单导航

			<ul class="nav nav-pills">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">员工管理</a></li>
				<li><a href="#">物流管理</a></li>
				<li class="dropdown">
					<a href="#"data-toggle="dropdown">帮助<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">物流帮助</a></li>
						<li><a href="#">物流帮助</a></li>
						<li><a href="#">物流帮助</a></li>
						<li><a href="#">物流帮助</a></li>
					</ul>
				</li>
			</ul>

五：导航条组件
1.默认样式

.nav、.navbar、.navbar-nav用于控制导航条的字体样式、内外边距、行距等样式。
.active类默认是选中状态。

---

2.表单

3.按钮、文本和链接

4.固定在页面顶部、底部


5.响应式导航条

---

六：分页组件
1.默认分页


分页大小

2.翻页

---

七：缩略图组件

添加文字和按钮

---

八：媒体对象组件

---

九：列表组组件