原始ListView

aspx

<LayoutTemplate>
  <table runat="server">
    <tr runat="server">
      <td runat="server">
         <table id="groupPlaceholderContainer" runat="server" border="0" style="" >
           <tr id="groupPlaceholder" runat="server">
           </tr>
         </table>
      </td>
    </tr>
    <tr runat="server">
      <td runat="server" style="">
      </td>
    </tr>
  </table>
</LayoutTemplate>

顯示狀況

ListView配置

aspx

<LayoutTemplate>
  <table runat="server">
    <tr runat="server">
      <td runat="server">
      ListView上方
         <table id="groupPlaceholderContainer" runat="server" border="0" style="" >
           <tr id="groupPlaceholder" runat="server">
           </tr>
         </table>
      </td>
    </tr>
    <tr runat="server">
      <td runat="server" style="">ListView底部
      </td>
    </tr>
  </table>
</LayoutTemplate>

顯示狀況

套用BS3.3.7-表單(Table)

BS3.3.7-Table的CSS樣式
https://getbootstrap.com/docs/3.3/css/#tables[https://getbootstrap.com/docs/3.3/css/#tables]
在table內套用class="table"

aspx

<LayoutTemplate>
  <table runat="server">
    <tr runat="server">
      <td runat="server">
         <table id="groupPlaceholderContainer" class="table" runat="server" border="0" >
           <tr id="groupPlaceholder" runat="server">
           </tr>
         </table>
      </td>
    </tr>
    <tr runat="server">
      <td runat="server" style="">
      </td>
    </tr>
  </table>
</LayoutTemplate>

顯示狀況

套用BS3.3.7-表單(td)

aspx

<!--偶數td-->
<AlternatingItemTemplate>
    <td runat="server" style="" class="danger">Id:
        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
        <br />檔案名稱:
        <asp:Label ID="PicFileNameLabel" runat="server" Text='<%# Eval("PicFileName") %>' />
        <br />簡介:
        <asp:Label ID="SummaryLabel" runat="server" Text='<%# Eval("Summary") %>' />
        <br /></td>
</AlternatingItemTemplate>

<!--基數td-->
<ItemTemplate>
    <td runat="server" style=""  class="success">Id:
        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
        <br />檔案名稱:
        <asp:Label ID="PicFileNameLabel" runat="server" Text='<%# Eval("PicFileName") %>' />
        <br />簡介：
        <asp:Label ID="SummaryLabel" runat="server" Text='<%# Eval("Summary") %>' />
        <br /></td>
</ItemTemplate>

<LayoutTemplate>
  <table runat="server">
    <tr runat="server">
      <td runat="server">
         <table id="groupPlaceholderContainer" class="table" runat="server" border="0" >
           <tr id="groupPlaceholder" runat="server">
           </tr>
         </table>
      </td>
    </tr>
    <tr runat="server">
      <td runat="server" style="">
      </td>
    </tr>
  </table>
</LayoutTemplate>

顯示狀況

移除間隔換色

保留ItemTemplate，刪除AlternatingItemTemplate
刪除ItemTemplate會出錯誤喔！

aspx

<ItemTemplate>
    <td runat="server" style=""  class="success">Id:
        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
        <br />檔案名稱:
        <asp:Label ID="PicFileNameLabel" runat="server" Text='<%# Eval("PicFileName") %>' />
        <br />簡介：
        <asp:Label ID="SummaryLabel" runat="server" Text='<%# Eval("Summary") %>' />
        <br /></td>
</ItemTemplate>

<LayoutTemplate>
  <table runat="server">
    <tr runat="server">
      <td runat="server">
         <table id="groupPlaceholderContainer" class="table" runat="server" border="0" >
           <tr id="groupPlaceholder" runat="server">
           </tr>
         </table>
      </td>
    </tr>
    <tr runat="server">
      <td runat="server" style="">
      </td>
    </tr>
  </table>
</LayoutTemplate>

顯示狀況

替換內文樣式

aspx

 <ItemTemplate>
     <td runat="server" style=""  class="success">
         <p style="color:blue">Id:</p>
         <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' ForeColor="#9900CC" />
         <p style="color:seagreen">檔案名稱:</p>
         <asp:Label ID="PicFileNameLabel" runat="server" Text='<%# Eval("PicFileName") %>' ForeColor="#9900CC"/>
         <p style="color:orange">簡介：</p>
         <asp:Label ID="SummaryLabel" runat="server" Text='<%# Eval("Summary") %>' ForeColor="#9900CC"/>
         <br />
     </td>
 </ItemTemplate>

顯示狀況

菜逼八第一次專案心得，若不盡不詳之處還請包涵，若有其他想法也請大神們不吝指教