부트스트랩에서 매일 배워야 할 라벨과 배지_javascript 기술
- WBOY원래의
- 2016-05-16 15:29:261280검색
1. 태그
일부 웹페이지에서는 사용자에게 추가 정보를 알리기 위해 태그가 추가되는 경우가 많습니다. 예를 들어 새 탐색 항목이 탐색에 추가되면 사용자에게 알리기 위해 '새' 태그가 추가될 수 있습니다. 새로 추가된 내비게이션 항목입니다. 아래와 같이:
그런 다음 이 효과는 Bootstrap 프레임워크의 레이블 구성 요소로 특별히 추출되고 ".label" 스타일로 강조 표시됩니다.
독립적인 구성요소이기 때문에 물론 버전마다 다른 파일이 있습니다.
✓ LESS 버전: 해당 소스 파일 label.less
✓ Sass 버전: 해당 소스 file_label.scss
✓ 컴파일 버전: boottrap.css 파일 4261~4327행
1), 사용원리 :
사용 방법은 매우 간단합니다. span과 같은 인라인 태그를 사용할 수 있습니다.
운영효과:
2), 구현 원칙:
/boottrap.css 파일의 4261번째 줄~4272번째 줄/
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
a 태그 요소를 사용하여 만들 경우 더 아름답게 만들기 위해 호버 상태에서 밑줄 등을 제거합니다.
/boottrap.css 파일의 4273행~4278행/
.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
가끔 태그에 내용이 없으면 CSS3의 :empty 의사 요소를 사용하여 숨길 수 있습니다.
.label:empty {
display: none;
}
3) 색상 스타일 설정 :
버튼 요소 버튼과 유사하게 라벨 스타일도 다양한 색상을 제공합니다.
✓ 라벨 기본 설정: 기본 라벨, 진한 회색
✓ label-primary：기본 라벨, 진한 파란색
✓ label-success: 성공 레이블, 녹색
✓ label-info: 정보 라벨, 하늘색
✓ 라벨 경고: 경고 라벨, 주황색
✓ 라벨 위험: 잘못된 라벨, 빨간색
주로 다음 클래스 이름을 사용하여 배경색과 텍스트 색상을 수정합니다.
<span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">错误标签</span>
운영효과:
4. 구현 원칙:
/boottrap.css 파일의 4286번째 줄~4237번째 줄/
.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
2. 뱃지
어떤 의미에서는 뱃지 효과는 앞서 소개한 라벨 효과와 매우 유사합니다. 또한 몇 가지 프롬프트 메시지를 만드는 데에도 사용됩니다. 자주 나타나는 것은 일부 시스템에서 보낸 메시지입니다. 예를 들어, 트위터에 로그인한 후 메시지를 읽지 않은 경우 아래 그림과 같이 시스템에서 읽지 않은 메시지 수를 알려줍니다.
부트스트랩 프레임워크에서는 이 효과를 배지 효과라고 하며 "배지" 스타일을 사용하여 구현됩니다.
해당 파일 버전:
덜 버전: 소스 파일 Badges.less
✓ Sass 버전: 소스 파일_badges.scss
✓ 컴파일 버전: boottrap.css 파일 4328~4366행
사용방법:
사실 사용 방법에 대해선 별로 할 말이 없습니다. 스팬 태그를 사용하여 태그처럼 만든 다음 여기에 배지 클래스를 추가할 수 있습니다.
<a href="#">Inbox <span class="badge">42</span></a>
运行效果:
1）、实现原理：
主要将其设置为椭圆形，并且加了一个背景色：
/bootstrap.css文件第4328行～第4341行/
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}
同样也使用`:empty`伪元素，当没有内容的时候隐藏：
.badge:empty {
display: none;
}
正如开头所说，可以将徽章与按钮或者导航之类配合使用：
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例<span class="badge">23</span></a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
运行效果
2）、按钮和胶囊形导航设置徽章：
另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：
<ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> <br />
运行效果:
样式代码请查看bootstrap.css文件第4345行～第4366行。
注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。