I want to aply the bootstrap style to a asp form tag.
using the below code only shows the components without the frm style
I`m ussing bootstrap 3.3.1 and VS2012
This is the secondary page
<%# Page Title="" Language="C#" MasterPageFile="~/Maestra.Master" AutoEventWireup="true" CodeBehind="Pagina2.aspx.cs" Inherits="Ejemplo1001.Pagina2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form class="navbar-form navbar-left" role="form" runat="server" id="frm1">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</asp:Content>
And this the master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Maestra.master.cs" Inherits="Ejemplo1001.Maestra" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span>Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span>Login</li>
</ul>
<p class="navbar-text navbar-right">Signed in as Mark Otto</p>
</div>
</div>
</nav>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var substr = url.split('/');
var urlaspx = substr[substr.length - 1];
$('.nav').find('.active').removeClass('active');
$('.nav li a').each(function () {
if (this.href.indexOf(urlaspx) >= 0) {
$(this).parent().addClass('active');
}
});
});
</script>
</body>
</html>
Remove your current link to the CSS and re-create it by dragging the CSS file from Solution Explorer to the head section of the master page. Then it should resolve correctly.
you may need to add stylesheet link in the second page's header and check thee directory root ~/css...
<%# Page Title="" Language="C#" MasterPageFile="~/Maestra.Master" AutoEventWireup="true" CodeBehind="Pagina2.aspx.cs" Inherits="Ejemplo1001.Pagina2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
</asp:Content>
Related
I am a beginner in asp.net. I kept receive the above error
Control 'ContentPlaceHolder1_txtReason' of type 'TextBox' must be placed inside a form tag with runat=server."}
And I am not able to nail the problem on it's head.
Hope someone can point out my mistake.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="E.Master" %>
<!DOCTYPE html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
This navbar
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">aaaaaaa</span>
<span class="icon-bar">aaaaaaa</span>
<span class="icon-bar">aaaaaaaa</span>
</button>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
</div>
</nav>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<% generateMenu(); %>
</div>
</div>
<div id="page-wrapper">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="footercontent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
You should place <form runat="server" id="form1">.
<body>
<form id="form1" runat="server">
// You should code for your controls inside this block. This runat="server" indicates that a control is being treated as a server control.
</form>
</body>
More details are Here
I am trying t make an asp.net website, and am using notepad++ so do not have auto setup options eg from visual studio.
I am using a master page which I am trying to use throughout the site.
I am having lots of problems but have finally got a page to display with no errors, but it now does not display any content from the master page.
I am including all the code I have in the hope someone can explain to me why my content from the masterpage is not displaying. I feel I am close but have not found a decent tutorial to show me what I need to do.
Masterpage:
<asp:ContentPlaceHolder ID="CPH1" runat="server">
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style/main_Style.css">
<link rel="stylesheet" type="text/css" href="Style/Responsive-Style.css">
<link rel="stylesheet" href="Style/style.css">
<link rel="stylesheet" href="Style/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="Style/flexslider.css" type="text/css" media="screen" />
<script src="Javascript/modernizr.js"></script>
</head>
<body>
<div class="headerOutline">
<div class="logo">
<img class="omTechLogo" src="images/mainLogo.png"></img>
</div>
<div class="headerMenu">
<ul id="menu">
<li class="headerMenuItem"><a class="menuText" href="Home.HTML">Home</a></li>
<li class="headerMenuItem"><a class="menuText" href="About.HTML">About</a></li>
<li class="headerMenuItem"><a class="menuText" href="Services.HTML">Services</a></li>
<li class="headerMenuItem"><a class="menuText" href="Portfolio.HTML">Portfolio</a></li>
<li class="headerMenuItem" id="headerMenuItem_last"><a class="menuText" href="Contact.HTML">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JQuery/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</div>
</div>
<div class="bodyOutline">
<div class="flexslider" style="height:auto; min-height:150px;">
<ul class="slides">
<li>
<img src="images/SliderImage1.jpg" />
</li>
<li>
<img src="images/SliderImage2.png" />
</li>
<li>
<img src="images/SliderImage3.jpg" />
</li>
<li>
<img src="images/SliderImage4.jpg" />
</li>
</ul>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="JQuery/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<div class="homepageBody">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH2" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
and home page:
<%# Page Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" Title="Content Page"%>
<asp:Content ContentPlaceHolderId="CPH1" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH2" runat="server">
TExt teX teXt
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH3" runat="server">
</asp:Content>
I want the content from CPH1 and CPH3 to display on all pages, and the content from CPH2 to change with each page
You have html markup within your content placeholder ID=CPH3. When your page inflates, it will render it's content inside of that component replacing what is already there. In your case, it will render the empty contents of your page with contentplaceholderid=CPH3.
This is your problem:
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
You are basically killing the closing body and html tag along with your footer. Maybe you were trying to do this:?
<div>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
when I tried to create Web Form using Master page I got the HttpException:
HttpException (0x80004005): Content controls have to be top-level controls in a content page or a nested master page that references a master page.]
The Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="adminNav.master.cs" Inherits="Site.AdminPages.adminNav" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Page</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Site/Scripts/CSS/AdminPage.css" />
</head>
<body>
<div class="bs-example">
<form runat="server">
<nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<asp:LinkButton class="navbar-brand" Style="color: white" ID="AdminHomePage" runat="server" href="/Site/AdminPages/AdminPage.aspx">Home</asp:LinkButton>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Users</li>
<li>Profile</li> </ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<asp:Label ID="emailDeatilsLabel" runat="server" Style="color: white"></asp:Label>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<asp:LinkButton ID="LogOutLabel" runat="server" href="/Site/UserPages/LogOut.aspx">Log Out</asp:LinkButton>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</form>
</div>
</body>
</html>
Here is the code of Profile.aspx ( what I tried to run and got the exception ):
<%# Page Title="" Language="C#" MasterPageFile="~/AdminPages/adminNav.Master"
AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="Site.AdminPages.Profile" %>
<!DOCTYPE html>
<head>
</head>
<body>
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</body>
</html>
I tried also to write in Profile.aspx code only the elements (without ...) code but its still doesn't work
Content controls have to be top-level controls in a content page or a nested master page that references a master page
Visual Studio is telling you do do the following;
Wrap your mark up with the placeholder tags like this
<asp:Content Id="ContentI" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</asp:Content>
You do not need to put the html and body tags as they are injected from the master page.That is how master and child pages work.
I have used bootstrap framework and a template from a book to finally make the master page the way I want.
When I use google chrome, or IE, and I resize the browsers, the page is resized and the menu is converted to a vertical menu.
However, I just tried on the iphone and it shows "like" a big browser, instead of showing the vertical menu.
I wish I could paste the code but the bootstrap code is way too long to copy here.
I will show my website:
https://levalencia-public.sharepoint.com/
And I will paste the html of my masterpage.
<?xml version="1.0" encoding="utf-8"?><!--SPG:
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at https://levalencia-public.sharepoint.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Flevalencia%2Dpublic%2Esharepoint%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Flv%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
<!--ME:</SharePoint:ProjectProperty>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
<!--ME:</SharePoint:DelegateControl>-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--MS:<WebPartPages:SPWebPartManager runat="server">-->
<!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->
<meta charset="utf-8" />
<!--DC:Specter Group - Blog Bootstrap Version-->
<meta name="description" content="" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/isotope.css" />
<link rel="stylesheet" href="css/elements.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<!-- Modernizr enables HTML5 elements & feature detects for optimal performance.
Include html5shiv 3.6. Our version is a custom build.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/modernizr-2.6.2.custom.js">//<![CDATA[//]]>
</script>
<!--Grab Microsofts CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!--place in head in case need to access jquery inline in SP page layout-->
<script src="js/jquery-1.9.1.min.js">//<![CDATA[//]]>
</script>
<script>//<![CDATA[window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">//<![CDATA[<\/script>')//]]>
</script>
<!--used to help make old scripts work with jquery 1.9-->
<script src="js/jquery-migrate-1.1.0.min.js">//<![CDATA[//]]>
</script>
<!--js libraries-->
<script src="js/jquery-ui-1.8.9.custom.min.js">//<![CDATA[//]]>
</script>
<script src="js/hoverIntent.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/superfish.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/supersubs.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.nivo.slider.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.isotope.min.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tweet.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tabs.js">//<![CDATA[//]]>
</script>
<script src="js/poshytip-1.1/jquery.poshytip.min.js">//<![CDATA[//]]>
</script>
<script src="js/bootstrap.js">//<![CDATA[//]]>
</script>
<!--custom scripts-->
<script src="js/jquery-custom.js">//<![CDATA[//]]>
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://levalencia-public.sharepoint.com/_catalogs/masterpage/lv.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A00A9586E0672297E4794AD6E170F2BEB51</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<!-- HEADER -->
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="logo">
<!--logo snippet-->
<div data-name="SiteLogo"><!--CS: Start Site Logo Snippet--><!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta BlockElement="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x8b0737e1232643da88f7b4721567d1e8">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" ID="x596f04b7f65943cb9ad23b9fd9ac5744" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_x596f04b7f65943cb9ad23b9fd9ac5744" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="/SiteAssets/logosharepointazul.PNG" alt="Luis Valencia - Sharepoint Architect" /><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SiteLogoImage>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Site Logo Snippet-->
</div>
</div>
<div class="tagline">
<h2>
<span>Luis
</span>
Valencia </h2>
<h2>
<span>Sharepoint
</span>
Architect </h2>
</div>
</div>
<div class="social cf">
<ul class="cf">
<li>
<a href="https://www.facebook.com/pages/Sharepoint-Architects-Blog/259727274196140" target="_blank">
<img src="img/social/Facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://twitter.com/levalencia" target="_blank">
<img src="img/social/Twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a href="https://plus.google.com/115487123900000828421/posts" target="_blank">
<img src="img/social/Google+.png" alt="Google+" />
</a>
</li>
<li>
<a href="http://www.linkedin.com/profile/view?id=55314636&trk=nav_responsive_tab_profile" target="_blank">
<img src="img/social/LinkedIn.png" alt="Linked In" />
</a>
</li>
<li>
<a href="#">
<img src="img/social/RSS.png" alt="Blog" />
</a>
</li>
</ul>
<a class="social-toggle" title="Follow Us">Toggle
</a>
</div>
</div>
</div>
</header>
<!-- ENDS HEADER -->
<!-- nav -->
<!-- nav -->
<nav id="topnav">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav nav-collapse collapse">
<!--nav snippet-->
<ul class="root">
<li class="current-menu-item">HOME</li>
<li>ABOUT ME</li>
<li>BLOG</li>
<li>ARTICLES</li>
<li>CONTACT</li>
</ul>
<!--end nav snippet-->
</div> <!--end class nav-->
</div> <!--end container-->
</div>
</div>
</div> <!--end span 12-->
</div> <!--end row-->
</div> <!--end fluid container-->
</nav>
<!-- ends nav -->
<!-- MAIN -->
<div role="main" id="main">
<div class="container-fluid">
<!--main content placerholder, use the following html as sample content for content placeholder-->
<div class="row-fluid">
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
<!--end content placerholder-->
</div>
</div>
<!-- ENDS MAIN -->
<footer>
<!-- bottom footer-->
<div class="footer-bottom">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 copyright">
<p><b>Copyright © 2014 Luis Valencia - All Rights Reverved</b>
</p>
</div>
</div>
</div>
</div>
<!--end bottom footer-->
</footer>
</div>
</div>
</body>
</html>
You are missing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Check;
Bootstrap 3 responsive not working on mobile
good luck!
You are missing the viewport meta tag. Add this within your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this does is essentially instructs the device that 'width' should be considered the device's width. The device can then use that to compare against your media-queries and decide how to display the page.
i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?
The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});