Bootstrap组件01

伴随着Bootstrap全局CSS样式的结束，我们迎来的Bootstrap当中的组件，接下来的这几天让我们 一起来学习组件吧！！！！！!！！！

图标组件

1、注意：必须把官方的fonts文件夹引用到项目中【fonts文件夹在Bootstrap库里】
2、使用图标：
01、使用<i>实现图标组件 —<i class="glyphicon glyphicon-heart"></i>

<i class="glyphicon glyphicon-heart"></i>

02、使用<span>实现图标组件—<span class="glyphicon glyphicon-heart"></span>

 <span class="glyphicon glyphicon-headphones"></span>

3、结合按钮使用图标：

   <button class="btn btn-default btn-sm">
       <span class="glyphicon glyphicon-heart"></span>
   </button>   

下拉菜单组件

1、基本下拉菜单组件格式：

 <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
          <li><a href="#">菜单1</a></li>  
          <li><a href="#">菜单2</a></li>  
          <li><a href="#">菜单3</a></li>  
 			<li><a href="#">菜单4</a></li>  
     </ul>
</div>    

2、注意事项：

          01、按钮和菜单需要包裹在.dropdown容器中
          02、作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效
          03、被点击的元素按钮设置class="caret"表示箭头
          04、对于菜单部分，需要设置class="dropdown-menu"才能自动隐藏并添加固定样式

3、下拉菜单向上触发：class=“dropup”

         <div class="dropup">
				<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>