Question

我正在创建一个使用Bootstrap.css作为其“仅与母版页相关的内容”（网站正文，页眉，导航和页脚）的母版页，但内容本身是通过MainContent占位符Web控件进行的在一个识别div。简化的代码看起来像这样

<html>
     <head>
           <link href="/Styles/bootstrap.min.css" rel="stylesheet" />
           <script src="/Scripts/jquery-1.11.1.min.js"></script>
           <script src="/Scripts/bootstrap.min.js"></script>    
     </head>

     <body>
          <form>
               <header> Header User Control is here </header>
               <nav>Navigation User Control is here</nav>

               <div ID="wrapper">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                                <!--  PAGE'S CONTENT HERE -->
                    </asp:ContentPlaceHolder>
               </div>

               <footer> Footer User Control is here</footer>
         </form>
    </body>
</html>

这里的诀窍是。就像我说的那样，引导程序库不能被内容读取，否则内容会受到常见类的影响，例如：h1，a，p，body等......所以，我想知道是否有办法我可以在ID包装器上创建一个块，可能在后面的代码（VB.NET）或执行以下逻辑的前端（JQuery）中

     var myFile = bootsrap.min.css;

     If ID wrapper loads;
         then !load myFile inside div ID wrapper
     Else
         return true;

我知道，我知道。这听起来像是不可能的事情，但是如果Jquery提出了removeClass函数，我发现它们没有想出一个removeCssFile或类似的东西但是仅的内容部分非常值得怀疑。页。

P.S。我会提供一个codepen或JSFiddle，但是都不接受ASP Framework，所以它没用。

任何想法或解决方法？

Answer 1

首先，使用包含引导类的div包装主页面的页眉和页脚部分。

<div class="bootstrap">
  <header>...</header><nav>...</nav>
</div>
<div class="content">
   <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="bootstrap">
  <footer>...</footer>
</div>

接下来，创建一个自定义引导程序css文件，它将每个样式规则添加到.bootstrap前面。使用LESS / Sass编译器有一些聪明的方法可以做到这一点。或者尝试手动操作，看看你有多接近。从位于源代码下载的\ dist \ css目录中的bootstrap.css unminified 文件开始。只需开始将.bootstrap添加到公共元素h2，li等等。将html，body样式放入.bootstrap规则中。大多数bootstrap CSS规则都依赖于类，因此您只需要将.bootstrap添加到公共元素规则中。

.bootstrap {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  etc...
}

.bootstrap h1 {
  margin: .67em 0;
  font-size: 2em;
}

Answer 2

MasterPage概念是关于将所有内容放在同一页面中。因此，您很难让div（或您的内容）不受CSS和jquery的影响。它们都在同一份文件中！

特别是因为bootstrap也适用于jquery。假设您可以尝试以编程方式（我不知道如何）在浏览器的“默认”（或您的网站主要样式）中“重置”div中的对象。

如果有人包含带有引导类的DOM元素（以编程方式更改或不更改样式）或jquery调用任何引导函数，则会再次覆盖您的样式（比如，调用popovers或类似的东西）。

浏览器可以提供的唯一方法是iframe ......并且这不会给你带来同样的效果。点击此iframe内的所有链接都只会在iframe内重定向。

仅在ASP.NET中为页面的一部分加载样式表

2 个答案: