zoukankan      html  css  js  c++  java
  • 给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] {  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>
    

      

    欢迎大家多多交流
  • 相关阅读:
    存储过程
    C++学习总结
    Android快速开发系列 10个常用工具类
    SimpleHttpServer的学习之总体架构
    SimpleHttpServer的学习之UML
    SimpleHttpServer的学习(1)
    map用法
    idea 中resources下于java包名相同的包不能导入XML文件问题
    leetcode621
    Yukari's Birthday 枚举+二分 过程注意数据的溢出问题 HDU4430
  • 原文地址:https://www.cnblogs.com/shihao316558512/p/5580839.html
Copyright © 2011-2022 走看看