BootBrander Bootstrap. less 生成器用户界面( 第 1部分是用户界面上的/Set )

分享于 

18分钟阅读

Web开发

  繁體

介绍

我在大部分工作中都使用 Bootstrap。 我喜欢它,我发现我不需要写多大的CSS,因为大多数情况都已经存在了。

在这里,如果我需要不同的外观,那么我首先要做的是在 variables.less 文件中更改 .less 变量。

但是顾客应该对颜色有一定的控制。 我们将在这个项目中创建一个 UI,我们可以在其中更改插件。从 Bootstrap variables.less 文件中,可以更少地更改变量。

这些变化应该反映在现场。

这篇文章将成为一系列文章的一部分。 我在本系列完成后所做的演示可以在 http://bootbrander.azurewebsites.net/ 找到。 在本文系列的最后,你将不会精确地结束这一点,因为我仍然在改进它。

文章索引

前提条件

我在使用 Visual Studio 2013.在这个例子中,我创建了一个标准的MVC网站。 这样做,就会得到一个带有 Bootstrap的标准设置。

之后,我安装了以下NuGet软件包:

  • Bootstrap LESS 源
  • less.js
  • knockoutjs

的工作方式是,Bootstrap 中的所有组件都有自己的插件。 但是所有的主要颜色都是通过一个名为 variables.less的文件设置的。 更改颜色,它将通过整个 boostrap.css,这是由 bootstrap.less 生成。

Bootstrap.less ( 部分)
//// Variables// --------------------------------------------------//== Colors////## Gray and brand colors for use across Bootstrap.@gray-base: #000;@gray-darker: lighten(@gray-base, 13.5%); // #222@gray-dark: lighten(@gray-base, 20%); // #333@gray: lighten(@gray-base, 33.5%); // #555@gray-light: lighten(@gray-base, 46.7%); // #777@gray-lighter: lighten(@gray-base, 93.5%); // #eee//@brand-primary: darken(#428bca, 6.5%);//#337ab7@brand-primary: #337ab7;@brand-success: #5cb85c;@brand-info: #5bc0de;@brand-warning: #f0ad4e;@brand-danger: #d9534f;

如你所见所有的颜色都是变量。 这只是文件的一部分。 但重点是这些颜色是我们想要获得的。

Less.js

Less.js 允许你将实际的LESS 文件直接插入到你的站点。 这样,你就可以动态更改 less 变量。 这是一个包含 ContentBootstrap文件的文件夹,它包含了一个名为的文件夹,。

我们将需要更改 _Layout.cshtml 文件,以便将所有内容都挂。 我们将首先删除此行:

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

我们将加入这些线:

<linkhref="~/Content/bootstrap/bootstrap.less"rel="stylesheet/less"type="text/css"/><scriptsrc="~/Scripts/less-1.5.1.min.js"></script>

因为插件不能识别,所以你可能会遇到麻烦,因为 。 如果是,你将在 bootstrap.less 文件上得到 404个错误。 要改变这一点,你必须在你的web.config 中声明它的mimeType

将这个放入 system.webServer 标签。

<staticContent><mimeMapfileExtension=".less"mimeType="text/css"/></staticContent>

测试

如果一切正常,你应该能够通过 less.modifyVars 方法实时更改 less 变量。

  • 启动你的网站
  • 它应该显示 ASP.NET 欢迎页面
  • 在控制台中,运行以下命令:
less.modifyVars({ "@body-bg": "#FF0000" });
  • 页面的background 现在应该是红色的;

设置用户权限列表

我们在小测试中看到,有一个叫做 @body-bg的变量控制 background 颜色。 让我们先用这个来设置我们的接口。

但是首先,我们需要一个源代码来将我们的JavaScript代码。 我已经把" main.js"命名为并将它粘贴在 root 文件夹中。

接下来,我们将需要将它添加到我们的_Layout.cshtml 文件的底部。 就在 body 标签和其他包下面。 它应该是这样的:

 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @Scripts.Render("~/bundles/knockout")
 @Scripts.Render("~/main.js")
 @RenderSection("scripts", required: false)</body>

现在,我们将创建一个 knockout viewModel 并在其中粘贴一个变量 @body-bg。 并将它的绑定到 HTML。 我们的main.js 应该如下所示:

/* globals ko, less */(function () {
 var viewModel = window.viewModel = {
 "@body-bg": ko.observable('#ffffff')
 };
 $(document).ready(function () {
 ko.applyBindings(viewModel);
 });
})();

制作变量面板

我决定让包含变量的面板作为左边的一个列。 如果我想在其他视图中创建部分视图并粘贴到其他视图,我就可以在每个页面中使用它,我将把它放在 _Layout.cshtml。

查找这里部分:

<divclass="container body-content"> @RenderBody()</div>

我们要更改视图 Bootstrap的内容。 首先,我想使用页面的全部宽度,所以我将把类" container"更改为" container-fluid"。

接下来,我需要创建一个" row",其中包含 2列" col-xs-4"和" col-xs-8"。 然后把 @RenderBody() 放在最后。

<divclass="container body-content"><divclass="row"><divclass="col-xs-2"id="toolbar-container"></div><divclass="col-xs-10"> @RenderBody()
 </div></div></div>

记住,我们的viewModel 有一个 @body-bg,它是一个颜色。 我想通过在文本字段中键入完全十六进制代码来编辑这个,但是我也希望利用新的HTML5输入控制 type="color"

我想设置出 knockout。 因此,对于第一列" toolbar-container",我将添加:

<divclass="form-group"><label>@@body-bg</label><divclass="row"><divclass="col-xs-9"style="padding-right: 0;"><inputtype="text"class="form-control"data-bind="value: $data['@@body-bg']"/></div><divclass="col-xs-3"style="padding-left: 0;"><inputtype="color"class="form-control"data-bind="value: $data['@@body-bg']"/></div></div></div>

注意双标志。 '真实'变量名称只有一个 @ 符号,但是这个符号对 Razor 引擎有意义。 你需要添加一个双 @. 来逃脱它

是的,是的,这是个风格。 因为我懒惰;)

订阅更改

现在,我们将有一个变量,它将通过UI进行更新。 但是我们仍然需要调用 less.modifyVars 方法。 为此,我们必须订阅变量的更改。

var viewModel = window.viewModel = {
 "@body-bg": ko.observable('#ffffff')
}
viewModel["@body-bg"].subscribe(function () {
 less.modifyVars({
 "@body-bg": viewModel["@body-bg"]()
 });
});

测试

如果现在启动网站并更改 color 字段,该网站应该更改颜色并看起来如下:

添加值

那么现在你可以决定客户应该改变哪些变量。 并将它们添加到视图模型。

让我们添加 @text-color,它是主文本颜色和 @brand-primary,它拥有所有以" -primary"结尾的类,如" btn-primary"。

main.js

var viewModel = window.viewModel = {
 "@body-bg": ko.observable('#ffffff'),
 "@text-color": ko.observable('#777777'),
 "@brand-primary": ko.observable('#337ab7')
};
viewModel["@body-bg"].subscribe(function () {
 less.modifyVars({
 "@body-bg": viewModel["@body-bg"]()
 });
});
viewModel["@text-color"].subscribe(function () {
 less.modifyVars({
 "@text-color": viewModel["@text-color"]()
 });
});
viewModel["@brand-primary"].subscribe(function () {
 less.modifyVars({
 "@brand-primary": viewModel["@brand-primary"]()
 });
});

HTML

将它的粘贴在 @body-bg 定义下面:

<divclass="form-group"><label>@@text-color</label><divclass="row"><divclass="col-xs-9"style="padding-right: 0;"><inputtype="text"class="form-control"data-bind="value: $data['@@text-color']"/></div><divclass="col-xs-3"style="padding-left: 0;"><inputtype="color"class="form-control"data-bind="value: $data['@@text-color']"/></div></div></div><divclass="form-group"><label>@@brand-primary</label><divclass="row"><divclass="col-xs-9"style="padding-right: 0;"><inputtype="text"class="form-control"data-bind="value: $data['@@brand-primary']"/></div><divclass="col-xs-3"style="padding-left: 0;"><inputtype="color"class="form-control"data-bind="value: $data['@@brand-primary']"/></div></div></div>

测试

启动项目并执行以下测试:

  • 在文本字段中键入" red"来更改 @body-bg 变量
    • 页面的background 应该更改为红色
  • 通过颜色选择器更改 @body-bg 变量
    • 页面的background 应该更改为选中的颜色
  • 在文本字段中键入" white"来更改 @text-color 变量
    • 页面的文本颜色应该更改为白色
  • 通过颜色选择器更改 @text-color 变量
    • 页面的文本颜色应该更改为选定的颜色
  • 在文本字段中键入" red"来更改 @brand-primary 变量
    • 主按钮应该改为 blue""
  • 通过颜色选择器更改 @brand-primary 变量
    • 主按钮应该更改为所选颜色
问题

UI通过测试。 但我看到了一些我不希望看到的。 每次更改变量时,UI都不保留以前设置的变量的值。 换句话说,它一直在重置我做的一切。

为什么?

但是等等,在我们深入研究原因之前,让我们改变我们的规范:

  • 在文本字段中键入" red"来更改 @body-bg 变量
    • 页面的background 应该更改为红色
  • 通过颜色选择器更改 @body-bg 变量
    • 页面的background 应该更改为选中的颜色
  • 在文本字段中键入" white"来更改 @text-color 变量
    • 页面的文本颜色应该更改为白色
    • 用户界面应该保留以前设置的@body-bg
  • 通过颜色选择器更改 @text-color 变量
    • 页面的文本颜色应该更改为选定的颜色
    • 用户界面应该保留以前设置的@body-bg
  • 在文本字段中键入" red"来更改 @brand-primary 变量
    • 主按钮应该改为 blue""
    • 用户界面应该保留以前设置的@body-bg
    • UI应该保留以前设置的@ text-color
  • 通过颜色选择器更改 @brand-primary 变量
    • 主按钮应改为选定的颜色
    • 用户界面应该保留以前设置的@body-bg
    • UI应该保留以前设置的@ text-color

再次执行测试,步骤 1后失败。

修复问题

问题是 less.modifyVars 似乎工作的方式。 每次调用它,它将获取原始变量的所有变量并应用你发送的变量对象。 所以我们需要每次调用 less.modifyVars 时发送所有颜色。

因此,让我们找到 viewModel的所有订阅,其中 less.modifyVars 被调用。 我只展示其中一个:

viewModel["@text-color"].subscribe(function () {
 //there's your problem! you need the whole viewModel! less.modifyVars({
 "@text-color": viewModel["@text-color"]()
 });
});

可以看到,我们只在需要所有参数的情况下发布 @text-color

为了解决这个问题,我们将使用称为 toJS的knockout特性将 viewModel 反序列化到一个普通的JavaScript对象,并将它的发送到。

viewModel["@body-bg"].subscribe(function () {
 less.modifyVars(ko.toJS(viewModel));
 });
 viewModel["@text-color"].subscribe(function () {
 less.modifyVars(ko.toJS(viewModel));
 });
 viewModel["@brand-primary"].subscribe(function () {
 less.modifyVars(ko.toJS(viewModel));
 });

现在,如果我们执行最后一个 testplan,它应该通过。

优化

我仍然不高兴。我认为我已经定义了每个变量,但是我不想重复这个订阅代码。

所以,让我们改变到 viewModel 上的一个迭代,整个事情现在看起来如下所示:

/* globals ko, less */(function () {
 var viewModel = window.viewModel = {
 "@body-bg": ko.observable('#ffffff'),
 "@text-color": ko.observable('#777777'),
 "@brand-primary": ko.observable('#337ab7')
 };
 for (var prop in viewModel) {
 if (viewModel.hasOwnProperty(prop)) {
 viewModel[prop].subscribe(function () {
 less.modifyVars(ko.toJS(viewModel));
 });
 }
 }
 $(document).ready(function () {
 ko.applyBindings(viewModel);
 });
})();

测试

  • 执行前一个 inf
  • 从顶部导航栏选择其他页面
问题

它又把我did的一切 !

这是因为. NET. MVC工作方式的原因,它不是Ajax站点。 所有的东西都是来自服务器的refetched。 实际上将更改保存到服务器将是另一篇文章的主题。 但是现在,我们需要保存一些东西到 localStorage 并从那里重新创建我们的viewModel

让我们在代码中加入最后一个优化,使用我们所学的大部分。

/* globals ko, less */(function () {
 var viewModel = window.viewModel = {
 "@body-bg": ko.observable('#ffffff'),
 "@text-color": ko.observable('#777777'),
 "@brand-primary": ko.observable('#337ab7')
 },
 storedViewData =
 localStorage.getItem("viewData")!== null? JSON.parse(localStorage.getItem("viewData"))
 : {};
 function onViewModelChanged() {
 var viewData = ko.toJS(viewModel);
 less.modifyVars(viewData);
 localStorage.setItem("viewData", JSON.stringify(viewData));
 };
 for (var prop in viewModel) {
 if (viewModel.hasOwnProperty(prop)) {
 viewModel[prop].subscribe(onViewModelChanged);
 if (storedViewData.hasOwnProperty(prop)) {
 viewModel[prop](storedViewData[prop]);
 };
 }
 }
 $(document).ready(function () {
 ko.applyBindings(viewModel);
 });
})();

测试

现在执行所有测试计划,它们都通过了( 至少在我的房子里)。

结束语

我现在就把它留在这里。 你可以添加其他颜色变量来公开。

生成并下载实际的文件将在另一个帖子中讨论。 我可能会在那之前修复代码中的另一个基本缺陷。 你能找到它?

此外,在一个额外的小屏幕上制作 2列并不那么好。 所以可能会有更多的React。

但从现在开始。

历史记录

我已经在这里添加了关于这个主题的下一篇文章。


PAR  BOO  SET  引导  Generator  Bootstrap  
相关文章