bootstrap两端对齐链接实现上一页下一页翻页

简介: bootstrap两端对齐链接实现上一页下一页翻页

image.png

bootstrap两端对齐代码


<ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  </ul>

js实现根据条件按钮不可用

此处判断时间,如果还没到就显示灰色不可用


// {{ next_date }}是django后台传过来的时间变量,如: 2018-06-30
var next_date = Date.parse("{{ next_date }}" + ' GMT +8');  //解析成时间
var date = new Date();  //当前时间
var now = Date.parse(date);  // 当前时间转为时间戳
var delta = next_date - now;  //作比较
// 如果delta > 0: 时间比今天超前
// 如果delta < 0: 时间比今天靠后
if(delta > 0){
     next.attr("href", 'javascript:void(0)'); //设置<a>标签不可用
     $(".next").addClass('disabled');   // 设置 li样式不可用
 }
相关文章
|
前端开发
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
  Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:   1、导航条中的按钮navbar-btn   2、导航条中的文本navbar-text   3、导航条中的普通链接navbar-link   但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。
1167 0
|
JavaScript 前端开发 容器
|
JavaScript 前端开发 容器
|
JavaScript 前端开发 容器
|
JavaScript 前端开发 Java
Bootstrap之翻页
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/49150353 Bootstrap之翻页。
1160 0
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
67 0
|
前端开发 容器
|
前端开发 容器