bootstrap之 - 爱码网

一、字体图标

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

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

<ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

二、下拉菜单

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle"  
      data-toggle="dropdown">
      主题
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation" class="dropdown-header">下拉菜单标题</li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            数据通信/网络
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
      </li>
   </ul>
</div>

<div class="dropdown">
<!--<button type="button" class="btn btn-primary">
	<span class="glyphicon glyphicon-user"></span>User
</button>-->
<button type="button" class="btn btn-primary dropdown-toggle clearfix" data-toggle="dropdown">
	<span class="glyphicon glyphicon-user"></span>   User
	<span class="caret"></span>
</button>
<ul class="dropdown-menu">
	<li class="dropdown-header">下拉标题</li>
	<li><a href="#"><i class="glyphicon glyphicon-pencil"></i>  Java</a></li>
	<li><a href="#"><i class="glyphicon glyphicon-book"></i>  Html5</a></li>
	<li><a href="#"><i class="glyphicon glyphicon-phone"></i>  Android</a></li>
	<li><a href="#"><i class="glyphicon glyphicon-picture"></i>  IOS</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">下拉标题</li>
	<li><a href="#"><i class="glyphicon glyphicon-home"></i>  Home</a></li>
</ul>
</div>