adminlte支持html5吗,在ASP.NET MVC5项目中加入Adminlte

1 将adminlte全部复制进Content文件夹下 事先创建一个Content目录

2 使用 bundles相关的JS和CSSbundles.Add(new StyleBundle("~/Content/adminlte/bootstrap/css").Include(

"~/Content/adminlte/bootstrap/css/bootstrap.min.css",

"~/Content/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css",

"~/Content/adminlte/dist/css/AdminLTE.min.css",

"~/Content/adminlte/dist/css/skins/skin-blue.min.css"));

bundles.Add(new ScriptBundle("~/bundles/adminlte").Include(

"~/Content/adminlte/plugins/jQuery/jquery-2.2.3.min.js",

"~/Content/adminlte/bootstrap/js/bootstrap.min.js",

"~/Content/adminlte/dist/js/app.min.js"));

bundles.Add(new ScriptBundle("~/bundles/adminlte/js").Include(

"~/Content/adminlte/dist/js/raphael-min.js",

"~/Content/adminlte/plugins/morris/morris.min.js",

"~/Content/adminlte/plugins/sparkline/jquery.sparkline.min.js",

"~/Content/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",

"~/Content/adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",

"~/Content/adminlte/plugins/knob/jquery.knob.js",

"~/Content/adminlte/dist/js/moment.min.js",

"~/Content/adminlte/plugins/daterangepicker/daterangepicker.js",

"~/Content/adminlte/plugins/datepicker/bootstrap-datepicker.js",

"~/Content/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js",

"~/Content/adminlte/plugins/slimScroll/jquery.slimscroll.min.js",

"~/Content/adminlte/plugins/fastclick/fastclick.js",

"~/Content/adminlte/dist/js/pages/dashboard.js",

"~/Content/adminlte/dist/js/demo.js"));

bundles.Add(new StyleBundle("~/Content/adminlte/css").Include(

"~/Content/adminlte/plugins/iCheck/flat/blue.css",

"~/Content/adminlte/plugins/morris/morris.css",

"~/Content/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css",

"~/Content/adminlte/plugins/datepicker/datepicker3.css",

"~/Content/adminlte/plugins/daterangepicker/daterangepicker.css",

"~/Content/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"));

3 两个字体和图标的引入

4 添加布局视图

现在我们新建一个布局页，取名为_AdminLayout

注意，我布局而中，引用了1个分布局，一个是菜单，同时在中间引入了内容标签html>

@ViewBag.Title 

@Styles.Render("~/Content/adminlte/bootstrap/css")

@Styles.Render("~/Content/adminlte/css")

MOa

MydhhOa

Toggle navigation

• 4

  • You have 4 messages

  • •                                                     

      Support Team

       5 mins

      Why not buy a new awesome theme?

  • See All Messages

• 10

  • You have 10 notifications

  • •  5 new members joined today

  • View all

• 9

  • You have 9 tasks

  • • Design some buttons

      20%

      20% Complete

  • View all tasks

•                                 

  Alexander Pierce

  •                                     

    Alexander Pierce - Web Developer

    Member since Nov. 2012

  • Followers

    Sales

    Friends

  • Profile

    Sign out

@Html.Partial("Menu")

@RenderBody()

Anything you want

Copyright © 2016 Company. All rights reserved.

Recent Activity

• Langdon's Birthday

  Will be 23 on April 24th

Tasks Progress

• Custom Template Design

  70%

Stats Tab Content

General Settings

Report panel usage

Some information about this general settings option

@Scripts.Render("~/bundles/adminlte")

@Scripts.Render("~/bundles/adminlte/js")

@RenderSection("scripts", required: false)

然后菜单页的布局为：

            

Alexander Pierce

 Online

• HEADER
•  Link
•  Another Link

•  Multilevel

  • Link in level 2
  • Link in level 2

下面添加一个用户列表 作为测试我们的项目@model IEnumerable

@{

ViewBag.Title = "List";

Layout = "~/Views/Shared/_AdminLayout.cshtml";

}

用户管理

针对所有的用户清单进行操作

1.  Level
2. Here

添加

 编辑

  删除

 角色授权

 重置密码

  搜索

用户名电子邮件生日QQ号码电话号码创建时间

@foreach (var user in Model)

{

@Html.DisplayFor(m => user.UserName)@Html.DisplayFor(m => user.Email)@Html.DisplayFor(m => user.BirthDate, "DateTimeTemplate")@Html.DisplayFor(m => user.QQ)@Html.DisplayFor(m => user.PhoneNumber)@Html.DisplayFor(m => user.CreateTime, "DateTimeTemplate") 

@Html.ActionLink("详情", "DetailsList", new { id = user.Id }, new { @class = "btn btn-info" })

@Html.ActionLink("编辑", "Edit", new { id = user.Id },new { @class= "btn btn-success" })

@Html.ActionLink("删除", "Del", new { id = user.Id }, new { @class = "btn btn-warning" })

@Html.ActionLink("重置", "ResetPassword", new { id = user.Id }, new { @class = "btn btn-warning" })

}

好了 效果如下