基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

大家对Bootstrap框架知识了解多少

Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也有很多Bootstrap的插件能够提供给大家使用,但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上,介绍Bootstrap的各种基础知识和简单的使用;本文希望以基于C#的MVC实际项目的基础上,对Bootstrap开发框架进行全面的案例介绍,以实际项目的代码和效果截图进行讲解,力求详尽、直观为大家介绍这方面的经验和心得。

1、基于Metronic的Bootstrap开发框架总览

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合,整合了很多Bootstrap的前端技术和插件的使用,是一个非常不错的技术框架。本文以这个为基础,结合我对MVC的Web框架的研究,整合了基于MVC的Bootstrap开发框架,使之能够符合实际项目的结构需要的实际项目。

以下是我整体性项目的总的效果图。

启动菜单区的内容,动态从数据库里面获取,系统顶栏放置一些信息展示,以及提供用户对个人数据快速处理,如查看个人信息、注销、锁屏等操作,内容区域则主要是可视化展示的数据,可以通过树列表控件、表格控件进行展示,一般数据还有增删改查、以及分页的需要,因此需要整合各种功能的处理。另外,用户的数据,除了查询展示外,还需要有导入、导出等相关操作,这些是常规性的数据处理功能。确定好这些规则和界面效果后,我们可以通过代码生成工具进行生成,快速生成这些Web项目的界面效果了。

2、Bootstrap开发框架菜单展示

整个框架涉及了很多内容,包括常规Bootstrap的各种CSS特性的使用,以及菜单栏、Bootstrap图标管理、系统顶栏、树形控件JSTree、Portlet容器、Modal对话框、Tab控件、、下拉列表Select2、复选框iCheck、多文本编辑控件summernote、文件及图片上传展示fileinput、提示控件bootstrap-toastr和sweetalert、数值调整控件touchspin、视频播放展示控件video-player等等,这些特性在整体性的解决方案里面都有设计,集合这些优秀的插件,能够为我们的框架提供更强大的功能和丰富的界面体验。

本节继续回到框架的开始部分,菜单的处理和展示。一般为了管理方便,菜单分为三级,选中的菜单和别的菜单样式有所区分,菜单可以折叠最小化,效果如下所示。

在Bootstrap,构建菜单是一个相对比较容易的事情,主要是利用了UL和LI,通过样式的处理,就可以实现了菜单的布局设置了,代码如下所示。

        <ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
          <li class="start" id="1">
            <a href="/Home/index">
              <i class="icon-home"></i>
              <span class="title">首页</span>
              <span class="selected"></span>
              <span class="arrow open"></span>
            </a>
          </li>
          <li id="2">
            <a href="javascript:;">
              <i class="icon-basket"></i>
              <span class="title">行业动态</span>
              <span class="selected"></span>
              <span class="arrow open"></span>
            </a>
            <ul class="sub-menu">
              <li class="heading" style="font-size:14px;color:yellow">
                <i class="icon-home"></i>
                行业动态
              </li>
              <li>
                <a href="#">
                  <i class="icon-home"></i>
                  <span class="badge badge-danger">4</span>
                  政策法规
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-basket"></i>
                  <span class="badge badge-warning">4</span>
                  通知公告
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-tag"></i>
                  <span class="badge badge-success">4</span>
                  动态信息
                </a>
              </li>
            </ul>
          </li>
        </ul>

但是,我们一般的菜单是动态变化的,也就是需要从数据库里面获取,并设置到前端显示,这样我们就需要在MVC的控制器里面,输出菜单的内容,然后绑定到前端的界面上,实现菜单数据的动态化,同时这也是权限控制的基础处理。

在基类里面,我们可以在用户登陆后,获取菜单的数据放到ViewBag对象里面。

具体代码如下所示,先判断用户是否登陆,如果登陆,则获取用户的菜单数据,存在ViewBag里面待用。

/// <summary>
    /// 重写基类在Action执行之前的处理
    /// </summary>
    /// <param name="filterContext">重写方法的参数</param>
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
      base.OnActionExecuting(filterContext);
      //得到用户登录的信息
      CurrentUser = Session["UserInfo"] as UserInfo;
      if (CurrentUser == null)
      {
        Response.Redirect("/Login/Index");//如果用户为空跳转到登录界面
      }
      else
      {
        //设置授权属性,然后赋值给ViewBag保存
        ConvertAuthorizedInfo();
        ViewBag.AuthorizeKey = AuthorizeKey;
        //登录信息统一设置
        ViewBag.FullName = CurrentUser.FullName;
        ViewBag.Name = CurrentUser.Name;
        ViewBag.MenuString = GetMenuString();
        //ViewBag.MenuString = GetMenuStringCache(); //使用缓存,隔一段时间更新
      }
    }

其中,GetMenuString函数就是对菜单的组装处理。数据库中菜单的信息是一个树形结构,如下所示。

我们可以根据数据库的菜单信息,构建一部分界面用到的HTML代码。

 #region 定义的格式模板
      // javascript:;
      // {0}?tid={1}
      var firstTemplate = @"
      <li id='{3}'>
        <a href='{0}'>
          <i class='{1}'></i>
          <span class='title'>{2}</span>
          <span class='selected'></span>
          <span class='arrow open'></span>
        </a>";
      var secondTemplate = @"
        <li class='heading' style='font-size:14px;color:yellow'>
          <i class='{0}'></i>
          {1}
        </li>";
      var thirdTemplate = @"
        <li id='{3}'>
          <a href='{0}'>
            <i class='{1}'></i>
            {2}
          </a>
        </li>";
      var firstTemplateEnd = "</li>";
      var secondTemplateStart = "<ul class='sub-menu'>";
      var secondTemplateEnd = "</ul>";
      #endregion

例如三级菜单就可以通过代码进行生成。

 //三级
            icon = subNodeInfo.WebIcon;
            //tid 为顶级分类id,sid 为第三级菜单id
            tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID);
            url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;";
            sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);

当然,如果想提高并发量,可以减少菜单的频繁检索,把这部分数据放到MemeryCache里面,如下处理即可。

 public string GetMenuStringCache()
    {
      string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()
        {
          return GetMenuString();
        },
        null, DateTime.Now.AddMinutes(5) //5分钟以后过期,重新获取
      );
      return itemValue;
    }

3、布局页面的使用

同时,我们为了提高页面的重用,一般情况下,是把每个页面相同部分的内容抽离出来,放到总的布局页面上,这样处理内容区域外,其他部分全部是继承自布局视图页面的内容了,我们的动态菜单部分,也是在布局视图里面的一部分内容。

上图的_Layout.cshtml就是基于C#的MVC总的布局视图页面。这样,我们在这个页面里面,设定了菜单的展示内容,以及留出主页面内容的部分,以及脚本的部分展示,就可以了。

菜单的展示代码如下所示:

布局页面留出的页面展示Section如下所示。

由于Bootstrap一般把JS文件放到最后加载,因此我们在布局页面保留部分必备的Jquery等脚本外,还需要把脚本部分内容放到页面底部进行加载,并且我们脚本加载可以利用MVC的Bundles技术进行压缩整合处理。关于这方面技术,可以参考我之前的文章介绍《基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码》。

这样,我们在各个子页面的视图里面,引入布局视图页面后,只需要编写个性化展示内容的部分即可,具体代码如下所示。

然后在页面底部,包含所需部分的脚本代码即可,这样在页面生成后,就会依据布局页面设置好的顺序块,进行合理的展示,并且是把所有部分内容进行整合了。

4、页面编辑工具Sublime Text的使用

我前面截图,很多是VS环境里面的,不过一般我们编辑视图页面的时候,都是采用Sublime Text这个强大的编辑工具的,丰富的插件、智能语法提示等,会让你用了之后爱不释手,是编辑视图页面非常快速的利器,强烈推荐使用。

VS一般我们用来做文件管理,以及编译等处理就可以了。

以上内容是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理的相关知识,希望对大家有所帮助,如果大家想了解更多资讯敬请关注我们网站!

时间: 2016-05-11

BootStrap点击下拉菜单项后显示一个新的输入框实现代码

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

第九篇Bootstrap导航菜单创建步骤详解

创建一个标签式的导航菜单的步骤是: •在ul标签上加上class  nav •再ul标签上加上 class .nav-tabs. 在li标签上加上 active表示激活该项 <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">

Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

Bootstrap菜单按钮及导航实例解析

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog

Bootstrap入门书籍之(四)菜单、按钮及导航

我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可以方便快捷帮助我们搭建网站,并且能达到一个不错的显示效果.我们最需要注意的就是: HTML的结构 和bootstrap提供 添加到结构上的类以及属性 . 这些组件的交互功能是依赖于jQuery库实现的,所以还必须引入jQuery.js,且必须在Bootstrap.js之前.正式上线的话直接使用压缩版本就可以了如下: <script src="../js/jquery-min-1.11.3.js&q

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

Bootstrap打造一个左侧折叠菜单的系统模板(二)

在上一篇文章给大家介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一),具体内容介绍可以点击了解详情. 1. 关于上一篇文章BUG 上一篇文章中有几位朋友提出的问题和BUG. 我简单的说一下. 1>. IE版本的支持? 我写的这些只是测试火狐谷歌浏览.在IE8+下可以添加代码以实现兼容. <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&qu

第一次接触神奇的Bootstrap菜单和导航

本篇将主要介绍Bootstrap的菜单.导航. 本篇开始将引入javascript相关文件,如下: <!-- 放置在body标签结尾处,使页面加载速度更快 --> <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插

Bootstrap打造一个左侧折叠菜单的系统模板(一)

1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码

一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍 首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好地扩展.Web层依赖应用服务接口,并且使

js 全兼容可高亮二级缓冲折叠菜单

在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都

js实现的后台左侧管理菜单代码

本文实例讲述了js实现的后台左侧管理菜单代码.分享给大家供大家参考.具体如下: 这是一个完美的后台左侧管理菜单,从样式来说,貌似出自专业人士之手,风格清新,操作实用,用在WEB管理系统中或用在网站后台管理中,最恰当不过了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

Bootstrap入门书籍之(三)栅格系统

实现原理 栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案.下面是官方文档中的解说: Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局. 我们来理解一下这一段话,可以发现其中最重要的部分就是 移动设备优先 ,那么什么是移动设备优先呢? Bootstrap的基础CS

JS实现带有3D立体感的银灰色竖排折叠菜单代码

本文实例讲述了JS实现带有3D立体感的银灰色竖排折叠菜单代码.分享给大家供大家参考,具体如下: 这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单,可以自己为菜单加一个背景,CSS中预留有代码,这是比较标准和经典的一款后台管理模式的菜单,Div+Css结构,符合标准,修改方便,挺不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-left-yhs-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰,其实也不难,如果能够熟练使用Bootstrap,并且有一套特定