草庐IT

Foundation 分页

runoob 2023-04-06 原文

Foundation 分页

如果你的网页有很多内容，就需要使用分页功能。

要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类:

实例

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

当前页面

可以在 <li> 加上 .current 类来标注当前页面：

实例

<ul class="pagination">
  <li class="current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

禁用分页

如果需要设置某个分页不可点击需要使用 .unavailable 类：

实例

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="unavailable"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

分页方向

在第一个和最后一个 <li> 元素上添加.arrow 类插入 HTML 实体符号 &laquo; 和 &raquo; 来创建分页方向符号：

实例

<ul class="pagination">
  <li class="arrow"><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="arrow"><a href="#">&raquo;</a></li>
</ul>
尝试一下 »

分页居中显示

我们可以在 <ul> 外层添加 <div> 元素，并在 <div> 上添加.pagination-centered 类来实现分页居中显示 :

实例

<div class="pagination-centered">
  <ul class="pagination">
    <li class="arrow"><a href="#">&laquo;</a></li>
    <li class="current"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="arrow"><a href="#">&raquo;</a></li>
  </ul>
</div>

尝试一下 »

面包屑导航

面包屑导航用于展示当前页面的导航结构。

在 <ul> 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 <li> 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:

实例

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li class="unavailable"><a href="#">Pictures</a></li>
  <li class="current">Vacation</li>
</ul>

尝试一下 »

子导航

在页面切换上，子导航是非常有用的。

在 <dl> 元素上添加 .sub-nav 类来创建子导航。在 <dt> 元素上添加标题，为选中的选项 <dd> 添加 .active 类:

实例

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Active</a></dd>
  <dd><a href="#">Pending</a></dd>
  <dd><a href="#">Suspended</a></dd>
</dl>

尝试一下 »
Foundation分页spanclasshighELE

有关Foundation 分页的更多相关文章

  1. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  2. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性？ - 2

    大家好，我正在开发一个新的Rails应用程序，我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css，还有它的视觉效果；p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的，如果您对app/assets/stylesheets/

  3. ruby - 使用 Her、Faraday 在 API 中进行 Rails 分页 - 2

    我一整天都在想办法解决这个问题，这让我发疯了。我有两个Rails应用程序，ServerApp和ClientApp。ClientApp使用Hergem通过API从ServerApp获取数据。一切都很好，直到我需要分页信息。这是我用来获取订单的方法(使用kamainari进行分页，使用ransack进行搜索):#ServerAppdefsearch@search=Order.includes(:documents,:client).order('iddesc').search(params[:q])@orders=@search.result(distinct:true).page(par

  4. Ruby SSH 禁用分页 - 2

    有什么方法可以禁用或设置ruby​​Net-SSH连接的页面长度，这样我们就不必更改远程设备上的设置了吗？在Cisco路由器中，我们将使用参数“terminallength0”来完成此操作，但在其他服务器上，我们不能使用任何类似的命令。这可以通过Net-SSHlib设置吗？ 最佳答案 假设远程端有一个shell，那么终端高度在LINES环境变量中设置。您可以尝试这样设置:Net::SSH.start('hostname','user')do|ssh|ssh.exec!('LINES=50your-command-here')end如

  5. ruby - 不需要的表单参数被附加到分页链接 - 2

    我有一个页面，用于通过使用提供的表格提交数据来搜索列表。表单参数通过ajax(post请求)提交，在搜索表中创建一条新记录，然后通过show显示列表(动态地，在提交表单的同一页面上)此记录的操作。结果有kaminari提供的分页链接，如下所示:{:controller=>'searches',#Ihavetospecifytheidbecausemysearchesarestoredinthedatabase:action=>'show',:id=>search.id},:remote=>true%>请注意，分页链接是动态包含在页面中的。因此，当我进行新搜索并获得新列表时，服务器会重新

  6. Elasticsearch7.8.0版本入门—— 分页查询文档（高级查询） - 2

    目录一、初始化文档数据二、分页查询文档2.1、概述2.2、示例一、初始化文档数据在Postman中，向ES服务器发POST请求：http://localhost:9200/user/_doc/1，请求体内容为：{"name":"zhangsan","age":20,"sex":"男"}在Postman中，向ES服务器发POST请求：http://localhost:9200/user/_doc/2，请求体内容为：{"name":"zhangsan1","age":21,"sex":"男"}在Postman中，向ES服务器发POST请求：http://localhost:9200/user/_d

  7. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误，但我不知道如何解决:找不到有效的gem'foundation'(>=0)，原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗？ 最佳答案 如

  8. ruby-on-rails - 在 Kaminari 中对多个模型进行分页 - 2

    我正在创建一个搜索页面，该页面将对用户、帖子和评论进行应用程序范围内的搜索。我目前有:#POST/searchdefindexquery=params[:query]@users=User.search(query).page(params[:page])@posts=Post.search(query).page(params[:page])@comments=Comment.search(query).page(params[:page])respond_todo|format|format.htmlendend不过，我真的想把所有结果混合在一起然后分页。像这样进行分页搜索有哪些策

  9. ruby-on-rails - Kaminari & Rails 分页 - 未定义的方法 `current_page' - 2

    我搜索了又搜索，但没有解决我的问题。这是我的Controller:defshow@topic=Topic.find(params[:id])@topic.posts=@topic.posts.page(params[:page]).per(2)#2fordebuggingend这很好用，因为主题View被缩减为两个帖子。但是，当我将其添加到show.html.erb时:我收到这个错误:undefinedmethod`current_page'for# 最佳答案 尝试:defshow@topic=Topic.find(params[:

  10. ruby-on-rails - 使用 will_paginate 在 Ruby 中对数组进行分页 - 2

    我有一个数组@level1，看起来像这样:[[3.0,4,2],[2.0,48,3],[2.1,56,4],............]我想在这个数组上应用分页，这样每个页面一次只显示几行。我试过这个:@temp1=@level1.paginate(:page=>params[:page])但它抛出以下错误:undefinedmethod`paginate'for[[3.0,4,2],[2.0,48,3],[2.1,56,4]]:Array如何使用will_paginate对此执行分页？ 最佳答案 参见https://github.c

随机推荐