Positioning controls with bootstrap

1

I'm having a hard time positioning controls on the page with bootstrap. I would like to not be resorting to external CSS features as this would take away the bootstrap rationale. What I mean is:

1) I would like to place a certain unselected control on the top of the screen, but so, like a CSS and I would use a top: 10px or 15px and so on.

2) I'm also having difficulty positioning to the left of the margin, like a left in pure CSS. I made a table and populated the table and it stood in the middle of the page, giving a space to the right and left. But I put a textbox control on top of the table and it pasted on the left margin, type a 0px and there it looks ugly, with a grid (table) in the center and the textbox well pasted on the margin.

I looked into the bootstrap documentation I have about these things and I did not see any of it. I only saw how to create buttons, tables and etc ... I know the documentation is extensive and I do not have everything, but I confess I did not see anything about it. Could someone give me the path of stones? That is, where to look for these and other resources? Thanks in advance.

My code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pesquisa</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen" />
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/Pesquisa/Pesquisa.js"></script>

</head>
<body>

    <form role="form">
        <div class="form-group col-md-6">
            <input type="text" class="form-control col-md-4" id="txtPesquisar" name="Pesquisar" placeholder="Entre com um email"/>

        </div>
        <div class="form-group col-md-6">
            <input id="btnGravarCadastro" type="button" class="btn btn-success col-md-4" value="Pesquisar" onclick=" return carregaGrid();" />
        </div>


</form>

    <div id="tabela" class="container">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>E-mail</th>
                    <th>Endereço</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Telefone</th>
                    <th>Celular</th>
                </tr>
            </thead>
            <tbody id="tbcadastro">

            </tbody>
        </table>
    </div>
</body>
</html>

Jquery mounting table tbody

function carregaGrid() {

    var str = "";

    var email = jQuery.parseJSON('{ }');

    $.ajax({
        url: '/Pesquisa/PesquisaCadastro',
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ _email: $('#txtPesquisar').val() }),
        success: function (data) {

            $(data.result_pesquisa).each(function(){
                str += '<tr>';
                str += '<td>' + this.nmcadastro + '</td>';
                str += '<td>' + this.email_cadastro + '</td>';
                str += '<td>' + this.end_cadastro + '</td>';
                str += '<td>' + this.bairro_cadastro + '</td>';
                str += '<td>' + this.cidade_cadastro + '</td>';
                str += '<td>' + this.uf_cadastro + '</td>';
                str += '<td>' + this.tel_cadastro + '</td>';
                str += '<td>' + this.cel_cadastro + '</td>';
                str += '</tr>';
            })

            $('#tbcadastro').html(str);

        },
        error: function (error) {
        }

    });
}
    
asked by anonymous 30.07.2014 / 13:38

1 answer

1

Personal Speech,

I answer the question, bootstrap is an amazing framework but it needs to be used according to the logic it was designed for.

Think of the site as a grid, we have rows (columns) and columns (col-). and the container itself. we need all these elements to compose a typical bootstrap layout. So my dear your code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pesquisa</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen" />
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/Pesquisa/Pesquisa.js"></script>

</head>
    <body>
        <div class="container">
            <div class="row">
                <!-- caso queira controlar a responsividade melhor adicione as 
                    classes col-md-*, col-sm-* ou até mesmo col-xs-* -->
                <div class="col-lg-12">
                    <form role="form">
                        <div class="form-group col-md-6">
                        <input type="text" class="form-control col-md-4" id="txtPesquisar" name="Pesquisar" placeholder="Entre com um email"/>
                        </div>
                        <div class="form-group col-md-6">
                        <input id="btnGravarCadastro" type="button" class="btn btn-success col-md-4" value="Pesquisar" onclick=" return carregaGrid();" />
                        </div>
                    </form>
                </div>  
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>E-mail</th>
                                <th>Endereço</th>
                                <th>Bairro</th>
                                <th>Cidade</th>
                                <th>Estado</th>
                                <th>Telefone</th>
                                <th>Celular</th>
                            </tr>
                        </thead>
                        <tbody id="tbcadastro">
                            <!--corpo da tabela -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

I'll still be around.

    
30.07.2014 / 17:13