bootstrap组件 -- (笔记二)

字体图标, 我的理解就是: 它是文字, 外观上是图片的样子

字体图标用法 : <span class="glyphicon glyphicon-*"></span>

根据*的不同, 生成的字体图标不同, 如下是glyphicon-user:

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

这里将字体图标放入到button中(如果button变大, 字体图标会随着button变大)

导航菜单上一般都带有字体图标(如 glyphicon-home,  glyphicon-cart, glyphicon-headphones)

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

定制字体图标

通过改变字体尺寸、颜色和应用文本阴影来进行定制图标

比如上面的将字体图标放在buttton中, 改变button的大小, 字体图标的大小也改变了

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

修改字体大小, 可以修改字体图标的大小(可以看出字体图标也是字体)

<button class='btn btn-default' style='font-size:100px'> <span class='glyphicon glyphicon-user'></span> </button>

修改字体颜色也是一样的

<button class='btn btn-default' style='color: rgb(212, 106, 63)'><span class='glyphicon glyphicon-user'></span></button>

 字体图标阴影(text-shadow 第一个参数是阴影颜色, 第二个参数是阴影右偏移量, 第三个参数是下偏移量, 最后一个参数是清晰度)

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

bootstrap下拉菜单:

.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里 (向上的话, 就改为dropup)

.dropdown-menu 创建下拉菜单

data-toggle='dropdown' 表示此元素会触发下拉效果

<div class="dropdown">
    <button type="button" class="btn" data-toggle="dropdown">
        主题 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li> <a href="#">Java</a> </li>
        <li> <a href="#">数据挖掘</a> </li>
        <li> <a href="#">数据通信/网络</a> </li>
        <li class="divider"></li>              
        <li> <a href="#">分离的链接</a> </li>
    </ul>
</div>

下拉菜单的其它操作

默认是左对齐, 可以改为右对齐(添加pull-right 或 dropdown-menu-right类样式)

<ul class="dropdown-menu pull-right">

向下拉菜单中添加标题和分隔线

在li元素中添加类样式 class='dropdown-header' , 向li元素中添加类样式class='divider'产主一条分隔线

<ul class="dropdown-menu">
    <li class="dropdown-header">下拉菜单标题</li>
    <li> <a href="#">Java</a> </li>
    <li> <a href="#">数据挖掘</a> </li>
    <li> <a href="#">数据通信/网络</a> </li>
    <li class="divider"></li>
    <li class="dropdown-header">下拉菜单标题</li>
    <li> <a href="#">分离的链接</a> </li>
</ul>

要禁用某一项的话, 添加类样式disabled

<li class="disabled"><a href="#">CSS</a></li>

按钮组:

创建基本的按钮组(使用btn-group类样式)

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

创建按钮工具栏

就是将按钮组放置在一起(使用类样式btn-toolbar), 每一个按钮组之间有一个小间隔

<div class="btn-toolbar">
    <div class="btn-group">
	    <button type="button" class="btn btn-default">按钮 1</button>
	    <button type="button" class="btn btn-default">按钮 2</button>
	    <button type="button" class="bt