3
I started yesterday with Bootstrap and I’m still on the learning curve. My need is a table with two columns, a form of a grid. In this table I have only two columns: CNPJ and Social Reason. And I do a BD query and bring CNPJ and Reason and fill these columns respectively. Is there an example of something similar? I’m diving headfirst into Bootstrap.
3
To create the proposed layout, here is the example below :
<div class="container">
<div class="row">
<div class="col-md-6">CNPJ</div>
<div class="col-md-6">Razão Social</div>
</div>
<div class="row">
<div class="col-md-6">123456789</div>
<div class="col-md-6">Teste</div>
</div>
<div class="row">
<div class="col-md-6">123456789</div>
<div class="col-md-6">Teste</div>
</div>
</div>
See the example in http://www.bootply.com/fnNWhNA2Fe
But for your case, I think it’s best to work with a table within a grid. So you can have the table with the two columns, and leave space for other information, as you commented :
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<tbody><tr>
<th>CNPJ</th>
<th>Razão Social</th>
</tr>
<tr>
<td>123456789</td>
<td>Teste</td>
</tr>
<tr>
<td>123456789</td>
<td>Teste</td>
</tr>
<tr>
<td>123456789</td>
<td>Teste</td>
</tr>
<tr>
<td>123456789</td>
<td>Teste</td>
</tr>
<tr>
<td>123456789</td>
<td>Teste</td>
</tr>
</tbody></table>
</div>
<div class="col-md-6">Outras informações</div>
</div>
</div>
See the demonstration in http://www.bootply.com/WaMMYR6N16
Just be careful which version of Bootstrap you are using. Classes like col-md-x for example are present only in the latest version of Bootstrap, from the 3.x.x. Just one additional comment =)
2
Bootstrap is an HTML5 and CSS3 framework designed to help you with front-end development of web applications and websites, but its features are more visual-oriented and its programming is more control-oriented. You can use Bootstrap basically for the layout, the main elements it boostrap works on are: Glyphicons, Dropdowns, Button groups, Button dropdowns, Input groups, Navs, Navbar, Breadcrumbs, Pagination, Labels, Badges, Jumbotron, Page header, Thumbnails, Alerts, Progress bars, Media Object, Panels, Responsive embed, Wells, Back to top and Preview Theme you can find information about the use of each of them on official website, there are features like modal and others that are also supported but all are basically geared to layout, if you search only the formatting of the data and you want to use the boostrap for the layout of your page it is a good solution, if you access the part of css on the boostrap website will find examples of how to format your table for it to use the boostrap classes and thus stick to the layout as specified. Just applying the "table" class will already be using part of the boostrap pattern.
<table class="table">
...
</table>
If you want to do pagination control while bringing the data to format in a grid allow searching and etc... You will need another resource I advise you on jQuery Datatables which can be used with boostrap layout. Easy to use, simple, well documented and functional. You can apply bootstrap style to Datatable.
Browser other questions tagged javascript css twitter-bootstrap
You are not signed in. Login or sign up in order to post.
I found the example.
– pnet
You want using AJAX or Post?
– Leonel Sanches da Silva
ajax use with jquery for popular. The question now is to work with the size. All in bootstrap by default is 100% and I need to create a narrow table as the restantant next to the table will be used for other information.
– pnet
First read the container section: http://getbootstrap.com/css/#grid. It teaches you how to divide the screen the way you need it.
– Leonel Sanches da Silva
If you put an example from your View, I put an answer.
– Leonel Sanches da Silva