1。序文
最近、バックエンド管理システムを構築する必要があります。ブートストラップを使用して、見栄えの良いバックエンドテンプレートを作成する予定です。 CSSとJSは少し重いと思います。
そこで、私は自分のテンプレートを構築するためにブートストラップに完全に頼ることを計画しています。
左側の折りたたみメニューから始めます。写真を見てください。
2。CSSコード
以下はカスタムCSSコードです。システムは内部で使用されるため、Chromeが推奨され、FirefoxはIEとは見なされません。
＃main-nav {margin-left：1px;}＃main-nav.nav-tabs.nav-stacked> li> a {padding：10px 8px; font-size：12px; font-weight：600; color：＃4a515b;背景：＃e9e9; 100％）;背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、#fafafa）、カラーストップ（100％、＃e9e9e9））;背景：-webkit-linear-gradient（top、#fafafa 0％、＃e9e9e9 100％）; 100％）;背景：-ms-linear-gradient（top、#fafafa 0％、＃e9e9e9 100％）;背景：線形勾配（#fafafa 0％、＃e9e9e9 100％）;背景：線形勾配（トップ、#fafafafa 0％、＃e9e9e99％）; 100％）;フィルター：progid：dmimmagetransform.microsoft.gradient（startcolorstr = '＃fafafa'、endcolorstr = '＃e9e9e9'）; - ms-filter： "progid：dmiximagetransform.microsoft.gradient（startcolortr = ' SOLID＃D5D5D5; Border-Radius：4PX;}＃main-nav.nav-tabs.nav-stacked> a> a> span {color：＃4a515b;}＃main-nav.nav-tabs.nav-stacked> li.active> a、＃main-nav.nav-tabs.nav-stabsed> ＃3C4049;背景：-MOZ-LINEAR-GRADIENT（TOP、＃4A515B 0％、＃3C4049 100％）; ＃4A515B 0％、＃3C4049 100％）;背景：-o-linear-gradient（top、＃4a515b 0％、＃3c4049 100％）; 100％）;バックグラウンド：線形勾配（TOP、＃4A515B 0％、＃3C4049 100％）;フィルター：ProgID：DimbyAgetransForm.Microsoft.Gradient（startColorStr = '＃4A515B'、EndColorStr = '＃3C4049'）; "Progid：dmixegetransform.microsoft.gradient（startcolorstr = '＃4a515b'、endcolorstr = '＃3c4049'）;"＃2b2e33;} {color：#fff;}＃main-nav.nav-tabs.nav-stacked> li {magne-bottom：4px;}/*define secondary menu style*/。secondmenu a {font-size：10px; color：＃4a515b; text-align：center;}。 5px;}。navbar-brand {background：url（ ''）no-repeat 10px 8px; display：inline-block; vertical-align：middle; padding-left：50px; color：#fff;}3。HTMLコード
HTMLコードは比較的簡単です。 data-toggle http://v3.bootcss.com/components/こちらが紹介です。
<div role = "navigation"> <div> <div> <a href = "/admin/index.html" id = "logo"> configuration management system（travel monthle package）</a> </div> </div> <div> <ul id = "main-nav" style = "" ""> <li> <a < href = "＃システムセット" data-toggle = "collapse"> <i> </i>システム管理<span> </span> </a> <ul id = "systemsetting" style = "height：0px;"> <li> <a href = "＃"> <i> </i>ユーザー管理</a>管理</a> </li> <li> <a href = "＃"> <i> </i>役割管理</a> </li> <li> <a href = "＃"> <i> </i>パスワードの変更</li> <li> <li> <a href = "＃"＃ "> <i> href = "./ plans.html"> <i> </i>材料管理</a> </li> <li> <a href = "./ grid.html"> <i> </i>配布構成<span> 5 </span> </a> </li> <li> <a href = "./ plans.html"> </i> </i> </i>構成<span> 5 </span> </a> </li> <li> <a href = "./ charts.html"> <i> </i>文字統計</a> </li> <li> <a href = "＃"> <i> </i>システムについてのi> <i> </i>
4。CSSとJSを参照してください
<link href = "http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel = "styleSheet"> <script src = "http://cdn.bootcss.com/jquery/2.1.1.1/jquery.min.js"> src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
wulin.comは、ブートストラップ関連のトピックを推奨しています。
ブートストラップコンポーネント操作スキル
ブートストラップ関連の知識の概要
上記は、左折り畳みメニュー（i）のシステムテンプレートを作成するブートストラップに関する関連する知識です。次の記事では、いくつかのバグを修正します。左折り畳みメニュー（II）のシステムテンプレートを作成するBootstrapを参照できます。この章では、左折りたたみメニュー（II）のシステムテンプレートを作成するブートストラップの導入を紹介します。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！