Migrate template to bootstrap

Asked

Viewed 345 times

0

I have a responsive template that repeats some components, which are at the top and the bottom. The problem that the components of the top do not click (buttons) when they are responsive, ie I decrease the screen of the browser simulating a mobile phone, and the same do not click. If I keep increasing the screen, they keep clicking. So I think if I migrate to bootstrap it would work, because it’s already responsive. How do I put the bootstrap there?

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>
jquery html css twitter-bootstrap

  • What we need to see is the code inside the form <form id="Form" runat="server"> So that agent can help you.

  • I changed the title, and the context of the question

  • Right, but, what fields you want to put inside the form ?

  • What I want you to keep repeating is what I want to be bootstrap for now, in case the home menu, settings etc...

  • Okay, then I’ll see what I do

  • Thanks xd.....

Show 1 more comment

1 answer

0


Basically if I were to put this page to bootstrap it’s more or less like this I would do. In the example below I used third party css and js files. But in your case I advise Download.

EDITED:

I’m sorry I hit enter on my keyboard before I can comment. But bootstrap is a very useful and practical tool for the developer to know more details about it and what you can do with it, you can enter the site: http://getbootstrap.com/ it has the complete documentation of how to use and how to download.

For a preview of what was done you can go here in this jsfiddle http://jsfiddle.net/022gshb2/ and you can see that you’re restful.

CODE:

<!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>

It may be that this code doesn’t completely solve your need, but advice use bootstrap if you want to use your reponsive site so you don’t puzzle too much doing yourself.

  • Solved, being q tou with a doubt, this page she is the master page, template keeps repeating in all, then the other pages are entering inside the menu. you can tell me what it can be?

  • I don’t know how to program in PSA, but I imagine there must be three files. And create a variable type: var pagina=home and create a condition to know which page is active header.html <- your theme content.html footer.html <- your theme

  • But that’s a question for another answer

Browser other questions tagged jquery html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.