使用Winstrap打造一个巨硬风格的网站

WinstrapWinJS组的副产品。如果你想做一个MDL(M$ Design Language,即原Metro)风格的在线APP,那么选择WinJS;如果你要做MDL风格的网站,那么选择Winstrap。

Winstrap(0.5.x)基于Bootstrap 3.3.7。

效果图:

下面介绍的是用ASP.NET Core MVC + VS,搭配Winstrap来实现MDL风格的网站,也可以看做一篇ASP.NET Core菜鸟教程(5分钟上手篇,建议搭配我的另一篇ASP.NET Core流水账阅读)。如果你说你用JSP(这不巨硬!)……那我不知道你为何会想用MDL风格;如果你说你用PHP,请先学习一个Peachpie。(以上纯属玩笑,毕竟Winstrap是前端库,用什么后端都大同小异。)

新建项目

打开VS2017,新建项目——.NET Core——ASP.NET Core Web 应用程序,别忘起一个项目名。随后的模板界面选择.NET Core 2.0;Web应用程序(M模型V视图C控制器)。注意:如果你预计网站中会让用户注册账户并登陆等,那么点击“更改身份验证”——“个人用户账户”——“存储应用内的用户账户”。这会直接在生成的网站中加入Identity相关的模板,对于新手来说会感觉结构复杂了很多,但是实际上很有用。确定后生成项目。

加入Winstrap

首先我们要新建一个bower配置文件,用于随后通过bower安装Winstrap:

在“解决方案资源管理器”中右键单击项目(最顶上“解决方案”下面的那个,写着你创建项目时起的名字),添加——新建项。(或者快捷键:Ctrl+Shift+A。)在ASP.NET Core——Web一栏中找到“Bower配置文件”,不要改名(bower.json),创建。

随后,再次右键单击项目,管理Bower程序包。在“浏览”中输入winstrap搜索,找到winstrap,安装。这样就把winstrap安装进了项目中。

修改项目以使用Winstrap

首先我们进入ASP.NET的布局模板页:View/Shared/_Layout.cshtml。这个模板是默认所有页面都使用的,在这里添加css或js引用是最方便不过了。

找到如下代码:

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>

把其中的bootstrap替换成winstrap的对应项:

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/Winstrap/dist/css/winstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/Winstrap/dist/js/vendor/bootstrap.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>

注意,这里只是修改了debug环境下的css和js,release模式的设定就在附近,请参照修改(由于没有CDN可用,仍然要使用本地提供的min.js/min.css)。

随后对此页的其他内容做一些修改:
<nav class="navbar navbar-inverse navbar-fixed-top"> 修改为 <nav class="navbar navbar-default"> ,并在其内部再嵌套一层:<div class="navbar-local color-accent theme-dark">

此步骤是为了实现MDL风格的蓝色导航栏。

可将:

                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

替换为:

                        <span class="sr-only">Toggle navigation</span>
                        <i class="glyph glyph-hamburger"></i>

使用图标字体而不是暴力的三条横线来表示菜单按钮。

随后,对主页:View/Home/Index.cshtml进行修改。由于Bootstrap默认可分为12列,而Winstrap则可分为24列,因此如果不对占列数进行修改的话,则会发现本来应该铺满页面的文字现在只挤在左半侧。修改方式是将col-md-3全部修改为col-md-6。

保存代码。默认VS调试方式是IIS Express。这种方式会在后台启动一个IIS Express服务器。好处是由于IIS Express驻留在后台,多次反复调试时比较快;坏处是IIS Express本身也一直占着内存。如果你不喜欢这种方式,可以点击调试按钮(IIS Express)右边的下三角,选择跟你项目同名的选项,也就是自托管。这样会启动一个命令行程序,用Kestrel来运行你的网站。

WinJS的应用实例

很多人应该没有见过太多WinJS(含Winstrap)的应用实例,毕竟就连很多MS自己的网站也并没有实装WinJS,虽然也是做成了MDL风格。对于WinJS应用最好的是Azure,特别是世纪互联的国区Azure!有条件的(1元试用等)可以去感受一下“由世纪互联运营的Office365”(比如 https://portal.partner.microsoftonline.cn/ 这个地址下面的)。流畅的动画、与Win10完全一致的控件UI,甚至包括音效。你会觉得这就是一个UWP(其实这么说没错,WinJS可以用来制作UWP)。

添加评论

Loading