2013-01-08 8 views
18

.form-horizontal.control-labelという編集フォームがあります。ただし、ユーザーに1つのレコード(たとえば、ユーザープロファイルの詳細)を表示する必要があります。ですから、私は次のようなことを想像しています:ブートストラップフレームワークを使用するとデータが表示される

First Name:  Foo 
Last Name:   Bar 
Job:    Something 

ブートストラップフレームワークを使ってこれを行う最良の方法は何ですか?私は編集フォームと同じ構造を使用したかったのですが、データを表示するので、.form-horizontalクラスを使用することはできません。 <table>タグを使用すれば、どのクラスを使用できますか?

答えて

45

ブートストラップには、あなたが望むのとまったく同じように現在のデータを行うための 'Horizo​​ntal Description'クラスがあります。あなたの例のデータでは

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

、あなたはこのような何かをするだろう:

<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

のためでありますブートストラップ3の「水平dt」は固定幅(160px)を持ち、テキストがオーバーフローすると省略記号が使用されます。このCSSルールをオーバーライドして、より大きいときに全文を表示する必要があるかもしれません。 –

2

あなたもここにテーブルを使用することができるだけで `dlであることに注意してください例

<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> 
関連する問題