Bootstrap组件02

输入框组

1、【概念】：文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展

2、在左侧添加文字：

              <div class="input-group">
					 <span class="input-group-addon">$</span>
					 <input type="text" class="form-control" />
				 </div>

3、在右侧添加文字：

              <div class="input-group">
 					<input type="text" class="form-control" />
					<span class="input-group-addon">$</span>
				</div>

4、在两侧添加文字：

            <div class="input-group">
					<span class="input-group-addon">$</span>
					 <input type="text" class="form-control" />
					 <span class="input-group-addon">.00</span>
				</div>

5、设置尺寸：

      01、格式： <div class="input-group input-group-lg"></div>      
      02、尺寸：lg 默认sm

6、左侧使用复选框和单选框：
      01、复选框：

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

     02、单选框：

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

7、右侧使用按钮：

              div class="input-group">
					<input type="text" class="form-control" />
					<div class="input-group-btn">
						<button class="btn btn-info">查询</button>
					</div>
				</div>

8、左侧使用下拉菜单：

            <div class="input-group">
					<div class="input-group-btn">
						<button class="btn btn-default" data-toggle="dropdown">
							法师
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a>王昭君</a></li>
							<li><a>米莱迪</a></li>
							<li><a>安其拉</a></li>
							<li><a>小乔</a></li>
						</ul>
					</div>
					<input type="text" class="form-control" />
				  </div>

导航

1、【概念】：Bootstrap提供了一组导航组件，用于实现Web页面的栏目操作

2、基本导航标签页：
01、垂直导航（默认）：<ul class="nav"><li><a></a></li></ul>

              <ul class="nav">
					<li><a></a></li>
					<li><a></a></li>
					<li><a></a></li>
				</ul>

02、水平导航：<ul class="nav nav-tabs"><li><a></a></li></ul>

              <ul class="nav nav-tabs">
					<li><a></a></li>
					<li class="active"><a></a></li>
					<li class="disabled"><a></a></li>
				</ul>

3、胶囊式导航：<ul class="nav nav-pills">

             <ul class="nav nav-pills">
					<li><a></a></li>
					<li><a></a></li>
					<li><a></a></li>
				</ul>

4、垂直胶囊式导航：<ul class="nav nav-pills nav-stacked">

              <ul class="nav nav-pills nav-stacked">
					<li><a></a></li>
					<li><a></a></li>
					<li><a></a></li>
				</ul>

5、导航两端对齐：<ul class="nav nav-tabs nav-justified">

            <ul class="nav nav-tabs nav-justified">
					<li><a></a></li>
					<li><a></a></li>
					<li><a></a></li>
				</ul>

6、禁用导航中的项目，某一项被选中：

     01、禁用：<li class="disabled"></li>
     02、选中：<li class="active"></li>

7、带下拉框的导航：

          <ul class="nav nav-tabs">
					<li><a></a></li>
					<li><a></a></li>
					<li class="dropdown">
						<a data-toggle="dropdown">
						       菜单
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a></a></li>
							<li><a></a></li>
							<li><a></a></li>
						</ul>
					</li>
					<li><a></a></li>
			 </ul>

导航条

1、【概念】：导航条是网站中作为导航页头的响应式基础组件

2、基本格式：<nav class="navbar navbar-default">

<nav class="navbar navbar-default">
					 
</nav>

3、反色调导航：<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">
								 
</nav>

4、导航条【包含标题和列表】：

         <nav class="navbar navbar-default">
					<!-- 标题 -->
					<div class="navbar-header">
						<div class="navbar-brand"></div>
					</div>
					<!-- 列表 -->
					<ul class="nav navbar-nav navbar-right">
						<li><a></a></li>
						<li><a></a></li>
						<li><a></a></li>
					</ul> 
				</nav>

5、导航条中使用表单：

<nav class="navbar navbar-default">
				<form class="navbar-form navbar-right">
						<div class="input-group">
							<input type="text" class="form-control" />
						<span class="input-group-btn">
							<button class="btn btn-default"></button>
						</span>
					</div>
				</form>
</nav>

6、导航中使用按钮：<button class="btn btn-default navbar-btn">按钮</button>
7、导航中使用对齐方式：
     01、左：<button class="btn btn-default navbar-btn navbar-left">按钮</button>
     02、右：<button class="btn btn-default navbar-btn navbar-right">按钮</button>
8、导航中使用一段文本：<p class="navbar-text">文本</p>
9、非链接导航：<a class="navbar-link">超链接<a>
10、将导航固定到顶端：<nav class="navbar navbar-default navbar-fixed-top">
11、将导航补丁在底部：<nav class="navbar navbar-default navbar-fixed-bottom">

路径导航

1、【概念】：类似面包屑
2、

<ul class="breadcrumb">
					<li><a></a></li>
					<li><a></a></li>
					<li class="active"></li>
</ul>

分页

1、【概念】：分页组件可以提供带有展示页面的功能
2、默认分页：

<ul class="pagination">
					<li><a>&laquo;</a></li>
					<li><a>1</a></li>
					<li><a>2</a></li>
					<li><a>3</a></li>
					<li><a>&raquo;</a></li>
</ul>

3、首选项和禁用：

      01、首选项：class="active"><a>1</a></li>
      02、禁用：<li class="disabled"><a>1</a></li>

4、设置尺寸：

      01、格式：<ul class="pagination pagination-lg">
      02、尺寸：lg 默认sm

5、翻页效果:

<ul class="pager">
					<li><a>上一页</a></li>
					<li><a>下一页</a></li>
</ul>

6、对齐翻页连接（禁用）：

<ul class="pager">
					<li class="previous disabled"><a>上一页</a></li>
					<li class="next"><a>下一页</a></li>
</ul>

标签

1、【概念】：在文本后面带上标签
2、样式：

               <h1><span class="label label-default"></span></h1>
				<h1><span class="label label-primary"></span></h1>
				<h1><span class="label label-success"></span></h1>
				<h1><span class="label label-info"></span></h1>
				<h1><span class="label label-warning"></span></h1>
				<h1><span class="label label-danger"></span></h1>

徽章

1、未读信息数量徽章：

<a>信息<span class="badge">10<span>

2、按钮中使用徽章：

<button class="btn btn-default">
     提交<span class="badge">10</span>
 </button>