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