0
asp 폼 태그에 부트 스트랩 스타일을 사용하고 싶습니다. 아래의 코드를 사용하여 만이 보조 페이지asp 폼에 부트 스트랩 스타일을 적용 할 수 없습니다.
<%@ 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>
입니다 부트 스트랩 3.3.1 및 VS2012 을 ussing FRM 스타일 난`이없는 구성 요소 그리고이 마스터 페이지
<%@ 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><a href="inicio.aspx">Home</a></li>
<li class="active"><a href="Pagina1.aspx">Page 1</a></li>
<li><a href="pagina2.aspx">Page 2</a></li>
<li><a href="Pagina3.aspx">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></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>
다른 스타일이 잘 aplied하는이 작업을 나던 전용 "FRM"입니다 . –
CSS 계층 구조를 살펴 봐야합니다. 어쩌면 뭔가 'frm'클래스 설정을 무시합니다. 모든 브라우저에서 dev 도구를 열고 CSS 계층 또는 계산 된 값을 확인하여 다른 속성이 설정된 위치를 확인하십시오. – Chris
정말 그 질문을 이해하지 못합니다. "frm"은 무엇입니까? – IrishChieftain