WebGrid尋呼機樣式

Question

有什麼辦法可以將樣式應用於WebGrid尋呼機？

我發現這樣做的唯一方法是從客戶端通過編寫jquery代碼， 但它似乎有點骯髒。

有沒有任何正常的方式來爲這個GridHelper提供CSS？

Answer 1

對於尋呼機中的樣式鏈接，您可以正常使用CSS。您只需確保您可以通過CSS選擇器識別鏈接。如果你把你尋呼機呼叫可識別的元素，這是很簡單的：

<div id="pager"> 
    @grid.Pager() 
</div> 

現在，您可以訪問鏈接的樣式：

#pager a { 
    color: pink; 
    text-decoration: none; 
} 
#pager a:hover { 
    color: green; 
    text-decoration: underline; 
} 

Answer 2

這是一個與CSS簡單。

設置您的頁腳風格table-pager

@grid.GetHtml(
    mode: WebGridPagerModes.All, 
    columns: gridColumns, 
    tableStyle: "table table-striped table-condensed table-responsive table-hover", 
    rowStyle: "table-row-clickable", 
    footerStyle: "table-pager" 
) 

，並添加這個CSS：

.table-pager > td { 
    padding-top: 10px; 
} 

    .table-pager > td > a { 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    padding: 3px 7px; 
    } 

    .table-pager > td > a:hover { 
    background-color: #f0f0f0; 
    }