When we design a page, chunking is necessary. No website is down in one column. Unless you are reading a novel, your page design must be chunked. That is, it is called the grid system in bootstrap due to multiple panel components. After the macro layout of each row and column is carried out, small pieces are created in each large block, and small pieces can be implemented using Panel. Let’s take a look at an example below.
<div><div>Panel heading without title</div><div>Panel content</div></div>
This is the simplest format, the effect after it runs
In fact, when we design our own system, if the panel runs properly, we can also quickly create a page, as follows
It is actually in one grid (1x2) and two panel components, the reduction code is as follows
<div><div><div>Quick Navigation</div><div><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</a><ul style='margin:0px;padding:0'><li 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'>Manage 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 Management</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Department/Index'>Management Department</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='/Menu/Index'>Management Menu Management</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>Employee 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'>Manage employees</a></li></ul></li><li style='padding-left:5px;' class='level2'><a href=''>Navigation management</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href=''>Navigation management</a><ul style='margin:0px;padding:0'><li style='padding-left:5px;' class='level3'><a href='/Banner/Create'>New navigation</a></li><li style='padding-left:5px;' class='level3'><a href='/Banner/Index'>Manage navigation</a></li></ul></li></ul></li></ul></ul></div></div><div><div>
User List
</div><div><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 href="/WebUser/Create">Create a user</a></p><div id="list"><table><tr><th></th><th>number</th><th>user name</th><th>real name</th><th>email</th><th>department</th><th>update</th><th>update</th><th>update</th><th>update</a></span><tbody><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>1</td><td>zzl</td><td><span>zzl</td><td><span>zzl</span></td><td><span>No Info</span> </td><td>Company</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: #ffff;font-weight: bold;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;background: #036cb4;}.page_Standard .disabled {border: #eee 1px solid;padding: 2px 5px;margin: 2px;color: #ddd;}</style><div style='clear: both'></div><div><b>1/1 in total</b></div></td></tfoot></table></div>Let's take a look at the table table. Bootstrap basically adds the css style to it, and there is nothing special.
<table>...</table>
There are also bordered tables below
<table>...</table>
At the same time, it also integrates the suspension effect of JS
<table>...</table>
ＯＫ, I’ll introduce the Panel and Table in the layout here. Finally, let everyone take a look at the demo of my bootstrap. It feels really simple and convenient!
The above is the relevant knowledge about Panel and Table in Bootstrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!