1.什么是BootStrap组件？
Bootstrap组件是Bootstrap框架的核心之一。可以利用Bootstrap组件构建出绚丽的页面。
2.常用的BootStrap组件都有哪些？
Icon图标（Glyphicon）、下拉菜单（Dropdown）、输入框（Input group）、导航（Nav）、导航条（Navbar）、缩略图（Thumbnail）、媒体对象（Media object）、列表组（Listgroup）、分页导航（Pagination）
3.小图标
图标是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个档次。BootStrap给我们提供了250多种小图标，这些小图标可以作用在内联元素上，给网页增加更多活力。
（3.1）图标用法
小图标的使用方法非常简单，首先把我们之前下载的bootstrap下的fonts文件夹整个复制到项目工作空间中，然后在任何内联元素上应用所对应的样式即可。例如：
<span class="glyphicon glyphicon-home"></span>
*注意：所有的icon图标都是以glyphicon-开头的。使用的时候必须同时使用两个样式，即以.glyphicon和.glyphicon-开头的样式
4.下拉菜单
网页中经常会需要上下文菜单或者隐藏/展示菜单项，BootStrap默认提供了通用的菜单显示效果，而且各种交互状态下的菜单展示需要和JavaScript和Dropdown插件配合才能使用。
(4.1基本下拉菜单)
基本下拉菜单的用法即将下拉菜单触发器和下拉菜单包裹在.dropdown里，或者另外声明一个position：relative的元素，然后加入组成菜单的HTML代码。
<div class="dropdown ">
<button class="btn btn-danger" data-toggle="dropdown" >
2-1任务
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">我是第一条数据</a></li>
<li><a href="#">我是第二条数据</a></li>
<li><a href="#">我是第三条数据</a></li>
<li><a href="#">我是第四条数据</a></li>
<li class="divider"></li>
<li><a href="#">我是第五条数据</a></li>
<li><a href="#">我是第六条数据</a></li>
<li><a href="#">我是第七条数据</a></li>
<li><a href="#">我是第八条数据</a></li>
</ul>
</div>
效果如下图：
下拉菜单包括两部分，即如上图：按钮和下拉菜单项.它们被包裹在一个.dropdown的容器里。data-toggle= "dropdown "，它是和JavaScript插件交接的接口，在JavaScript插件中已经封装了单击按钮弹出下拉菜单项的功能，可以直接使用。不过虽然不需要写JavaScript相关代码，但是需要引入jQuery文件和bootstrap. js文件才能有交互效果。. caret可以实现按钮上的向下小三角。
（4.2）分离式下拉菜单
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" >
<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><a href="#">Separated link</a></li>
</ul>
</div>
</div>
5.输入框
（5.1）用法
其实有的时候，我们需要将输入框组件（Input group）和文字或者小icon组合在一起使用（称为addon）
<div class="container">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" >
<span class="input-group-addon" >百度一下</span>
</div>
</div>
注意：
1.请避免在select元素上使用该功能，因为Webkit浏览器不完全支持input-group组件的特性
2. 不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件
3.不要将表单组件或栅格列类直接和输入框混合使用，而是将输入框组件嵌套到表单组件或栅格相关元素的内部
（5.2）大小
输入框组件也可以设置大小，在input-group-addon样式容器上添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。
<div class="input-group input-group-lg">...</div>//大
<div class="input-group input-group-sm">...</div>//小
（5.3）按钮作为addon
输入框组件上的addon支持普通的button以addon的形式出现。前面学过的.btn按钮样式上已经定义了各种各样的样式（如大小、颜色、内外边距等），为了避免冲突，为.btn样式又单独设置了一个.input-group-btn样式，用它来替换.input-group-addon作为新的addon容器。具体用法如下：
<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>
6.导航和导航条
（6.1）导航
导航（Nav）是一个网站最重要的组成部分，可以便于用户查找网站所提供的各项功能服务。BootStrap中导航组件都依赖一个.nav类，状态也是公共的。就像.btn使用一样，需要特殊的样式，再添加相应的类即可。
.nav是导航的基础样式，主要是设置布局方式（相对）、块级显示以及padding、active、disabled状态下的颜色等基础设置。
（6.2）选项卡导航
选项卡导航是最常用的一种导航方式，尤其是在多内容编辑的时候，通常都需要选项卡进行分组显示。当前高亮菜单项使用.active样式，选项卡式导航使用.nav-tabs类。
<div class="container" style="margin: 20px">
<!--选项卡式导航-->
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul><div>
（6.3）胶囊式选项卡导航
胶囊式选项卡导航实现非常简单，只需要把上面示例代码中的nav-tabs改为nav-pills，即可变换成完全不同的样式效果，并且当前的.active菜单也会进行背景高亮显示
<ul class="nav nav-pills ">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
（6.4）自适应导航
上面两种导航大小都是固定的，不会随着屏幕的变化而变化，而自适应导航可以将li元素充满整个父级容器，其样式为.nav-justified。不过在使用的时候需要把它依附在.nav-tabs或.nav-pills样式的基础上。
<!--选项卡式导航-->
<ul class="nav nav-tabs nav-justified">.../**省略部分代码*/ </ul>
<!--胶囊式选项卡导航-->
<ul class="nav nav-pills nav-justified ">.../**省略部分代码*/ </ul>
（6.5）二级导航
一般网站可能会有二级菜单，前面所讲的是一级菜单。那么如何实现二级菜单呢？其实二级菜单很像我们之前学过的下拉菜单，把这两者组合起来就可以形成二级导航。不过此时我们是用普通导航里的li元素作为父元素容器，内部包含Dropdown下拉菜单。
<div class="container" style="margin: 20px">
<!--二级导航-->
<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="#" class="dropdown-toggle" 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>
</div>
（6.6）分页导航
当网页内容很多的时候，我们都会选择使用分页显示，如新闻列表、订单记录等。一个用户体验良好的分页组件会使网页的Level提高一个等级，BootStrap为大家提供了两种分页组件：带多个页面的组件、只有上一页和下一页的翻页组件。
默认分页：
<!--pagination 分页 原理：1、设置li元素的内敛显示和边框属性。2、设置第一个和最后一个圆角-->
<ul class="pagination">
<!-- <!–disabled 禁用状态–>-->
<li class="disabled"><a href="#">«</a></li>
<!--<!–active当前页–>-->
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
使用pagination实现的原理是首先把所有的li设置为内联元素并且设置边框，然后把第一个元素和最后一个元素设置圆角即可。
active表示当前的高亮选项，而disabled是禁用状态。此外分页导航还支持大小尺寸，使用.pagination-lg和.pagination-sm分别表示大尺寸的分页导航和小尺寸的分页导航。
翻页：
<!--pager翻页效果，实现步骤：1、整体居中 2、li有圆角 3、设置鼠标移动上去的效果 4、支持a元素的span元素-->
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
如果需要将两个按钮分开两端对齐，则需要在按钮li上分别添加previous和next样式，并让上一页按钮变为不可用状态
<ul class="pager">
<li class="previous disabled"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
其实这个实现原理很简单，就是左浮动和右浮动。同时也可以使用.pull-left和.pull-right，它们的效果是一样的，因为它们的原理是一样的
（6.7）导航条
导航条（Navbar）和导航的区别就是多了一个“条”，在网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），会随着浏览器宽度增加而逐渐变为水平展开模式。
（6.8）基础导航条
基础导航条是在普通导航的基础上改进实现的，不过实现原理却不像想象中那么简单。我们先看一个简单的例子。首先在普通导航的ul元素上应用.navbar-nav样式，然后在父级容器上使用.navbar样式。
<nav class="navbar navbar-default" role="navigation" style="padding-right: 20px">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav ">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
</ul></nav>
navbar-brand样式表示该元素是导航条的名称，起到提醒的作用。在设计中nav、navbar、navbar-nav等控制大小、内外边距、行距等的样式，而颜色则是由navbar-default和navbar-inverse这两大风格控制。如果将示例中的navbar-default改成navbar-inverse，就可以看到导航条的背景颜色、字体颜色和上图所示的相反，所以也称为反色导航条。
（6.9）导航中的表单
有的时候我们会发现在导航条中有表单元素，如搜索框等。所以BootStrap专门提供了一个附加样式.navbar-form来满足这个需求。
使用的时候，在.navbar容器内放置form元素，然后在form元素上应用.navbar-form。如果想要控制它左右浮动的样式，可以使用.navbar-left和.navbar-right。在上示例中的基础上添加表单元素。
<!--在导航条中添加表单-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
（6.10）导航条的按钮（文本、链接）
在普通的导航条中，还可以引入文本（navbar-text）、按钮（navbar-btn）和普通链接（navbar-link）等
<!-- 按钮 --!>
<nav class="navbar navbar-default ">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">button</button>
<!-- navbar-btn-->
<button class="btn btn-primary navbar-btn">button</button>
<button class="btn btn-success navbar-btn">button</button>
</div>
</nav>
<!--导航中的文字-->
<nav class="navbar navbar-default ">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<p class="navbar-text">text</p> <!-- navbar-text-->
<p class="navbar-text">text</p>
<p class="navbar-text">text</p>
</div>
</nav>
<!--导航中的链接-->
<!--不加navbar-text的时候发现排版是不对的，因为没有设置padding值-->
<nav class="navbar navbar-default ">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<a href="#" class="navbar-link">link</a>
<a href="#" class="navbar-link">link</a>
<a href="#" class="navbar-link">link</a>
</div>
</nav>
效果如图所示：
（6.11）响应式导航条
一个导航条默认情况下都是全屏100%显示的，所以通常都会有很多菜单项内容，以至于在小屏幕下会有可能显示不完全，或是排版很乱。可是我们结合自己的上网经验可以知道，大屏幕浏览器下导航条的所有内容并非都需要在小屏幕浏览器上显示，有些内容是可以省略的或者是被隐藏起来，当点击某个按钮的时候再出现。
根据这样的需求，BootStrap提供了响应式导航条。屏幕的分界点是768px。在小于768px的时候，所有菜单默认会隐藏，单击右边的icon图标，所有默认的菜单就会展示出来。具体的使用方法如下所示：
<body>
<nav class="nav navbar-inverse" style="padding-right: 20px">
<div class="navbar-header"> <!--.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；-->
<!--navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在的元素-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" ><!--collapsed——设置button元素为在视口小于768px时才显示；-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--确保无论在宽屏还是窄屏，navbar-brand都会显示-->
<a href="#" class="navbar-brand">LOGO</a> <!--.navbar-brand——设置导航条组件内的品牌图标；-->
</div>
<!--.navbar-collapse——设置div元素为导航条组件各列表项的父元素；.navbar-left——设置导航条内元素向左对齐；-->
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav "> <!--.navbar-nav——设置ul为导航条组件内的列表元素;-->
<li><a class="active" href="#">首页</a></li>
<li><a href="#">图书 </a></li>
<li><a href="#">作品 </a></li>
<li><a href="#">展览 </a></li>
<li><a href="#">关于我们 </a></li>
</ul>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</nav>
</body>
大于786px时浏览器下导航条的显示效果
在小于768px浏览器下导航条的默认显示效果
在小于768px浏览器下导航条单击icon图标的显示效果
注意：上面例子需要注意以下几点
1.toggle图标，右上角的button图标（icon）必须包含在.navbar-toggle样式里。在大于768px的浏览器下这个图标是不显示的。
2. 从图3.5中可以看出，在窄屏下，导航默认是隐藏的，它的实现是通过在div上应用了navbar-collapse和collapse两个样式。应用collapse样式的容器默认会隐藏。
3.在小于768px的情况下，collapse中的内容默认是隐藏的，需要通过toggle图标单击后才会出现。对应的关键代码就是data-toggle=“collapse”，其实之所以有了它就能有单击效果的根本原因是调用了JavaScript中的collapse插件（会在后面章节中讲到），在这个插件里就已经封装好了功能可以直接调用。
7.缩略图
在BootStrap中专门为这样的布局定制了组件——缩略图组件。使用.thumbnail样式，就可以使图片、文字或是视频展示得更加漂亮。
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="img/img1.jpg" alt="">
<div class="caption">
<h3>左耳</h3>
<p>放肆青春掀全民追忆</p>
<p>
<a href="#" class="btn btn-primary" role="button">播放</a>
<a href="#" class="btn btn-default" role="button">下载</a>
</p>
</div>
</div>
</div>
...//省略部分代码
</div>
8.媒体对象
媒体对象是一个抽象的样式，用来构建不同类型的组件，这些组件都具有在文本内左对齐或右对齐的图片（就像贴吧、电影、论坛评论等）。
默认样式的媒体对象是在内容区域的左侧或右侧展示一个媒体内容（图片、视频、音频）。
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/pic-small.jpg" alt="..." />
</a>
</div>
<div class="media-body">
<h4 class="media-heading">谁在制造下跌，散户何去何从</h4>
<p>大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现。</p>
<small>5分钟前 | 股市</small>
<small>评论 | 分享</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/pic-small.jpg" alt="..." />
</a>
</div>
<div class="media-body">
<h4 class="media-heading">谁在制造下跌，散户何去何从</h4>
<p>大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现。</p>
<small>5分钟前 | 股市</small>
<small>评论 | 分享</small>
</div>
</div>
效果图：
媒体对象的样式主要是设置个个样式的间距大小和左右浮动，大家可以参考源码进行了解。在实际的应用中还会发现，有的时候图片和文字位置是左右交叉的。在BootStrap中可以使用.media-left和.media-right来调整位置。在上面基础改部分代码为：
<div class="media">
<div class="media-left">
<img class="media-object" src="img/pic-small.jpg" alt="">
</div>
<div class="media-body">
<h4 class="media-heading">谁在制造下跌，散户何去何从</h4>
<p>大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现。</p>
<small>5分钟前/ 股市</small>
<small style="margin-left:70%;color: #f0ad4e"> 评论 | 分享 </small>
</div>
</div>
<hr/>
<div class="media">
<div class="media-body text-right">
<h4 class="media-heading">在制造下跌，散户何去何从</h4>
<p class="pull-right">大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现</p>
<small>5分钟前/ 股市</small>
<small style="margin-left:70%;color: #f0ad4e"> 评论 | 分享 </small>
</div>
<div class="media-right">
<img class="media-object" src="img/pic-small.jpg" alt="">
</div>
</div>
效果图：
9.列表组
<ul class="list-group">
<li class="list-group-item ">同桌的你</li>
<li class="list-group-item ">花样年华
</li>
<li class="list-group-item">甜蜜蜜
</li>
<li class="list-group-item">向天再借五百年</li>
</ul>
显示效果如下图，该列表组是可伸缩的，会随着浏览器宽度的变化而变化：
从上面示例中我们可以看出，基本列表组使用了两个样式.list-group和list-group-item。它们的主要作用是设置了基本的显示和布局内容，如间距，上下圆角、背景等。
有的时候在列表上会发现有消息条数或是向右的小箭头等。要在基础列表组上添加这些标记的具体实现方式如下：
<ul class="list-group">
<li class="list-group-item active ">同桌的你
<!--徽章图标-->
<span class="badge">12</span>
</li>
<!--list-group-item-success 带有样式的列表-->
<li class="list-group-item list-group-item-success">花样年华
<span class="badge">5</span>
</li>
<li class="list-group-item">甜蜜蜜
<span class="badge">8</span>
</li>
<li class="list-group-item">向天再借五百年</li>
</ul>
总结
1.小图标组件的使用及应用场景。
2. 基本下拉菜单和分离式下拉菜单
3.输入框的使用：基本用法、尺寸大小、按钮作为addon
4.导航：选项卡导航、胶囊是选项卡导航、自适应导航、二级导航
5.导航条：基础导航条、导航条中的表单、导航条中的按钮（0文本、链接）、顶部固定或底部固定、响应式导航条。
6. 只有图片的缩略图组件和图文混合的缩略图组件的使用
7.媒体对象的使用
8.普通的列组件和带徽章的列表组件的使用
9.默认分页导航和翻页组件的使用。
1941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
