如何避免sharepoint覆盖我的CSS类?

时间:2015-10-30 13:22:25

标签: css3 sharepoint twitter-bootstrap-3 sharepoint-2013

我正在努力避免这个共享点覆盖我的引导类,但不幸的是没有成功,我尝试了在网络上和Sharepoint StackExchange中找到的许多解决方案,但没有好处。

我的目标是在母版页中添加使用bootstrap制作的自定义导航栏。我的主页基本上只是奥斯陆主页的副本,我尝试在这里附上一些页面代码:

<head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />       
        <SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6" />
        <SharePoint:RobotsMetaTag runat="server" />
        <SharePoint:PageTitle runat="server">
        <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server" />
        </SharePoint:PageTitle>
        <SharePoint:StartScript runat="server" />
        <SharePoint:CssLink runat="server" Version="15" />

        <SharePoint:CacheManifestLink runat="server" />
        <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:CustomJSUrl runat="server" />
        <SharePoint:SoapDiscoveryLink runat="server" />
        <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">

        <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
        <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
        </SharePoint:AjaxDelta>
        <SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23" />
<![CDATA[ [if IE 9] ]]>        <style type="text/css">//<![CDATA[
    .ms-core-animation-transparent
    {
        opacity:0;
    }
    .ms-isBot .ms-core-animation-transparent
    {
        opacity:1;
    }


        //]]></style>
<![CDATA[ [endif] ]]>        <!--[if lte IE 8]>
    <style type="text/css">//<![CDATA[
    .ms-core-animation-transparent,
    .ms-core-animation-transparent img
    {
       -ms-filter:"alpha(opacity=0)";
    }
    .ms-isBot .ms-core-animation-transparent,
    .ms-isBot .ms-core-animation-transparent img
    {
       -ms-filter:"";
    }
    //]]></style>
    <![endif]-->
        <script type="text/javascript">//<![CDATA[
            var g_pageLoadAnimationParams = { elementSlideIn: "sideNavBox", elementSlideInPhase2: "contentBox" };


            //]]></script>

        <SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
        <!-- jQuery -->
            <SharePoint:ScriptLink ID="ScriptLink1" Name="~sitecollection/Style Library/jQuery/jquery.js" runat="server" />
            <!-- jQuery END -->
            <!-- Custom JS References -->
            <SharePoint:ScriptLink ID="ScriptLink3" Name="~sitecollection/Style Library/customJs/masterReorderer.js" runat="server" />
            <!-- Custom JS References END -->
            <!-- CSS & jQuery BOOTSTRAP -->
            <SharePoint:ScriptLink ID="ScriptLink2" Name="~sitecollection/Style Library/bootstrap/bootstrap.js" runat="server" />
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap.css%>" After="corev15.css" runat="server" />
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap-theme.css%>" After="corev15.css" runat="server" />

            <!-- CSS BOOTSTRAP & jQuery END -->

我哪里出错?

1 个答案:

答案 0 :(得分:0)

在您使用SharePoint时,您似乎正在正确地执行此操作:CssRegistration和After属性。 SharePoint的css和Bootstrap之间存在许多冲突,尤其是在处理box-sizing声明时。您可能想要使用许多免费引导主题和主页之一:

http://bindtuning.com/cms/umbraco/umbraco-7/theme/thebootstraptheme