bootstrap实践学习总结（二）

此处总结应用：

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

3、tabs的展示以及css样式

1、搜索框

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

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

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代码如下：

    

        
            
                 Home
        
    
    

        Dashboard
    

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

    Dashboard
    Control panel

3、tabs的展示以及css样式

代码截图如下：