Bootstrap 4에서 페이지 매김을 정렬하는 방법은 무엇입니까?

Bootstrap 4는 반응형 모바일 우선 웹사이트를 만들기 위한 인기 있는 프런트 엔드 프로그래밍 프레임워크입니다. 현대적이고 아름다운 모양의 웹사이트를 빠르게 구축하는 데 사용할 수 있는 탐색 모음, 양식, 버튼, 모달 등과 같은 다양한 CSS 및 JavaScript 요소를 제공합니다.

Bootstrap 4의 페이지 정렬은 페이지 매김 구성 요소가 배치되는 방식을 나타냅니다. 그러나 페이지 매김은 일반적으로 중앙에 위치합니다. justify-content-* 클래스는 왼쪽 또는 오른쪽 정렬을 허용합니다.

방법

Bootstrap 4에서 페이지 매김을 정렬하는 방법은 다양합니다 -

• .justify-content-* 클래스를 사용하세요

• 텍스트* 수업을 사용하세요

이제 예시를 통해 각 방법을 자세히 알아볼까요?

방법 1: ".justify-content-* 클래스"를 사용하세요

Bootstrap 4에서 페이지 매김을 정렬하는 첫 번째 방법은 ".justify-content-* 클래스를 사용하는 것"입니다.

예

여기에서는 단계별 예를 통해 이 방법을 구현하겠습니다. -

1단계 - Bootstrap 4 JavaScript 및 CSS 파일이 HTML 문서의 헤드에 포함되어 있는지 확인하세요.

2단계 - 페이지 매김 구성 요소를 빌드하려면 페이지 매김 클래스를 사용하여

요소를 만듭니다. 각 페이지에 대해 페이지 같은 링크가 있는 요소와
요소 내에 페이지 같은 항목이 있는

• 3단계 - 페이지 매기기 구성 요소를 왼쪽, 가운데 또는 오른쪽으로 정렬하려면

  요소에 다음 클래스 중 하나를 추가해야 합니다.
  • 페이지 매김 구성 요소는 .justify-content-start 스타일을 사용하여 왼쪽으로 정렬합니다.

  • justify-content-center 스타일을 사용할 때 페이지 매김 구성 요소가 중앙에 배치됩니다.

  • align-pagination-end: 페이지 매김 요소를 오른쪽으로 이동

  4단계 - 페이지 매김이 왼쪽 정렬되었을 때 HTML 코드가 어떻게 보이는지에 대한 예입니다. - 으아악

  5단계 - 필수 클래스를 추가한 후 페이지 매김 구성 요소가 예상대로 정렬되어야 합니다.

  6단계 - 최종 코드는 다음과 같습니다. - 으아악

  방법 2: 텍스트-* 클래스 사용
  페이지 매김 구성 요소를 각각 왼쪽, 가운데 또는 오른쪽으로 정렬하려면 를 사용하세요. 텍스트 왼쪽, 텍스트 가운데 및. 텍스트 오른쪽 클래스.
  예
  이제 이 방법을 구현하는 단계별 예를 살펴보겠습니다. -

  1단계 - 컨테이너 div 요소를 생성하고 justify-content-center 클래스를 지정합니다. 결과적으로 페이지 매김은 컨테이너 내 중앙에 배치됩니다. 으아악

  2단계 - 컨테이너 div 내에

  요소를 생성하고 클래스 페이지 매김 및 원하는 방향으로 페이지 매김 링크 정렬(예: text-center, text-left, textright)을 지정합니다. ) 으아악

  3단계 - 각 페이지 번호에 대한

  • 요소를 생성하거나
    요소 내에 이전 및 다음 버튼을 만듭니다. 각 li 요소에 대해 "page-item" 클래스를 지정합니다. 으아악

    4단계 - 각

    • 요소 내에 버튼 또는 페이지 번호에 대한 요소를 만듭니다. 요소에 "page-link" 클래스를 할당합니다. 으아악

      5단계 - 최종 코드는 다음과 같습니다 - 으아악

      결론
      프레임워크에서 제공하는 내장 클래스를 활용하면 Bootstrap 4에서 페이지 매김 정렬이 쉬워집니다. 위의 단계별 프로세스를 사용하면 완전한 기능을 갖추고 시각적으로 페이지 중심의 페이지 매김 구성 요소를 만들 수 있습니다. 프로젝트에 Bootstrap CSS 및 JavaScript 파일을 포함하고, aria-label 속성을 사용하여 nav 요소를 생성하고, 페이지 매김 링크가 포함된 순서가 지정되지 않은 목록 요소를 제공합니다. textcenter 클래스가 이 작업을 수행합니다. 이 전략을 사용하면 고유한 CSS를 많이 만들지 않고도 페이지 매김의 색상과 방향을 쉽게 변경할 수 있습니다.

      위 내용은 Bootstrap 4에서 페이지 매김을 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!