web-dev-qa-db-ja.com

bootstrapフレームワークを使用するときにデータを表示する

.form-horizontalと.control-labelの編集フォームがあります。ただし、1つのレコード（たとえば、ユーザープロファイルの詳細）をユーザーに表示したいと思います。だから私はこのようなものを想像する：

First Name:        Foo
Last Name:         Bar
Job:               Something

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

htmlhtml5twitter-bootstrap
23
birdy

ブートストラップは、希望どおりにデータを提示するための「水平記述」クラスを提供します。

http://getbootstrap.com/css/#horizo​​ntal-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>
49
routeburn

ここでもテーブルを使用できます

<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>
2
Freddy Sidauruk

Bootstrap 4

Description list alignment を使用できます。例えば-

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>
2
Emdadul Sawon