Migrate template to bootstrap

Navigation
0

I have a responsive template that repeats some components, which are at the top and bottom. The problem that the top components do not click (buttons) when they are responsive, that is, I decrease the screen of the browser simulating a cell phone, and they do not click. If I enlarge the screen, they are already clicking. So I think migrating to bootstrap worked, 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>
    
asked by anonymous 31.03.2015 / 13:39

1 answer

0

Basically if I were to put this page to bootstrap it's more or less as it would. In the example below I have used css and js files from third parties. But in your case I advise Download.

EDIT:

I'm sorry I pressed enter on my keyboard before I can comment. But the bootstrap is a very useful and practical tool for the developer to know more details about it and what can be done with it, can enter the site: link in it has the complete documentation of how to use and how to download.

For a visualization of what has been done you can go here in this jsfiddle link and can see that it is reponsivo.

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:ContentPlaceHolderID="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 does not completely solve your need, but advice to use bootstrap if you want to use your reponsive site so you do not break much of the head by doing it yourself.

    
31.03.2015 / 14:21
Login attempt blocked PHPMailer How to make continuous cycle2 carousel without pause?