Bootstrap复习四——CSS组件2

1.输入框组：

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予.input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。

入框组只支持文本输入框 <input>

这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。

示例代码：

<h2 class="page-header">输入框组</h2>
<div class="input-group">
    <input type="text" class="form-control" placeholder="QQ邮箱">
    <span class="input-group-addon">@qq.com</span>
</div>
<br><br>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

运行效果：

小结（来自传智播客视频截图）

2.导航：

<h2 class="page-header">标签页</h2>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">首页</a></li>
    <li role="presentation"><a href="#">选项一</a></li>
    <li role="presentation"><a href="#">选项二</a></li>
</ul>

<h2 class="page-header">胶囊式标签页</h2>
<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">About</a></li>
    <li role="presentation"><a href="#">Contact us</a></li>
</ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

如：

<ul class="nav nav-pills nav-stacked">

效果：

3.路径导航

<h2>路径导航</h2>
<ol class="breadcrumb">  <!--breadcrumb-->
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active">Join Us</li>
</ol>

运行效果：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

5.反色的导航条

<h2 class="page-header">反色的导航条</h2>
<nav  class="navbar navbar-inverse">
    <ul class="nav navbar-nav">   <!--注意：这一部分很重要navbar-nva-->
        <li ><a href="#">Home</a></li>
        <li class="active"><a href="#">About</a></li>
        <li><a href="#">Join Us</a></li>
    </ul>
</nav>

运行效果：

带搜索的导航条：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">CRM logo</a>
        </div>
        <ul class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">关系</a></li>
                <li><a href="#">商机</a></li>
                <li><a href="#">角色</a></li>
                <li><a href="#">报表</a></li>
                <li><a href="#">客户</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="search">
                    <button type="submit" class="btn btn-danger">Search</button>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" >Bootstrap</a></li>
            </ul>
        </div>
    </div>
</nav>

运行结果：

6.缩略图：

.thumbnail

.caption

示例代码：

<h2 class="page-header">缩略图-金陵十二钗</h2>
<div class="row">          <!--注意要有row-->
    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/daiyu.jpg"  ></a>   <!--class="thumbnail实现缩略图效果"-->
        <a href="#"><h5 class="caption">林黛玉</h5></a> <!--.caption实现标题说明效果-->
    </div>
    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/baochai.jpg" ></a>
        <a href="#"><h5 class="caption">薛宝钗</h5></a>
    </div>
    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/xiangyun.jpg"></a>
        <a href="#"><h5 class="caption">史湘云</h5></a>
    </div>


    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/tanchun.jpg" ></a>
        <a href="#"><h5 class="caption">贾探春</h5></a>
    </div>
    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/wangxifeng.jpg"></a>
        <a href="#"><h5 class="caption">王熙凤</h5></a>
    </div>
    <div class="col-md-4">
        <a href="#" class="thumbnail"><img src="images/liwan.jpg"></a>
        <a href="#"><h5 class="caption" >李纨</h5></a>
    </div>
</div>

运行效果：

7.分页

示例代码：

<div class="text-right">     <!--此处的div可以替换为nav,.text-right实现右对齐-->
    <ul class="pagination pagination-lg"> <!--.pagination实现分页效果，pagination-lg实现大按钮效果-->
        <li><a href="#">&laquo;</a></li>   <!--<a>标签不能少，&laquo;表示"<<"-->
        <li class="active"><a href="#" >1</a></li>      <!--.active实现当前页为激活状态，该类写在li里面而不是a里面-->
        <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="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

运行效果：

8..container 或 .container-fluid 容器，用于将导航条居中对齐。（图片来自传智播客视频教程）