1

Estou tendo uma dificuldade em posicionar controles na página com bootstrap. Gostaria de não estar recorrendo a recursos externos de CSS, pois isso tiraria a razão de ser do bootstrap. O que eu quero dizer é:

1) Gostaria de posicionar um determinado controle não colado na parte superior da tela, mas assim, como se fosse um CSS e eu usaria um top:10px ou 15px e assim po diante.

2) Também estou tendo dificuldade de posicionar à esquerda da margem, como um left no CSS puro. Eu fiz uma table e populei a table e ela ficou no meio da página, dando um espaço à direita e esquerda. Porem eu coloquei um controle textbox em cima da table e ele colou na margem esquerda, tipo, um 0px e aí fica aquela aparência feia, com um grid(table) no centro e o textbox bem colado na margem.

Procurei nas documentações do bootstrap que eu tenho sobre essas coisas enão vi nada disso. Vi somente como criar botões, tables e etc... Sei que a documentação é extensa e não tenho tudo, mas confesso que não vi nada a respeito. Alguém poderia me dar o caminho das pedras? Ou seja, onde procurar esses recurso e outros mais? Desde já agradeço.

Meu código:

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

O Jquery que monta o tbody da table

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) {
        }

    });
}
5
  • Você poderia disponibilizar o código fonte para dar uma olhada assim fica mais fácil de te ajudar. Commented 30/07/2014 às 11:40
  • editado conrado
    – pnet
    Commented 30/07/2014 às 11:46
  • Você não criou um .css seu para posicionar os componentes na tela ? Commented 30/07/2014 às 11:53
  • Olha este fiddle: jsfiddle.net/aymone/LnE5h, se for isso que você quer, posto uma resposta. Quanto ao CSS, você precisa adicionar um pouco sim, mas é um pouco, "uma pincelada" nos detalhes. O bootstrap não é uma ferramenta que te trará todas respostas, mas ele cuida do "grosso". Commented 30/07/2014 às 13:02
  • eu consegui resolver esse problema colocando tudo dentro de uma <div class="container text-center" style="margin: 100px;"> Ou seja, definindo no container qual é a margem... Eu não a que ponto está correto, mas não consegui fazer só com "row" e "col". Até agora está funcionando de boas rsss. Também me bati um monte com a mesma dúvida. Espero que pra você também funcione.
    – user51881
    Commented 3/08/2016 às 17:58

1 Resposta 1

1

Fala Pessoal,

respondedo a pergunta, o bootstrap é um framework incrivel mas precisa ser usado de acordo com a lógica que ele foi projetado.

pense no site como uma grade, temos linhas (row) e colunas(col-). e a própria grade (container). precisamos de todos esses elementos para compor um layout Típico de bootstrap. Sendo assim meu caro seu código:

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

qualquer coisa ainda estarei por aqui..

2
  • Olá Aloísio, boa tarde. Eu vi o código que você postou, agradeço. O que gostaria é de um site onde eu posso entender melhor, gostaria de não só copiar, mas entender. Por exemplo, o textbox continuou colado no topo da página, e eu gostaria de colocar mais para baixo, como eu disse, como se fosse um CSS com o top onde agente coloca em qualquer lugar. Gostaria de fazer isso com bootstrap.
    – pnet
    Commented 30/07/2014 às 16:52
  • então pnet, eu entendo o que você quer, normalmente você terá conteúdos acima desse elemento e esses conteúdos irão preecher os espaços que você quer no topo. Mas se é algo semelhante a um box de login que fica centralizado verticalmente e horizontalmente você pode sem medo de ser feliz adicionar um css extra (abaixo dos includes de css do bootstrap) e esse irá posicionar o elemento de uma maneira personalizada. Commented 30/07/2014 às 17:30

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 .