Bootstrap ~ Panel and Table, bootstrappanel

Bootstrap ~ Panel and Table, bootstrappanel

When we design a page, parts are required, and none of the websites are listed in the column. Unless you are reading a novel, your page design must be segmented, that is, it is called to the raster System in bootstrap because of multiple panel components, and after the macro layout of each column in each row, it is to create small blocks in each large block, the small pieces can be implemented using Panel. The following is an example.

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

This is the simplest format, and its effect after running

In fact, when designing our own system, if the panel runs properly, you can quickly create a page, as shown below:

It is actually applied to a grid (1x2) and two panel components. The code for downgrading is as follows:

<Div class = "row"> <div class = "col-md-2"> <div class = "panel-default"> <div class = "panel-heading"> quick 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'> <li style = 'padding-left: 5px; 'class = 'level3'> <a href = '/Role/create'> Create a Role </a> </li> <li style = 'padding-left: 5px; 'class = 'level3'> <a href = '/Role/Index'> Manage Roles </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 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'> Manage menus </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'> Create an 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 = '/Banner/create'> new navigation </a> </li> <li style = 'padding-left: 5px; 'class = 'level3'> <a href = '/Banner/Index'> Management navigation </a> </li> </ul> </li> </ul> </div> <div class = "col-md-10"> <div class = "panel-default"> <div class = "panel-heading"> User List </div> <div class = "panel-body"> <p> User: <input type = "text" name = "UserName" id = "UserName"/> & nbsp; department: <input type = "text" name = "DeptName" id = "DeptName"/> </p> <p> time: <input type = "text" name = "StartTime" id = "StartTime"/> & nbsp; To & nbsp; & nbsp; <input type = "text" name = "EndTime" id = "EndTime"/> & nbsp; </p> <input type = "button" id = "search" value = "query"/> <a class = "button" href = "/WebUser/Create "> create a user </a> </p> <div id =" list "> <table class =" listTbl "> <tr> <th> </th> <th> NO. </th> <th> User Name </th> <th> real name </th> <th> Email </th> <th> Department </th>/ 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> <a href = "/WebUser/ create "> New </a> </span> <a href ="/WebUser/Edit/1 "> Edit </a> </span> <span> <a href = "/WebUser/Delete/1"> Delete </a> </span> <a href = "/WebUser/Approve/1"> Audit </a> </span> </div> </td> <td> 1 </td> <td> zzl </td> <span> zzl </ span> </td> <span> No Info </span> </td> <td> company </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. cur {background: none repeat scroll 0 0 #036cb4; border: 1px solid #036cb4; color: # fff; 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 class = "page_Standard"> <B> & nbsp; 1/1 & nbsp; one entry in total </B> </div> </td> </tr> </tfoot> </table> </div>View Code

Next let's take a look at the table. bootstrap is basically the css style added for it, and there is nothing special

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

The following table also contains a border

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

It also integrates the JS suspension effect.

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

OK. Here is the introduction of Panel and Table in the layout. Let's take a look at my bootstrap demo. It feels very simple and convenient!