带有 ASP .NET 控件的引导程序答案

【问题标题】：Bootstrap with ASP .NET controls带有 ASP .NET 控件的引导程序
【发布时间】：2018-07-12 22:15:45
【问题描述】：

有没有办法一次将引导类应用于我的所有 asp .net 控件。以下是我使用引导程序格式化的菜单控件。

我不想单独对我的应用程序中的所有菜单执行此操作。有没有办法将引导主题普遍应用于我的应用程序中的所有菜单。我在按钮、文本框和其他控件上也面临同样的问题。很难单独格式化每个控件。

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false">
                <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                    class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="Mycompanylink">My Company</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" 
                DynamicMenuStyle-CssClass="dropdown-menu" OnMenuItemClick="Menu1_MenuItemClick">
                <Items>
                    <asp:MenuItem Text="Home" Value="0"></asp:MenuItem>
                    <asp:MenuItem Text="Careers" Value="1"></asp:MenuItem>
                    <asp:MenuItem Text="About Us" Value="2"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </div>
</div>

【问题讨论】：

您是否尝试过提供参考 - stackoverflow.com/questions/19852563/…
是的，目前我也在做同样的事情，为页面中的每个控件定义 cssClass，但是假设有一天我突然必须将 CssClass="btn btn-primary" 更改为 CssClass="btn btn-default" 对于我的解决方案中的所有按钮，通过这种方法非常困难，所以我希望我的所有按钮都引用我的自定义样式并且自定义样式应该引用引导程序，所以当我将 btn-primary 更改为 btn-默认在我的自定义样式中，我的解决方案中的所有按钮都会更改。有没有办法做到这一点。
我不想直接编辑或引用我的控件的引导 css 文件，我需要一个自定义 css 文件作为 .net 控件和引导 css 之间的中介。

标签： css asp.net twitter-bootstrap webforms

【解决方案1】：

我终于找到了解决办法。

创建 ASP .NET 主题并在外观文件中定义所有必需的控件属性。在主题中，我放置了 bootstrap.min.css 并且它像魔术一样开始工作。我可以引用 ASP .NET 皮肤文件中的所有引导类。

因此，如果我在皮肤文件中将 btn-primary 更改为 btn-default，它会反映解决方案中的所有按钮。

谢谢大家的回复。

【讨论】：

【解决方案2】：

作为@NnN pointed out，您可以将 Bootstrap 应用于项目中的许多 ASP.NET 控件。该答案没有指出的是，还有许多控件在创建自己的表格时完全不适合响应式设计。例如，GridView 创建了自己的表，不适合RWD，因此您可以使用 ListView。

查看 MSDN 文档以了解您不确定的任何特定控件。更好的是，只需在测试页面上放置一个控件并查看在浏览器中创建的 HTML 源代码。如果您看到任何动态创建的表，请远离它。通常，在 RWD 中，我们从不使用固定大小。一切都基于网格上下文中的百分比。

更新

通常，您会创建一个 custom.css 样式表。你永远不需要接触原始的 Bootstrap CSS 文件。您只需覆盖现有的引导规则或在您的 custom.css 文件中创建新的样式规则。根据您关于不必为每个控件手动更改 CSS 的问题：您可以使用 here 所述的 SASS 变量（注意，这是 Bootstrap 的第 4 版）。这样，您只需要更改一次。

【讨论】：