ページを設計するときは、チャンクが必要です。 1つの列にWebサイトがダウンしていません。小説を読んでいない限り、ページのデザインはチャンクする必要があります。つまり、複数のパネルコンポーネントにより、ブートストラップのグリッドシステムと呼ばれます。各行と列のマクロレイアウトが実行された後、各大きなブロックに小さな部分が作成され、パネルを使用して小さな部分を実装できます。以下の例を見てみましょう。
<div> <div>タイトルなしのパネル見出し</div> <div>パネルコンテンツ</div> </div>
これは最も単純な形式であり、実行後の効果
実際、独自のシステムを設計すると、パネルが適切に実行されている場合、次のようにページをすばやく作成することもできます。
実際には1つのグリッド（1x2）と2つのパネルコンポーネントにあり、削減コードは次のとおりです。
<div> <div> <div>クイックナビゲーション</div> <div> <ul> <li style = 'padding-left：5px;' class = 'level0'> <a href = ''> root </a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level1'> <a href = ''>システム管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level2'> <a href = ''>役割</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/role/create'>新しい役割</a> </li> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/role/index'>役割の管理</a> </li> </ul> </li> <li style = 'padding-left：5px;' class = 'level2'> <a href = ''>部門管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = ''>部門管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/department/index'>管理部門</a> </li> </ul> </li> <li style = 'padding-left：5px;' class = 'level2'> <a href = ''>メニュー管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/menue/index'>管理メニュー管理</a> </li> </ul> </li> <li style = 'padding-left：5px;' class = 'level2'> <a href = ''>従業員管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/webuser/create'>新しい従業員</a> </li> <li style = 'padding-left：5px;' class = 'level3'> <a href = '/webuser/index'>従業員の管理</a> </li> </ul> </li> <li style = 'padding-left：5px;' class = 'level2'> <a href = ''>ナビゲーション管理</a> <ul style = 'マージン：0px;パディング：0'> <li style = 'padding-left：5px;' class = 'level3'> <a href = ''>ナビゲーション管理</a> <ul style = 'マージン：0px;パディング：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'>ナビゲーションの管理</a> </li> </ul> </li> </ul> </li> </ul> </ul> </div> </div> <div> div>
ユーザーリスト
< /div> <div> <p>ユーザー：<入力タイプ= "テキスト" name = "username" id = "username" /> department：<input type = "text" name = "deptname" deptname "id =" deptname " /> < /p> <p>：<入力タイプ="テキストname = "starttime" id = "id =" endtime "" id "" endtime " /> /> </p> <p> <入力タイプ= "button" id = "search" value = "query"/> <a href = "/webuser/create">ユーザーを作成</a> </p> <div = "list"> <tr> </p> <div = "list"> <tr> </p> <名前</th> <th>メール</th> <th>部門</th> <th> update </th> <th> update </th> <th> update </th> <th> update </a> </span> <tbody> <td> <div> <span> <a href = "/webuser/details/1" 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> </td> <td> company </td> <td> 2015/6/22 21:51 </td> <td>通常</td> <td> 1 </td> </tr> </tbody> <tfoot> <tr> <td colspan = "9"> <スタイルタイプ= 'テキスト/ 0px; Text-align：center; font-family：0px; font-family：arial; font-size：12px;}。page_standard a.cur {background：なし繰り返しスクロール0＃036cb4;境界線：1px solid＃036cb4; 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;}。 ＃666;}。page_standard span {border：＃036cb4 1px solid; padding：2px 5px; font-weight：bold; margin：color：#fff; background：＃036cb4;}。 #ddd;} </style> <div style = 'clear：blote'> </div> <d div> <b>合計</b> </div> </td> </tfoot> </table> </div>テーブルテーブルを見てみましょう。 Bootstrapは基本的にCSSスタイルを追加し、特別なものはありません。
<表> ... </table>
以下には境界のある表もあります
<表> ... </table>
同時に、JSのサスペンション効果も統合します
<表> ... </table>
ｏｋレイアウトにパネルとテーブルを紹介します。最後に、私のブートストラップのデモをみんなに見てみましょう。本当にシンプルで便利です！
上記は、編集者が紹介したブートストラップのパネルとテーブルに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！