"Panels with nav tabs"
Bootstrap 3.3.0 Snippet by KatieLee

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h1>Panels with nav tabs.<span class="pull-right label label-default">:)</span></h1> </div> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1default" data-toggle="tab">購買記錄</a></li> <li><a href="#tab2default" data-toggle="tab">消費記錄</a></li> <li><a href="#tab3default" data-toggle="tab">送禮記錄</a></li> <li><a href="#tab4default" data-toggle="tab">基本資料</a></li> <li><a href="#tab5default" data-toggle="tab">修改密碼</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"> <p>購買記錄只顯示六個月內最近 100 筆。</p> <p>請注意!如果您刷卡後的點數已有消費過,則無法為您辦理退刷喔!</p> <div class="container"> <div class="row"> <div class="col-md-9"> <table class="table table-striped table-hover"> <thead> <tr> <th>購買時間</th> <th>付費時間</th> <th>類別</th> <th>金額</th> <th>點數</th> <th>狀態</th> </tr> </thead> <tbody> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="tab-pane fade" id="tab2default"> <p>注意!消費記錄只顯示六個月內最近 100 筆記錄。</p> <div class="container"> <div class="row"> <div class="col-md-9"> <table class="table table-striped"> <thead> <tr> <th>主播暱稱</th> <th>費率</th> <th>消費點數</th> <th>連線</th> <th>開始</th> <th>結束</th> </tr> </thead> <tbody> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="tab-pane fade" id="tab3default"> <p>注意!送禮記錄只顯示六個月內最近 100 筆記錄。</p> <div class="container"> <div class="row"> <div class="col-md-9"> <table class="table table-striped"> <thead> <tr> <th>主播暱稱</th> <th>點數</th> <th>名稱</th> <th>在聊天室送禮</th> <th>時間</th> </tr> </thead> <tbody> <tr> <td>測試主播</td> <td>2000</td> <td>test</td> <td>10,000</td> <td>10,000</td> </tr> <tr> <td>測試主播</td> <td>1000</td> <td>test</td> <td>10,000</td> <td>10,000</td> </tr> <tr> <td>測試主播</td> <td>300</td> <td>test</td> <td>10,000</td> <td>10,000</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="tab-pane fade" id="tab4default"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form role="form"> <h4>基本資料 </h4> <hr class="colorgraph"> <div class="form-group"> <input type="text" name="user_id" id="user_id" class="form-control input-lg" placeholder="帳號" tabindex="2"> </div> <div class="form-group"> <input type="text" name="phone_number" id="phone_number" class="form-control input-lg" placeholder="聯繫電話" tabindex="3"> </div> <fieldset disabled> <div class="form-group"> <input type="email" name="email" id="disabledTextInput" class="form-control input-lg" placeholder="usermail@test.com"> </div> </fieldset> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-md-6"><input type="submit" value="送出" class="btn btn-primary btn-block " tabindex="7"></div> <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-default btn-block ">重設</a></div> </div> </form> </div> </div> </div> <div class="tab-pane fade" id="tab5default"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form role="form"> <h3>修改密碼 </h3> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="新密碼" tabindex="5"> </div> </div> <div class="col-xs-12 col-sm-6 "> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="確認新密碼" tabindex="6"> </div> </div> </div> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-md-6"><input type="submit" value="送出" class="btn btn-primary btn-block btn-lg" tabindex="7"></div> <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-default btn-block btn-lg">重設</a></div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <br/>
.panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .panel.with-nav-tabs .nav-justified{ margin-bottom: -1px; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { color: #555; background-color: #fff; border-color: #ddd; border-bottom-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu { background-color: #f5f5f5; border-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #777; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #555; } /********************************************************************/ /*** PANEL PRIMARY ***/ .with-nav-tabs.panel-primary .nav-tabs > li > a, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > .open > a, .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover, .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu { background-color: #428bca; border-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { background-color: #4a9fe9; } /********************************************************************/ /*** PANEL SUCCESS ***/ .with-nav-tabs.panel-success .nav-tabs > li > a, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > .open > a, .with-nav-tabs.panel-success .nav-tabs > .open > a:hover, .with-nav-tabs.panel-success .nav-tabs > .open > a:focus, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; background-color: #d6e9c6; border-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.active > a, .with-nav-tabs.panel-success .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.active > a:focus { color: #3c763d; background-color: #fff; border-color: #d6e9c6; border-bottom-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu { background-color: #dff0d8; border-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #3c763d; } /********************************************************************/ /*** PANEL INFO ***/ .with-nav-tabs.panel-info .nav-tabs > li > a, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > .open > a, .with-nav-tabs.panel-info .nav-tabs > .open > a:hover, .with-nav-tabs.panel-info .nav-tabs > .open > a:focus, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; background-color: #bce8f1; border-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.active > a, .with-nav-tabs.panel-info .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.active > a:focus { color: #31708f; background-color: #fff; border-color: #bce8f1; border-bottom-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu { background-color: #d9edf7; border-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #31708f; } /********************************************************************/ /*** PANEL WARNING ***/ .with-nav-tabs.panel-warning .nav-tabs > li > a, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > .open > a, .with-nav-tabs.panel-warning .nav-tabs > .open > a:hover, .with-nav-tabs.panel-warning .nav-tabs > .open > a:focus, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; background-color: #faebcc; border-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.active > a, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus { color: #8a6d3b; background-color: #fff; border-color: #faebcc; border-bottom-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu { background-color: #fcf8e3; border-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #8a6d3b; } /********************************************************************/ /*** PANEL DANGER ***/ .with-nav-tabs.panel-danger .nav-tabs > li > a, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; } .with-nav-tabs.panel-danger .nav-tabs > .open > a, .with-nav-tabs.panel-danger .nav-tabs > .open > a:hover, .with-nav-tabs.panel-danger .nav-tabs > .open > a:focus, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; background-color: #ebccd1; border-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.active > a, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus { color: #a94442; background-color: #fff; border-color: #ebccd1; border-bottom-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu { background-color: #f2dede; /* bg color */ border-color: #ebccd1; /* border color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #a94442; /* normal text color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ebccd1; /* hover bg color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; /* active text color */ background-color: #a94442; /* active bg color */ }

Related: See More


Questions / Comments: