bootstrap

Bootstrap 允许您以两种方式显示代码：

第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。

实例

<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
    <article>
        <h1>Article Heading</h1>
    </article>
</pre>

　　联合使用所有表格类:

<table class="table table-striped table-bordered table-hover table-condensed">
       <caption>联合使用所有表格类:</caption>  
       <thead>
           <tr>
               <th>#</th>
               <th>Firstname</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1</td>
               <td>Anna</td>
           </tr>
           <tr>
               <td>2</td>
               <td>Debbie</td>
           </tr>
           <tr>
               <td>3</td>
               <td>John</td>
           </tr>
       </tbody>
   </table>

　　响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
实例

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table>
</div>

posted on 2020-11-27 12:02 季昂阅读(76) 评论(0) 编辑收藏举报