2013-01-08 13 views
18

Mam formularz edycji, który .form-horizontal i .control-label. Jednak teraz chcę wyświetlić użytkownikowi jeden rekord (na przykład szczegóły profilu użytkownika). Więc wyobrażam sobie coś takiego:Wyświetlanie danych podczas korzystania z frameworka bootstrap

First Name:  Foo 
Last Name:   Bar 
Job:    Something 

Jaki jest najlepszy sposób, aby to zrobić przy użyciu frameworka bootstrap? Chciałem użyć tej samej struktury co mój formularz edycji, ale ponieważ będę wyświetlał dane, nie mogę użyć klasy .form-horizontal. Jeśli używam tagu <table>, to jakiej klasy mogę użyć?

Odpowiedz

45

Bootstrap udostępnia klasę "Opis poziomy", która umożliwia prezentowanie danych dokładnie tak, jak tego chcesz.

http://getbootstrap.com/css/#horizontal-description

Dzięki swoim przykładzie danych, by zrobić coś takiego:

<dl class="dl-horizontal"> 
    <dt>First Name</dt> 
    <dd>Foo</dd> 
    <dt>Last Name</dt> 
    <dd>Bar</dd> 
    <dt>Job</dt> 
    <dd>Something</dd> 
</dl> 
+0

Wystarczy pamiętać, że 'dl -pozostałe dt' w bootstrap 3 ma stałą szerokość (160px), a gdy jest przepełnienie tekstu, używa elipsy. Może być konieczne zastąpienie tej reguły css, aby wyświetlić cały tekst, gdy jest większy. –

2

Można użyć tabeli też tu jest, na przykład

<table class= "table table-user-information"> 
       <tbody> 
        <tr> 
        <td>Dokter Umum:</td> 
        <td><?php echo $row->terap_addressdoc ?></td> 
        </tr> 
        <tr> 
        <td>Specialist Chiropactic</td> 
        <td><?php echo $row->terap_specialist ?></td> 
        </tr> 

        <tr> 
        <td>Email</td> 
        <td><?php echo $row->terap_terapist ?></td> 
        </tr> 
       </tbody> 
       </table> 
Powiązane problemy