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

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

목록 그룹

• 목록 그룹을 선택하려면 .list-group을 사용하세요.
• .list-group-item에 .active를 추가하여 현재 활동을 선택합니다. [관련 권장사항: "부트스트랩 튜토리얼.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】
• 添加.disabled到 a.list-group-item以使其显示为禁用
• 使用<a> 或<button> 通过添加来创建具有悬停、禁用和活动状态的可操作.list-group-item-action列表组项
• 添加.list-group-flush以删除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目
• 添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平
• 使用上下文类来设置具有状态背景和颜色的列表项的样式
• 在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等

代码练习：

		<ul class="list-group">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<div class="list-group list-group-flush">
			<a href="#" class="list-group-item active list-group-item-action">列表组一</a>
			<a href="#" class="list-group-item list-group-item-action">列表组二</a>
			<a href="#" class="list-group-item disabled list-group-item-action">列表组三</a>
		</div>
		<br />
		<ul class="list-group list-group-horizontal-sm">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item list-group-item-danger">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<ul class="list-group">
			<li class="list-group-item d-flex justify-content-between align-items-center">列表组一
			<span class="badge badge-danger">标记</span></li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>

分页

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

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

<a> 또는 <버튼> /code> <ul> <li>추가 <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을 추가합니다. 항목 레이아웃이 다음에서 변경되었습니다. 세로에서 가로로

컨텍스트 클래스를 사용하여 상태 배경 및 색상으로 목록 항목 스타일 지정

목록 그룹 항목에 배지를 추가하여 일부 유틸리티, 활동 등의 도움으로 읽지 않은 개수를 표시합니다.

코드 연습: 🎜

		<ul class="pagination pagination-sm justify-content-center">
			<li class="page-item"><a href="#" class="page-link">首页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
		</ul>

페이지 매기기🎜🎜 .pagination 추가, 단어 태그 .page-item 추가, .page-link추가 >
을 링크 태그에 .pagination-lg 또는 .pagination-sm을 추가하여 크기 페이징 효과를 설정할 수 있습니다. 🎜를 추가하여 중앙, 왼쪽 및 오른쪽 설정을 지정할 수 있습니다. 코드 연습: 🎜

		<div class="progress">
			<div class="progress-bar w-50 ">
			</div>
		</div>
		<br />
		<div class="progress" style="height: 30px;">
			<div class="progress-bar bg-danger" style="width: 35%;">
				30%
			</div>
		</div>
		<br>
		<div class="progress">
			<div class="progress-bar bg-success w-25"></div>
			<div class="progress-bar bg-danger w-25"></div>
			<div class="progress-bar bg-info w-25"></div>
		</div>
		<br />
		<div class="progress">
			<div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
			</div>
		</div>

🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!