iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
0
自我挑戰組

專案學習的30天系列 第 15

Day15-ListView套BootStrap3.3.7

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

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/20107754ylrjugKe3u.png

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>

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/20107754Sb6wUgJccn.png

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

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/201077542uKCQvXodm.png

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

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/2010775423wIM18q8L.png

移除間隔換色

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

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/20107754wI7oCDlrWH.png

替換內文樣式

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>

顯示狀況
https://ithelp.ithome.com.tw/upload/images/20171231/20107754ibXLDtDbzt.png

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


上一篇
Day13-相簿系統-壓縮和裁切圖片大小比較
下一篇
Day16-溝通
系列文
專案學習的30天30

尚未有邦友留言

立即登入留言