Bootstrap 常用框架的使用

原创

LyShark 2022-05-30 10:17:00 ©著作权

©著作权归作者所有：来自51CTO博客作者LyShark的原创作品，请联系作者获取转载授权，否则将追究法律责任

自定义模态对话框：

Bootstrap 常用框架的使用_ide

Bootstrap-table 表格的使用技巧

Hello, Bootstrap Table!

Bootstrap 常用框架的使用_ide_02

左侧导航栏

主导航


 仪表盘 

 CPU负载

 内存负载






布局选项
4

 顶部导航

 盒子布局

 固定布局

 折叠侧边栏





权限管理


 ChartJS

 Morris

 Flot

 Inline charts

sidebar-menu.css

.sidebar-menu{list-style:none;margin:0;padding:0;background-color:#222d32}.sidebar-menu>li{position:relative;margin:0;padding:0}.sidebar-menu>li>a{padding:12px 5px 12px 15px;display:block;border-left:3px solid transparent;color:#b8c7ce}.sidebar-menu>li>a>.fa{width:20px}.sidebar-menu>li:hover>a,.sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.sidebar-menu>li .label,.sidebar-menu>li .badge{margin-top:3px;margin-right:5px}.sidebar-menu li.header{padding:10px 25px 10px 15px;font-size:12px;color:#4b646f;background:#1a2226}.sidebar-menu li>a>.fa-angle-left{width:auto;height:auto;padding:0;margin-right:10px;margin-top:3px}.sidebar-menu li.active>a>.fa-angle-left{transform:rotate(-90deg)}.sidebar-menu li.active>.treeview-menu{display:block}.sidebar-menu a{color:#b8c7ce;text-decoration:none}.sidebar-menu .treeview-menu{display:none;list-style:none;padding:0;margin:0;padding-left:5px}.sidebar-menu .treeview-menu .treeview-menu{padding-left:20px}.sidebar-menu .treeview-menu>li{margin:0}.sidebar-menu .treeview-menu>li>a{padding:5px 5px 5px 15px;display:block;font-size:14px;color:#8aa4af}.sidebar-menu .treeview-menu>li>a>.fa{width:20px}.sidebar-menu .treeview-menu>li>a>.fa-angle-left,.sidebar-menu .treeview-menu>li>a>.fa-angle-down{width:auto}.sidebar-menu .treeview-menu>li.active>a,.sidebar-menu .treeview-menu>li>a:hover{color:#fff}

sidebar-menu.js

$.sidebarMenu=function(menu){var animationSpeed=300;$(menu).on('click','li a',function(e){var $this=$(this);var checkElement=$this.next();if(checkElement.is('.treeview-menu')&&checkElement.is(':visible')){checkElement.slideUp(animationSpeed,function(){checkElement.removeClass('menu-open');});checkElement.parent("li").removeClass("active");}
else if((checkElement.is('.treeview-menu'))&&(!checkElement.is(':visible'))){var parent=$this.parents('ul').first();var ul=parent.find('ul:visible').slideUp(animationSpeed);ul.removeClass('menu-open');var parent_li=$this.parent("li");checkElement.slideDown(animationSpeed,function(){checkElement.addClass('menu-open');parent.find('li.active').removeClass('active');parent_li.addClass('active');});}
if(checkElement.is('.treeview-menu')){e.preventDefault();}});}

Bootstrap 常用框架的使用_ide_03

导航栏下拉菜单

导航栏下拉菜单



产品主页

产品展示


下拉菜单


子菜单 1

子菜单 2

子菜单 3

Bootstrap 常用框架的使用_css_04

二级下拉菜单代码

heang.css

body{
    margin: 0;
    padding: 0;
    background-color: #F3F3F3;
    font-size: 14px;
    font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
    letter-spacing: 0;
    min-width: 1200px;
    color: #333333;
}

.hl_nav{
    background-color: #FD463E;
    position: relative;
    color: #ffffff;
    min-width: 1200px;
    height: 64px;
}
.hl_nav a{
    display: block;
    text-decoration: none;
}
.hl_nav .shade{
    position: absolute;
    width: 100%;
    height: 200px;
    top: 64px;
    left: 0;
    z-index: 1;
    background-color: #EEEEEE;
    opacity: 0.9;
    filter: alpha(opacity=90);
    box-shadow: 0 5px 15px #CCCCCC;
    display: none;
    border-bottom: #ffffff solid 1px;
    border-bottom: rgba(255,255,255,0.3) solid 1px;
}
.hl_nav .nav_list{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -600px;
    z-index: 2;
    padding: 0;
    list-style: none;
    width: 1200px;
    overflow: hidden;
    height: 64px;
}
.hl_nav .nav_list>li{
    padding: 0;
    float: left;
    margin: 0;
    width: 120px;
    text-align: center;
    height: 264px;
}
.hl_nav .nav_head{
    height: 64px;
    line-height: 64px;
    color: #ffffff;
    font-size: 16px;
    background-color: #FD463E;
}
.hl_nav .nav_head .icon{
    font-size: 18px;
}
.hl_nav .item{
    height: 40px;
    line-height: 40px;
    color: #333333;
    position: relative;
}
.hl_nav .item:hover:after{
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 2px;
    bottom: 5px;
    left: 30px;
    background-color: #FD463E;
}
.hl_nav .nav_list:hover{
    height: 264px;
    transition: height 0.3s;
}
.hl_nav .nav_list:hover + .shade{
    display: block;
}
.hl_nav .nav_list>li.highlight:hover{
    background-color: #ffffff;
}
.hl_nav .nav_list>li:hover .nav_head,.hl_nav .nav_list>li.active .nav_head{
    background-color: #EA0D04;
}
.hl_nav .nav_list>li.right{
    float: right;
}
.hl_nav .nav_list>li:hover .item{

}