0

Tenho um template responsivo que repete alguns componentes, que ficam no topo e o fundo. O problema que os componentes da parte superior não clicam (botoes) quando estão responsivo, ou seja eu diminuo a tela do navegador simulando um celular, e os mesmo não clicam.Se eu vou aumentando a tela, eles ja ficam clicando. Então creio que se migrar pra bootstrap dava certo, pois já é responsivo. Como coloco o bootstrap ai?

Html:

<!DOCTYPE html>
<html>
<head runat="server">
<noscript>
    <meta http-equiv="Refresh" content="1;URL=../javaScript.aspx">
</noscript>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>mobile</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="content_clean">
    <div id="menu">
        <div id="nav">
            <ul>
                <li class="list-nav"><a id="menu-home" href="../pages/Default.aspx"><i    class="home-icon">
                </i><b style="margin-left: 0.5em">Home</b></a> </li>
                <li class="list-nav"><a id="menu-orcamento" href="../pages/listarOrcamentos.aspx"><i
                    class="orcamento-icon"></i><b style="margin-left: -0.6em">Orçamentos</b></a>
                </li>
                <li class="list-nav"><a id="menu-configuracoes" href="../pages/Configuracoes.aspx"><i
                    class="configuracoes-icon"></i><b style="margin-left: -1.3em">Configurações</b></a>
                </li>
                <li class="list-nav"><a id="menu-sair" href="../Logout.aspx"><i class="sair-icon"></i>
                    <b style="margin-left: 0.8em">Sair</b></a> </li>
            </ul>
        </div>
    </div>
    <form id="Form" runat="server">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</div>
<script type="text/javascript">
    //Identifica qual a página aberta pela URL e destaca o menu correspondente
    $(document).ready(function () {
        var url = window.location.pathname;
        var substr = url.split("/");
        var urlaspx = substr[substr.length - 1];

        if (urlaspx !== "") {
            $("#nav ul li a").each(function () {
                if (this.href.indexOf(urlaspx) >= 0)
                    $(this).addClass("selected");
            });
        } else {
            $(this).find("#menu ul li a:first").addClass("selected");
        }
    });
</script>
</body>
</html>
6
  • O que agente precisa ver é o codigo que está dentro do formulario <form id="Form" runat="server"> Para que agent possa lhe ajudar. Commented 31/03/2015 às 11:53
  • mudei o titulo, e o contexto da pergunta
    – War Lock
    Commented 31/03/2015 às 11:54
  • Certo, mas, quais campos vc quer colocar dentro do formulário ? Commented 31/03/2015 às 11:56
  • O que eu quero que fique repetindo é o que eu quero que seja bootstrap por enquanto, no caso o menu home, configurações etc...
    – War Lock
    Commented 31/03/2015 às 12:04
  • Certo, então vou ver o que faço Commented 31/03/2015 às 12:06

1 Resposta 1

0

Basicamente se eu fosse colocar essa página para bootstrap é mais ou menos assim que faria. No exemplo abaixo eu usei arquivos css e js de terceiros. Mas no seu caso eu aconselho Baixar.

EDITADO:

Peço desculpa apertei enter no meu teclado antes que eu pode-se comentar. Mas o bootstrap é uma ferramente muito utio e prática para o desenvolvedor para saber mais detalhes sobre ele e o que se pode fazer com ele, pode entrar no site: http://getbootstrap.com/ nele tem a documentaçao completa de como usar e como baixar.

Para uma vizualização do que foi feito pode ir aqui neste jsfiddle http://jsfiddle.net/022gshb2/ e pode ver que está reponsivo.

CODIGO:

<!DOCTYPE html>
<html>
    <head runat="server">
    <noscript>

        <meta http-equiv="Refresh" content="1;URL=../javaScript.aspx"> -->
    </noscript>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Chronos Mobile for web</title>

    <!-- Bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- CSS da sua pagina-->
    <link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />

    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>


    <!-- Para usar os o javascript do bootstrap vc precisará do bootstrap.js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Seu Site</a>
            </div>

            <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="../pages/Default.aspx"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                    <li><a href="../pages/listarOrcamentos.aspx"><span class="glyphicon glyphicon-pencil"></span> Orçamentos</a></li>
                    <li><a href="../pages/Configuracoes.aspx"><span class="glyphicon glyphicon-cog"></span> Configurações</a></li>
                    <li><a href="../Logout.aspx"><span class="glyphicon glyphicon-log-out"></span> Sair</a> </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="page-header"><h1>Titulo da página</h1></div>
            <form class="form-horizontal" runat="server">
                <div class="form-group">
                    <label for="" class="control-label col-xs-12 col-sm-2">Label1</label>
                    <div class="col-xs-12 col-sm-8"><input type="text" class="form-control" placeholder="campo1"></div>
                </div>
                <div class="form-group">
                    <label for="" class="control-label col-xs-12 col-sm-2">Label2</label>
                    <div class="col-xs-12 col-sm-8"><input type="text" class="form-control" placeholder="campo2"></div>
                </div>
                <div class="form-group">
                    <label for="" class="control-label col-xs-12 col-sm-2">Label3</label>
                    <div class="col-xs-12 col-sm-8"><input type="text" class="form-control" placeholder="campo3"></div>
                </div>
                <div class="form-group">
                    <label for="" class="control-label col-xs-12 col-sm-2">Label4</label>
                    <div class="col-xs-12 col-sm-8"><textarea  class="form-control" rows="10" placeholder="textarea"></textarea></div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12 col-sm-offset-2">
                        <button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Salvar</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">

    </script>
</body>
</html>

Pode ser que esse código não resolva completamente sua necessidade, mas conselho usar bootstrap se quer usar seu site reponsivo assim você não quebra muito cabeça fazendo você mesmo.

3
  • Resolveu, sendo q tou com uma duvida, essa pagina ela é a pagina master, template fica repetindo em todas, entao as outras paginas estao entrando dentro do menu. sabe me dizer o q pode ser?
    – War Lock
    Commented 31/03/2015 às 13:23
  • Não sei programar em ASP, mas imagino que deva ter três arquivos. E criar um variavel tipo: var pagina=home e criar uma condição para saber qual pagina está ativa header.html <- seu tema conteudo.html footer.html <- seu tema Commented 31/03/2015 às 14:19
  • Mas, essa é uma duvida para outra resposta Commented 31/03/2015 às 14:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .