Bootstrap3 UI parts2
UI Parts2
Table
Simple Table
<table class="table"> </table>
To add border
table-bordered
<table class="table table-bordered"> </table>
Shrink height
table-condensed
Color
stripe
table-striped
table-hover
<table class="table table-bordered table-condensed table-striped table-hover">
<tr>
<th>Number</th><th>Name</th>
</tr>
<tr>
<td>1</td><td>Im Yoona</td>
</tr>
<tr>
<td>2</td><td>Kim Taeyeon</td>
</tr>
</table>
Error and Warning
Add some class to td, tr.
If you set these parameters in tr, design is applied to td inside of tr.
- active
- success
- warning
- danger
<table class="table table-bordered table-condensed table-striped table-hover">
<tr>
<th>Number</th><th>Name</th>
</tr>
<tr>
<td>1</td><td class="text-left success">Acchan</td>
</tr>
<tr>
<td>2</td><td class="text-center warning">Yuko</td>
</tr>
<tr>
<td>3</td><td class="text-right danger">Marikosama</td>
</tr>
</table>
Responsible
wrap using div with table-responsive
<div class="table-responsive">
<table>
<tr><th>Number</th><th>Name</th></tr>
<tr><td>1</td><td>Yoona</td></tr>
<tr><td>2</td><td>Taeyeon</td></tr>
<tr><td>3</td><td>Seohyun</td></tr>
<tr><td>4</td><td>Sooyoung</td></tr>
<tr><td>5</td><td>Yuri</td></tr>
</table>
</div>
Pagenation
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a><li> <li><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li class="disabled"><a href="#">»</a></li> </ul>
Sometime there is a case we want to disable Prev, Next.
active, disabled class are used for it
Size
- pagenation-sm
- pagenation-lg
these are in ul
<ul class="pagenation-sm">
Pager
<ul class="pager"> <li><a href="#">Prev</a></li> <li><a href="#">Next</a></li> </ul>
If you want to disable, add disabled in class
<li class="disabled">
List and list group
Delete black circle in front of list
<ul class="list-unstyled"> <li>Yoona</li> <li>Taeyoen</li> <li>Sooyong</li> </ul>
Horizontal layout
<ul class="list-inline"> <li>Yoona</li> <li>Taeyoen</li> <li>Sooyong</li> </ul>
<dl class="dl-horizontal"> <dt>A</dt> <dd>Yoona</dd> <dt>B</dt> <dd>Taeyon</dd> </dl>
List group
<ul class="list-group"> <li class="list-group-item"><span class="badge">10</span>A</li> <li class="list-group-item"><span class="badge">5</span>B</li> <li class="list-group-item">C</li> <li class="list-group-item">D</li> <li class="list-group-item">E</li> </ul>
active
<div class="listgroup"> <a href="#" class="list-group-item"><span class="badge">10</span>A</a> <a href="#" class="list-group-item active" ><span class="badge">5</span>B</a> <a href="#" class="list-group-item">C</a> </div>
With title
<div class="listgroup">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Title</h4>
<p class="list-group-item-text">Yoona!!!</p>
</a>
</div>
Tab
Basic Style
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Member</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Discography</a></li>
<li class="disabled"><a href="#">Admin</a></li>
</ul>
</div>
If you want to use same width, add nav-justified
<div class="col-xs-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">List</a></li>
<li><a href="#">Customer List</a></li>
<li class="disabled"><a href="#">Order List</a></li>
</ul>
</div>
Tab contents
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#customer" data-toggle="tab">Customer List</a></li>
<li><a href="#order" data-toggle="tab">Order List</a></li>
<li><a href="#product" data-toggle="tab">Product List</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="customer">Customer Contents</div>
<div class="tab-pane" id="order">Orders ContenstsContents</div>
<div class="tab-pane" id="product">Product Contents</div>
</div>
</div>