分页

一组用于构建分页 UI 的展示组件。

示例

结果

加载中...

实时编辑器

import Pagination from 'react-bootstrap/Pagination'; let active = 2; let items = []; for (let number = 1; number <= 5; number++) { items.push( <Pagination.Item key={number} active={number === active}> {number} </Pagination.Item>, ); } const paginationBasic = ( <div> <Pagination>{items}</Pagination> <br /> <Pagination size="lg">{items}</Pagination> <br /> <Pagination size="sm">{items}</Pagination> </div> ); render(paginationBasic);

import Pagination from 'react-bootstrap/Pagination';

let active = 2;
let items = [];
for (let number = 1; number <= 5; number++) {
  items.push(
    <Pagination.Item key={number} active={number === active}>
      {number}
    </Pagination.Item>,
  );
}

const paginationBasic = (
  <div>
    <Pagination>{items}</Pagination>
    <br />

    <Pagination size="lg">{items}</Pagination>
    <br />

    <Pagination size="sm">{items}</Pagination>
  </div>
);

render(paginationBasic);

更多选项

为了构建更复杂的分页 UI，有一些方便的子组件可以用来添加“第一页”，“上一页”，“下一页”和“最后一页”按钮，以及一个“省略号”项来指示之前的或继续的结果。

结果

加载中...

实时编辑器

import Pagination from 'react-bootstrap/Pagination'; function AdvancedExample() { return ( <Pagination> <Pagination.First /> <Pagination.Prev /> <Pagination.Item>{1}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{10}</Pagination.Item> <Pagination.Item>{11}</Pagination.Item> <Pagination.Item active>{12}</Pagination.Item> <Pagination.Item>{13}</Pagination.Item> <Pagination.Item disabled>{14}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{20}</Pagination.Item> <Pagination.Next /> <Pagination.Last /> </Pagination> ); } export default AdvancedExample;

import Pagination from 'react-bootstrap/Pagination';

function AdvancedExample() {
  return (
    <Pagination>
      <Pagination.First />
      <Pagination.Prev />
      <Pagination.Item>{1}</Pagination.Item>
      <Pagination.Ellipsis />

      <Pagination.Item>{10}</Pagination.Item>
      <Pagination.Item>{11}</Pagination.Item>
      <Pagination.Item active>{12}</Pagination.Item>
      <Pagination.Item>{13}</Pagination.Item>
      <Pagination.Item disabled>{14}</Pagination.Item>

      <Pagination.Ellipsis />
      <Pagination.Item>{20}</Pagination.Item>
      <Pagination.Next />
      <Pagination.Last />
    </Pagination>
  );
}

export default AdvancedExample;

API

分页

页面项