Tables with Bootstrap

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 make a query in the DB and I bring CNPJ and Reason and fill these columns respectively. Are there any examples of something similar? I'm diving headlong into Bootstrap.

    
asked by anonymous 25.06.2014 / 21:33

2 answers

3

To create the proposed layout, here's 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 on link

But for your case, I think it's better to work with a table within a grid. So you can have the table with the two columns, and leave the 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 demo at link

    
21.07.2014 / 23:09
2

Bootstrap is an HTML5 and CSS3 framework designed to help you with the front end in developing web applications and websites, yet its functionality is more visually oriented and its programming is more focused on control management . You can use Bootstrap basically for layout, the main elements that it boostrap works 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 on the use of each one at official website , there are features like modal and others that are also supported but all are basically layout-oriented, if you just search the formatting of the data and you want to use the boostrap for the layout of your page it is a good If you access the css part of the boostrap site you will find examples of how to format your table to use the boostrap classes and so stay with the layout as specified. Just applying the "table" class will already be using some of the boostrap pattern.

<table class="table">
  ...
</table>

If you want to do paging control when bringing the data to format in a grid allow search and etc ... You will need another resource I advise you to jQuery DataTables that can be used with the boostrap layout. Easy to use, simple, well documented and functional. You can apply the bootstrap style in DataTable .

    
03.07.2014 / 13:43