Bootstrap의 목록 그룹, 페이징 및 진행률 표시줄 구성 요소 사용에 대한 간략한 분석-부트스트랩 튜토리얼-php.cn

Bootstrap에서 목록 그룹, 페이징 및 진행률 표시줄을 구현하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap의 목록 그룹, 페이징 및 진행률 표시줄 구성 요소의 사용법을 소개합니다.

Bootstrap의 목록 그룹, 페이징 및 진행률 표시줄 구성 요소 사용에 대한 간략한 분석

목록 그룹

목록 그룹을 선택하려면 .list-group을 사용하세요.
.list-group-item에.active를 추가하여 현재 활동을 선택합니다. [관련 권장사항: "부트스트랩 튜토리얼.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】
添加.disabled到 a.list-group-item以使其显示为禁用
使用或

添加.list-group-flush以删除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目

添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平

使用上下文类来设置具有状态背景和颜色的列表项的样式

在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等

代码练习：

 列表组一
 列表组二
 列表组三
 
 
  列表组一 列表组二 列表组三 
 
  列表组一
 列表组二
 列表组三
 
 
  列表组一 标记
 列表组二
 列表组三

로그인 후 복사

分页

添加.pagination，字标签添加.page-item，链接标签添加.page-link
可添加.pagination-lg或.pagination-sm"].justify-content-*

.disabled를 .list-group-item으로 변경하여 비활성화된 것처럼 보이게 합니다.

또는 <버튼> /code>

 추가 .list-group-flush를 추가하여 마우스 오버, 비활성화 및 활성 상태가 있는 실행 가능한
       .list-group-item-action목록 그룹 항목을 생성합니다. 상위 컨테이너(예: 카드)에서 목록 그룹 항목을 나란히 렌더링하기 위한 일부 테두리 및 둥근 모서리
       .progress作为最外层元素，用于指示进度条（progress bar）的最大值。
       
我们在内部使用.progress-bar来指示到目前为止的进度。
       .progress-bar需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。
       通过在.progress-bar元素内添加文本，就可以为进度条（progress bar）添加标签。
       为.progress设置了一个height值，因此，如果你改变了该值，内部的.progress-bar将自动地调整尺寸。
       通过使用背景色相关的工具类可以改变单个进度条（progress bar）的外观。
       如果需要，可以在一个进度条（progress）组件内可以添加多个进度条（progress bar）。
       为任何.progress-bar添加.progress-bar-striped即可添加条纹样式，这是通过 CSS 的渐变功能在进度条（progress bar）的背景色上应用条纹效果实现的。
       条纹渐变也可以有动画效果。为.progress-bar添加.progress-bar-animated모든 중단점의 그룹 목록에
       .list-group-horizontal을 추가합니다. 항목 레이아웃이 다음에서 변경되었습니다. 세로에서 가로로
       컨텍스트 클래스를 사용하여 상태 배경 및 색상으로 목록 항목 스타일 지정
       목록 그룹 항목에 배지를 추가하여 일부 유틸리티, 활동 등의 도움으로 읽지 않은 개수를 표시합니다.코드 연습:
       
         首页
 1
 2
 下一页
 
        
         로그인 후 복사
        
       
       페이지 매기기.pagination추가, 단어 태그.page-item추가,.page-link추가 >
을 링크 태그에.pagination-lg또는.pagination-sm을 추가하여 크기 페이징 효과를 설정할 수 있습니다. 를 추가하여 중앙, 왼쪽 및 오른쪽 설정을 지정할 수 있습니다. 코드 연습:
        
           
 
 
   30% 
 
 
  
 
 
 
 
   
 
         
          로그인 후 복사
         
        
Progress bar진행률 표시줄의 최대값을 나타내기 위해 가장 바깥쪽 요소로.progress를 사용합니다. 지금까지의 진행 상황을 표시하기 위해 내부적으로.progress-bar를 사용합니다..progress-bar는 인라인 스타일, 유틸리티 클래스 또는 사용자 정의 CSS 속성을 통해 너비를 설정해야 합니다..progress-bar요소 내에 텍스트를 추가하여 진행률 표시줄에 라벨을 추가할 수 있습니다..progress에 대한height값을 설정하세요. 해당 값을 변경하면 내부.progress-bar가 자동으로 크기를 조정합니다. 배경색과 관련된 도구 클래스를 사용하여 단일 진행률 표시줄(진행률 표시줄)의 모양을 변경할 수 있습니다. 필요한 경우 진행률 표시줄 구성 요소 내에 여러 개의 진행률 표시줄을 추가할 수 있습니다..progress-bar에.progress-bar-striped를 추가하여 줄무늬 스타일을 추가합니다. 이 작업은 CSS 그래디언트 기능을 통해 진행률 표시줄에서 수행됩니다. 배경색에 스트라이프 효과를 적용하여 스트라이프 그라데이션에는 애니메이션 효과도 있을 수 있습니다. CSS3 애니메이션 기능을 사용하여 오른쪽에서 왼쪽으로 롤링되는 줄무늬의 애니메이션 효과를 추가하려면.progress-bar에.progress-bar-animated를 추가하세요. 코드 연습: rrreee부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
       위 내용은 Bootstrap의 목록 그룹, 페이징 및 진행률 표시줄 구성 요소 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!