给AspNetPager分页控件添加bootstrap样式
AspNetPager分页控件算是比较好用的一个分页控件了。想要结合bootstrap使用,官方代码入口
.pagination a[disabled]{ color: #777;cursor: not-allowed;background-color: #fff;border-color: #ddd;} .pagination span.active{z-index: 2;color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
<nav class="pull-right"> <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged" CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10"> </webdiyer:AspNetPager> </nav>
发现问题:当数据总数超过30时,会自动出现两个控件,官方说明
解决方案1:
给两个自动多出来的控件加样式
.pagination input[type=text] { width: 50px !important; display: inline-block; } .pagination input[type=submit] { margin-left: 10px; }
<nav class="pull-right"> <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged" CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10" PageIndexBoxClass="form-control" SubmitButtonClass="btn btn-primary"> </webdiyer:AspNetPager> </nav>
解决方案二:
让控件永不多出来
<nav class="pull-right"> <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged" CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10" ShowPageIndexBox="Never"> </webdiyer:AspNetPager> </nav>
欢迎大家多多交流