Bootstrap 使用引导框架时显示数据

agxfikkp 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(152)

我有一个.form-horizontal和.control-label的编辑表单。但是，现在我想向用户显示一条记录（例如，用户配置文件的详细信息）。因此，我设想如下：

First Name:        Foo
Last Name:         Bar
Job:               Something

使用引导框架做这件事的最好方法是什么？我想使用和我的编辑表单相同的结构，但是因为我要显示数据，我不能使用.form-horizontal类。如果我使用<table>标签，那么我可以使用什么类？

twitter-bootstrap

来源：https://stackoverflow.com/questions/14222450/displaying-data-when-using-bootstrap-framework

4条答案

按热度按时间

v09wglhw1#

用于引导3

Bootstrap 3提供了一个“Horizontal 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）回复(0）举报 2022-12-07

6pp0gazn2#

用于 Bootstrap 4

您可以使用说明列表对齐方式。例如-

<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>

赞(0）回复(0）举报 2022-12-07

kqqjbcuj3#

你也可以用表来举例

<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>

赞(0）回复(0）举报 2022-12-07

8wigbo564#

<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>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 使用引导框架时显示数据

4条答案

用于引导3

用于 Bootstrap 4

相关问题

热门标签

最新问答