Bootstrap 常用框架的使用 _bootstrap

人生处万类,知识最为贤。这篇文章主要讲述Bootstrap 常用框架的使用相关的知识，希望能为你提供帮助。
自定义模态对话框：

编辑模式

用户名:

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

关于我们

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