Bootstrap 常用框架的使用

Posted 2022-05-30 lyshark

自定义模态对话框：

弹框


  
    
      
        
编辑模式

      
      
        
        
            用户名:
            
              
            
        
      
      
      
        关闭
        提交数据
      
    
  

Bootstrap-table 表格的使用技巧

Hello, Bootstrap Table!

左侧导航栏

主导航


 仪表盘 

 CPU负载

 内存负载






布局选项
4

 顶部导航

 盒子布局

 固定布局

 折叠侧边栏





权限管理


 ChartJS

 Morris

 Flot

 Inline charts

sidebar-menu.css

.sidebar-menulist-style:none;margin:0;padding:0;background-color:#222d32.sidebar-menu>liposition:relative;margin:0;padding:0.sidebar-menu>li>apadding:12px 5px 12px 15px;display:block;border-left:3px solid transparent;color:#b8c7ce.sidebar-menu>li>a>.fawidth:20px.sidebar-menu>li:hover>a,.sidebar-menu>li.active>acolor:#fff;background:#1e282c;border-left-color:#3c8dbc.sidebar-menu>li>.treeview-menumargin:0 1px;background:#2c3b41.sidebar-menu>li .label,.sidebar-menu>li .badgemargin-top:3px;margin-right:5px.sidebar-menu li.headerpadding:10px 25px 10px 15px;font-size:12px;color:#4b646f;background:#1a2226.sidebar-menu li>a>.fa-angle-leftwidth:auto;height:auto;padding:0;margin-right:10px;margin-top:3px.sidebar-menu li.active>a>.fa-angle-lefttransform:rotate(-90deg).sidebar-menu li.active>.treeview-menudisplay:block.sidebar-menu acolor:#b8c7ce;text-decoration:none.sidebar-menu .treeview-menudisplay:none;list-style:none;padding:0;margin:0;padding-left:5px.sidebar-menu .treeview-menu .treeview-menupadding-left:20px.sidebar-menu .treeview-menu>limargin:0.sidebar-menu .treeview-menu>li>apadding:5px 5px 5px 15px;display:block;font-size:14px;color:#8aa4af.sidebar-menu .treeview-menu>li>a>.fawidth:20px.sidebar-menu .treeview-menu>li>a>.fa-angle-left,.sidebar-menu .treeview-menu>li>a>.fa-angle-downwidth:auto.sidebar-menu .treeview-menu>li.active>a,.sidebar-menu .treeview-menu>li>a:hovercolor:#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(););

导航栏下拉菜单

导航栏下拉菜单



产品主页

产品展示


下拉菜单


子菜单 1

子菜单 2

子菜单 3

二级下拉菜单代码

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

超实用的CSS3横向

















    
                
                网站首页
                        二级导航1
            二级导航2
            二级导航3
            二级导航4
            二级导航4
        

                
                在线下载
                        二级导航1
            二级导航2
            二级导航3
        

                
                成功案例
                        二级导航1
            二级导航2
            二级导航3
            二级导航4
            二级导航4
        

                
                新闻动态
                        二级导航1
            二级导航2
            二级导航3
        

                
                与我联系
                        二级导航1
            二级导航2
        

                
                关于我们
                    


                
                个人中心
                        修改资料
            在线充值
            升级会员
            安全设置
            退出帐号

版权声明：本博客文章与代码均为学习时整理的笔记，文章 [均为原创] 作品，转载请 [添加出处] ，您添加出处是我创作的动力！