bootstrap实践学习总结（二）

此处总结应用：

1、搜索框   2、面包屑的响应式（screen大于一定数值时，在右上方展示，screen小时，在标题的下方展示）      

3、tabs的展示以及css样式

1、搜索框

一般样子如前边输入框，后边为查询按钮，如图：

此处会用到.input-group   .input-group-btn

<div class="input-group">
     <input type="text" name="q" class="form-control" placeholder="Search……" />
     <span class="input-group-btn">
          <button type="submit" name="search" id="search-btn" class="btn btn-flat" >
               <i class="fa fa-search"></i>
          </button>
     </span>
</div>

2、面包屑的响应式展示

a、screen>991px时，显示如

此时的代码，

.content-header>.breadcrumb {
    float: right;
    padding: 7px 5px;
    position: absolute;
    right: 0;
    top: 13px;
    background: transparent;
    font-size: 12px;
}

当然，整个的content-header的css中需要设置position：relative

b、screen<991px时，显示如

此时的代码，

@media screen and (max-width: 991px)
.content-header>.breadcrumb {
    float: none;
    background: #d2d6de;
    position: relative;
    margin-bottom: 5px 0 0 0;
    padding-left: 10px;
}

面包屑的html代码如下：

<ol class="breadcrumb">
    <li>
        <a href="">
            <i class="fa fa-dashboard"></i>
                 Home
        </a>
    </li>
    <li class="active">
        Dashboard
    </li>
</ol>

前边的大标题和二级标题，则可以通过h以及small来实现，small除了设置文字大小、颜色、内外边距，还有设置display：inline-block

<h1>
    Dashboard
    <small>Control panel</small>
</h1>

3、tabs的展示以及css样式

代码截图如下：