Bootstrap создает системный шаблон для складного меню слева (1)

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; размер шрифта: 12px; font-weigh 100%); фон: -вккит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0%, #fafafa), цветовой стоп (100%, #e9e9e9)); фон: -Вет-линейный градиен 100%); фон: -ms-linear-gradient (вверху, #FafaFA 0%, #E9E9E9 100%); Фон: линейно-градиент (вверху, #FAFA 0%, #E9E9E9 100%); фон: линейный градиент (Top, #FAFAFA 0%, #E9E9 100%); Фоин: Linear-Gradient (top # ##fafafa # # ##fafafafa # #%0%0%, #%0%, #%0%. 100%); Фильтр: Progid: dximageTransform.microsoft.gradient (startColorStr = '#fafafa', endColorStr = '#e9e9e9');-MS-Filter: "Progid: dximagetransform.microsoft.gradient (startcolorstr = '#fafafa', endColorStr. 1px solid #d5d5d5; border-radius: 4px;} #main-nav.nav-tabs.nav-Stacked> li> a> span {color: #4a515b;} #main-nav.nav-tabs.nav-stack> li.active> a, #main-nav.navs.nav-stack> li> a: #fff: #fff: #fff: #fff: #fff; #3C4049; фон: -моз-линейр-градиент (вверху, #4A515B 0%, #3C4049 100%); фон: -вбкит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0%, #4A515B), цветовой стоп (100%, #3C4049); #4A515B 0%, #3C4049 100%); Фон: -O-линейр-градиент (вверху, #4A515B 0%, #3C4049 100%); фон: -ms-linear-градиент (вверх 100%); фон: линейно-градиент (вверху,#4A515B 0%,#3C4049 100%); Фильтр: Прогид: dximageTransform.microsoft.Gradient (startColorStr = '#4A515B', EndColorStr = '#3C4049'); «Прогид: dximageTransform.microsoft.gradient (startColorStr = '#4A515B', endColorStr = '#3C4049')»; пограничный цвет:#2b2e33;}#main-nav.nav-tabs.nav-stached> li.active> a,#mainav.nav-navs.navs.navs.nav-stached> li. {color: #fff;} #main-nav.nav-tabs.nav-stacked> li {margin-bottom: 4px;}/*определить стиль вторичного меню*/. Secondmenu a {font-size: 10px; color: #4a515b; text-align: center;}. Navbar-static-top { # #2121 ;121; 5px;}. Navbar-brand {founal: url ('' ') без повторного перепорачивания 10px 8px; дисплей: inline-block; вертикальный Align: Middle; Padding-left: 50px; Color: #fff;}

3. HTML -код

HTML -код относительно прост. Data-toggle http://v3.bootcss.com/components/ Вот введение.

 <div rol = "navigation"> <div> <div> <a href = "/admin/index.html" id = "logo"> система управления конфигурацией (ежемесячный пакет) </a> </div> </div> <div> <div> <ul id = "main-nav" styl href = "#SystemsEtting" Data-toggle = "Collapsse"> <i> </i> управление системой <pran> </span> </a> <ul id = "systemsetting" style = "height: 0px;"> <li> <a href = "#"> <i> </i> Управление пользователем </a> </li> <li> <li> Управление </a> </li> <li> <a href = "#"> <i> </i> управление ролями </a> </li> <li> <a href = "#"> <i> </i> изменить пароль </a> </li> <li> <a href = "#"> </i> view </a> </li> href = "./ plans.html"> <i> </i> Управление материалами </a> </li> <li> <a href = "./ Grid.html"> <i> </i> Distribution Configuration <pan> 5 </span> </a> </li> <li> <a href = ". Конфигурация <pran> 5 </span> </a> </li> <li> <a href = "./ charts.html"> <i> </i> Статистика символов </a> </li> <li> <a href = "#"> <i> </i> о системе </a> </li> </ul> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> </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/jquery.min.min. src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>

Wulin.com рекомендует темы, связанные с начальной загрузкой:

Навыки работы компонента начальной загрузки

Сводка знаний, связанных с начальной загрузкой

Выше приведено соответствующие знания о начальной загрузке, создавая системный шаблон для левого складного меню (i). В следующей статье мы исправим для вас некоторые ошибки. Вы можете обратиться к начальной загрузке, создавая шаблон системы для левого меню складки (II). В этой главе представлено введение начальной загрузки, создавая шаблон системы для левого складного меню (II). Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!