Bootstrap의 라벨, 배지, 대형 화면 및 헤더에 대한 자세한 설명

Bootstrap에는 라벨, 배지, 대형 화면, 헤더 등 프롬프트 정보를 제공하는 데 사용되는 일부 구성 요소가 있습니다. 이 글에서는 Bootstrap의 프롬프트 정보를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 추천: "부트스트랩 튜토리얼"

Label

　 네비게이션에 새로운 네비게이션 항목을 추가하는 등의 추가 정보를 사용자에게 알리기 위해 레이블을 추가할 수도 있습니다. 사용자에게 알리는 "새" 레이블

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

사용 방법은 매우 간단합니다. like 스팬

<h3>Example heading <span>New</span>
</h3>

【자동 숨기기】

　 콘텐츠가 없으면 자동으로 숨겨집니다.

.label:empty {
    display: none;
}

<h3>Example heading <span></span>
</h3>

【색상 설정】

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

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

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

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

　xml label-info: 정보 라벨, 연한 파란색

　🙌 label-warning: 경고 라벨, 주황색

　tax label-danger: 오류 라벨, 빨간색

　주로 배경색과 텍스트 색상을 수정하는 데 이 클래스 이름을 사용합니다

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

배지

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

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

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

<a>Inbox <span>42</span></a>

【自动隐藏】

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

.badge:empty {
    display: none;
}

<a>Inbox <span></span></a>

【按钮徽章】

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

  
• Home 42
  
• Profile
  
• Messages 3

  Messages 4

巨幕

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

<div>
  <h1 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a>Learn more</a></p>
</div>

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

<div>
    <div>
        <h1 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>
        <p>好的代码像粥一样，都是用时间熬出来的</p>
        <p><a>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>
  <h1>Example page header <small>Subtext for header</small>
</h1>
</div>

rrreee【버튼 배지】

🎜　배지는 버튼 요소 버튼과 캡슐 탐색 탐색 알약의 스타일이 비슷하지만 색상이 다릅니다🎜rrreee🎜🎜🎜🎜자이언트 스크린🎜 🎜🎜　이것은 가볍고 유연한 구성 요소로 전체 브라우저 뷰포트로 확장하여 웹사이트의 주요 콘텐츠를 표시할 수 있습니다🎜rrreee🎜🎜🎜대형 화면 구성 요소에 둥근 모서리를 추가하려면 이 구성 요소를 .container 요소🎜rrreee🎜<img src="https://img.php.cn/upload/image/901/924/896/1617101686621130.png" title="1617101686621130.png" alt="Bootstrap의 라벨, 배지, 대형 화면 및 헤더에 대한 자세한 설명">🎜🎜🎜Header🎜🎜🎜　　page 헤더 구성요소는 <code>h1 태그에 적절한 공간을 추가하고 페이지의 다른 부분과 일정한 분리를 형성할 수 있습니다. h1 태그에 포함된 작은 요소의 기본 효과를 지원하며 대부분의 다른 구성 요소도 지원합니다(몇 가지 추가 스타일을 추가해야 함) 🎜rrreeerrreee🎜🎜🎜🎜추가 프로그래밍 관련 지식이 있으면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Bootstrap의 라벨, 배지, 대형 화면 및 헤더에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!