<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 */
}
