Bootstrap 프롬프트 정보에 대한 자세한 소개

　일부 웹 페이지에서는 사용자에게 몇 가지 추가 정보를 알리기 위해 라벨이 추가되는 경우가 많습니다. 예를 들어 새 탐색 항목이 탐색에 추가되면 사용자에게 알리기 위해 "새" 라벨이 추가될 수 있습니다.

　【관련 동영상 권장 사항: Bootstrap Tutorial】

Bootstrap 프레임워크에서 이 효과는 특별히 레이블 구성 요소로 추출되며 ".label" 스타일로 강조 표시됩니다.

사용 방법은 매우 간단합니다. 인라인 라벨

<h3>Example heading <span class="label label-default">New</span></h3>

【자동 숨기기】

　 내용이 없으면 자동으로 숨겨집니다

.label:empty {display: none;
}

<h3>Example heading <span class="label label-default"></span></h3>

【색상 설정】

버튼 요소 버튼과 유사합니다. 라벨 스타일도 제공됩니다. 다양한 색상:

　xml label-default: 기본 라벨, 진회색

　xml label-primary: 메인 라벨, 진한 파란색

　xml label-success: 성공 라벨, 녹색

　xml label- info: 정보 라벨, 하늘색

　tax label-warning: 경고 라벨, orange

　tax label-danger: 오류 라벨, red

　주로 이 클래스 이름을 통해 배경색과 텍스트 색상을 수정합니다

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

Badge

　어떤 의미에서는 뱃지 효과는 앞서 소개한 라벨 효과와 매우 유사합니다. 또한 몇 가지 프롬프트 메시지를 만드는 데에도 사용됩니다. 자주 나타나는 것은 시스템이 읽지 않은 메시지의 개수를 묻는 메시지와 같은 일부 시스템에서 보낸 정보입니다

Bootstrap 프레임워크에서는 이 효과를 배지 효과라고 하며 "배지" 스타일을 사용하여 구현됩니다

스팬을 사용할 수 있습니다 라벨 태그처럼 만들고 배지 클래스를 추가하세요badge类

<a href="#">Inbox <span class="badge">42</span></a>

【自动隐藏】

　　如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现)  

.badge:empty {display: none;
}

<a href="#">Inbox <span class="badge"></span></a>

【按钮徽章】

　　徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式，只不过颜色不同

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span></button>

巨幕

　　这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>

　　如果为巨幕组件添加圆角，把此组件放在 .container 元素的里面即可

<div class="container"><div class="jumbotron"><h1>小火柴的蓝色理想</h1><p>好的代码像粥一样，都是用时间熬出来的</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div></div>

 

页头

　　页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small

.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}

【자동 숨기기】

🎜　새롭거나 읽지 않은 정보 항목이 없으면, 즉, 어떤 콘텐츠도 포함하지 않으며, 배지 구성 요소는 (CSS의 :empty 선택기를 통해) 자동으로 숨겨질 수 있습니다. 🎜🎜

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1></div>

🎜🎜rrreee🎜🎜🎜🎜🎜【버튼 배지】🎜🎜 배지는 버튼 요소 버튼과 캡슐 모양에 있습니다. 내비게이션 탐색 알약도 비슷한 스타일이지만 색상이 다릅니다🎜🎜rrreee🎜🎜큰 화면🎜🎜이것은 전체 브라우저 뷰포트로 확장할 수 있는 가볍고 유연한 구성 요소입니다. 웹사이트에 주요 콘텐츠 표시🎜🎜 rrreee🎜🎜🎜🎜🎜 대형 화면 구성 요소에 둥근 모서리를 추가하려면 이 구성 요소를 .container 요소 안에 넣으세요🎜🎜rrreee🎜🎜🎜🎜 🎜🎜🎜Header🎜🎜 헤더 구성 요소는 h1 태그에 적절한 공간을 추가하고 페이지의 다른 부분과 일정한 분리를 형성할 수 있습니다. h1 태그에 포함된 작은 요소의 기본 효과를 지원하며 대부분의 다른 구성 요소도 지원합니다(몇 가지 추가 스타일을 추가해야 함)🎜🎜rrreee🎜🎜rrreee🎜🎜🎜

위 내용은 Bootstrap 프롬프트 정보에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!