将 bootstrap 设计添加到网络表单

Question

我有一个用 asp webforms (.net 4.0) 编写的相当老的项目。它使用不同的 webforms 服务器控件，如 TextBox 等。

有Bootstrap写的设计。

并且客户希望将 "old projects on webforms" 与 "bootstrap design" 组合。

可能吗？我在这里看到一个问题：webforms 服务器控件生成自己的 html 代码，因此不能直接使用 bootstrap-like 设计。问题是——如何处理这个问题，如何克服这个问题？

我没有看到一个很好的解决方案，只有在不符合 bootstrap 需要时才重写服务器控件。是否有广泛使用的类似 Bootstrap 的 Web 窗体控件？

Answer 1

第一个要问的问题是客户希望使用 Bootstrap 的哪一部分？

Bootstrap 网格

这可能是合并到现有系统中最简单的部分。由于大多数现有 Web 窗体项目使用 tables 进行布局，您可以查看使用响应式 tables 来控制 tables 的布局。
或者，您可以考虑使用 Bootstrap 网格 class 重写 table 作为基础布局。

HTML 输入字段

对于 <input>, <textarea>, and <select> 输入字段，我建议您在基页中创建一个功能，该功能会自动将所需的 bootstrap classes 添加到控件.默认情况下，这将是 "form-control" class。作为起点，您可以考虑在 Page.Init 活动期间执行此操作。
你也可以对按钮做这样的事情，但你的选择范围更大。
对于复选框和单选按钮，确实没有自动执行此操作的好方法。您必须手动修改这些控件的 HTML。

即使使用上述选项，每个页面都会有一定程度的手动编辑。

这是我们目前要在新项目上实施的计划，所以我祝你好运。

编辑评论中的问题

修改 HTML 复选框和单选按钮。我的意思是，您至少必须添加一个 <div class="checkbox"></div> 来包围 <asp:checkbox> 控件。以下是来自 Bootstrap.

的推荐 html

  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>

请注意，我不建议您编写自己的服务器控件，尽管这始终是一种选择。

是的，使用 Page_Init 就可以了。在代码方面，我会使用以下内容

For each control in this.Controls
   if control is textbox or control is textarea or control is select then
      control.CssClass = "form-control"
  end if
Next

对于像 GridView 或 ListView 这样的控件，它们会生成 html tables。因此，您可以为它们使用 Bootstrap 的响应式 table 控件。

将 bootstrap 设计添加到网络表单

adding bootstrap design to webforms

css

c#

asp.net

webforms

twitter-bootstrap