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樣式

代碼截圖如下：