Panel and table in bootstrap comprehensive analytic _javascript techniques

When we design a page, chunking is a must, no site is a column down, unless you are reading a novel, otherwise your page design must be divided, that is, because of multiple panel components, in the bootstrap to the grid system, and in each row of each column for a macro layout, is to build small chunks in each chunk, and small chunks can be implemented using a panel, and here's an example

<div class= "Panel Panel-default" >
<div class= "panel-heading" >panel heading, without title</div>
<div class= "Panel-body" >
Panel content
</div>

This is the simplest format, and it runs after the effect

In fact, when we design our own system, if the panel works properly, you can quickly create a page, as follows

It is actually in a grid (1x2) and two panel components, the reduced code is as follows

<div class= "Row" > <div class= "col-md-2" > <div class= "Panel Panel-default" > <div class= " Panel-heading "> Fast navigation </div> <div class=" Panel-body "> <ul><li style= ' padding-left:5px; ' class= ' Level0 ' ><a href= ' > Root </a><ul style= ' margin:0px;padding:0 ' ><li style= ' padding-left:5px '; class= ' level1 ' ><a href= ' > System Management </a><ul style= ' margin:0px;padding:0 ' ><li style= ' padding-left:5px ' class= ' level2 ' ><a href= ' ' > Role management </a><ul style= ' margin:0px;padding:0 ' Style= ' padding-left:5px ' class= ' level3 ' ><a href= '/role/create ' > New role </a></li><li style= ' padding-left:5px ' class= ' level3 ' ><a href= '/role/index ' > Admin role </a></li></ul></li> <li style= ' padding-left:5px ' class= ' level2 ' ><a href= ' ' > Department management </a><ul style= ' margin:0px;padding : 0 ' ><li style= ' padding-left:5px ' class= ' level3 ' ><a href= '/department/index ' > Management </a></li></ul></li><li style= ' padding-left:5px ' class= ' level2 ' ><a href= ' > Menu Management </a> <ul style= ' margin:0px;padding:0 ' ><li style= ' padding-left:5px ' class= ' level3 ' ><a href= ' > Management menu Management </a></li></ul></li><li style= ' padding-left:5px; ' class= ' Level2 ' ><a Href= ' > Staff management </a><ul style= ' margin:0px;padding:0 ' ><li style= ' padding-left:5px ' class= ' level3 ' ><a href= '/webuser/create ' > New employee </a></li><li style= ' padding-left:5px ' class= ' level3 ' > <a href= '/webuser/index ' > Management staff </a></li></ul></li><li style= ' padding-left:5px; ' class= ' Level2 ' ><a href= ' > Navigation management </a><ul style= ' margin:0px;padding:0 ' ><li ' padding-left:5px ' class= ' level3 ' ><a href= '/banner/create ' > New navigation </a></li><li style= ' padding-left:5px ' class= ' level3 ' ><a href= '/banner/index ' > Management navigation </a></li></ul></li ></ul></li></ul></li></ul> </div> </div> </div> <div class= "col-md-10" > <div class= "Panel Panel-default" > <div class= "panel-heading" >

User list

</div> <div class= "Panel-body" > <p> User: <input type= "text" name= "UserName" id= "UserName"/>    Department: <input type= "text" name= "Deptname" id= "Deptname"/> </p> <p> time: <input type= "Text" Name= "StartTime" id= "StartTime"/>     to     <input type= "text" Name= " Endtime "id=" Endtime "/>  </p> <p> <input type=" button "id=" search "value=" query "/> <a class= "button" href= "/webuser/create" > Set up a user </a> </p> <div id= "list" > <table class= "listtbl"
> <tr> <th></th> <th> number </th> <th> user name </th> <th> real name </th> <th>email </th> <th> owned Department </th> <th> Update date </th> <th> status </th> <th> System </th> </tr> <tbody> <tr> <td> <div> <span> <a href= "/webuser/details/ 1 "> View </a> </span> <span> <a href="/webuseR/create "> New </a> </span> <span> <a href="/WEBUSER/EDIT/1 "> Edit </a> </span> < span> <a href= "/webuser/delete/1" > Delete </a> </span> <span> <a href= "/WEBUSER/APPROVE/1" > Audit </a> </span> </div> </td> <td> 1 </td> <td> zzl </td> <td> &L t;span>zzl</span> </td> <td> <span>no info</span> </td> <td> company &LT;/TD
> <td> 2015/6/22 21:51 </td> <td> normal </td> <td> 1 </td> </tr> </tbody> 
<tfoot> <tr> <td colspan= "9" > <style type= ' text/css ' >. page_standard {padding:5px; margin:0px;
Text-align:center;
font-family:0px;
font-family:arial;
font-size:12px; }. Page_standard a.cur{background:none Repeat scroll 0 0 #036cb4; border:1px solid #036cb4; color: #fff; font-weight:b
Old
margin:2px;
PADDING:2PX 5px; }. Page_standard a {border: #eee 1px solid; padding:2PX 5px;
margin:2px;
Color: #036cb4;
Text-decoration:none;
}. Page_standard a:hover {border: #999 1px solid color: #666;} page_standard a:active {border: #999 1px solid;
COLOR: #666; }. Page_standard span {border: #036cb4 1px solid; padding:2px 5px; font-weight:bold; margin:2px; color: #fff; Backgrou
Nd: #036cb4; Page_standard. Disabled {border: #eee 1px solid; padding:2px 5px; margin:2px; color: #ddd;} </style> <div Style= ' Clear:both ' ></div><div class= "Page_standard" ><b>  1/1   total 1 Records </  b></div> </td> </tr> </tfoot> </table> </div>

Let's look at the table Table,bootstrap basically is the CSS style added for it, nothing special

<table class= "Table table-striped" > ...

A table with a border is also below

<table class= "Table table-bordered" > ...

At the same time also integrates the JS suspension effect

<table class= "Table Table-hover" > ...

OK, for the layout of the Panel and table on the introduction here, and finally let everyone see my bootstrap demo, feeling really very simple, very convenient!

The above is a small set to introduce the bootstrap in the Panel and table of the relevant knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!