I am struggling to get bootstrap to work with SharePoint. I have requirements that don't allow me to use the Responsive Bootstrap codeplex project.
This issue appears to be that my col- tags are not working within SharePoint to resize the content on a page. Have others run into this issue, and if so, how did you resolve it?
Update: It is working when resizing a browser, but when I load it on a Mobile phone, it is like the media query is not getting detected. Here is the code for my default.aspx page (which inherits from the default master page).
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<meta name="WebPartPageExpansion" content="full" />
<%--Add your CSS styles to the following file--%>
<%--Bootstrap core CSS--%>
<%-- <link href="../Content/bootstrap.min.css" rel="stylesheet" />--%>
<%-- Custom styles--%>
<link href="../Content/App.css" rel="stylesheet" />
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<%-- Container start. Note: Proper display on a Mobile device requires disabling the site feature "Mobile Browser View" which is SharePoint's default basic view of lists and libaries for Mobile devices --%>
<div class="container" data-ng-app="app">
<div>
<p id="message">
<%-- The following content will be replaced with the user name when you run the app - see App.js --%>
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer>
</footer>
</div>
<%-- Container end --%>
<%-- Supporting JS files placed at bottom for performance --%>
<%-- Libraries --%>
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<%-- Angular Core --%>
<script src="../Scripts/angular.min.js"></script>
<%-- AngularUI Bootstrap for Responsive Web Design and styling options. Dependent on bootstrap.css but all JS is bootstrap refined for Angular: http://ift.tt/1sgyqxB --%>
<%--<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>--%>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<%-- Custom paging directive as documented: http://ift.tt/1s2zZO0 --%>
<script src="../Scripts/dirPagination.js"></script>
<%-- application specific js files --%>
<%-- App initilization --%>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</asp:Content>
0 commentaires:
Enregistrer un commentaire