부트스트랩 | 부트스트랩 label 스타일 추가하기

키워드 : bootstrap label

무료아이콘 전체게시물 작성일18-01-09 06:52 조회1,656회

본문


부트스트랩 label 스타일 추가하기 

 

요즘은 부트스트랩을 만져보고 있는 중이라 

무료아이콘 말자닷컴에 메모겸 남겨놓습니다.

 

저는 기존 라벨 컬러와는 별도로 추가해서 만든 것도 있네요

클래스도 추가했구요

 

 

부트스트랩 기본 라벨 스타일

 

8c1ca77dc1f7f796b308f3fa8c3a3787_1515447
 

기존 스타일에서 변경

 

둥근 테두리를 각지게 변경, 글자 진하기 빼기

영문에 비해선 안 이쁜 ...

작은 사이즈의 한글은 돋음이나 굴림이 이쁜데 ~ 훔..

 

8c1ca77dc1f7f796b308f3fa8c3a3787_1515448 

 

css


.label{ display: inline; padding: .2em .4em .3em; font-size:90%; font-weight:normal; /*font-weight: 700;*/ line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius:0;}

 

.label-cate_movie {background-color:#d9534f}

.label-cate_tv {background-color:#d99a4f}

.label-cate_util {background-color:#a04fd9}

.label-cate_music {background-color:#554fd9}

.label-cate_book {background-color:#d94fc7}

.label-cate_etc {background-color:#4f90d9}

 

 

 

html 


<span class="label label-cate_movie">영화</span> 

<span class="label label-cate_tv">Tv</span> 

<span class="label label-cate_util">유틸</span> 

<span class="label label-cate_music">음악</span> 

<span class="label label-cate_book">도서/어린이</span> 

<span class="label label-cate_etc">기타</span> 

 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 18 비추천 0

Css + Html

103개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 새글 무료아이콘 전체게시물 07-17 5 추천: 0
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1092 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1169 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 763 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 1734 추천: 15
98 부트스트랩 부트스트랩 특정 해상도에서만 보이게 하거나 숨기기 무료아이콘 전체게시물 01-10 1640 추천: 17
97 부트스트랩 그리드간에 길이가 틀려 그리드끼리 겹칠 때 무료아이콘 전체게시물 01-09 1047 추천: 12
열람 부트스트랩 부트스트랩 label 스타일 추가하기 무료아이콘 전체게시물 01-09 1657 추천: 18
95 부트스트랩 부트스트랩 nav-tabs 스타일바꾸기 무료아이콘 전체게시물 01-08 1492 추천: 18
94 부트스트랩 부트스트랩 토글메뉴바외 다양한 기능 bootsnipp 관련링크 무료아이콘 전체게시물 01-03 703 추천: 10
93 jQuery/java 화면,페이지 접속시 페이드인 효과주기 무료아이콘 전체게시물 11-09 2535 추천: 14
92 etc 익스플로러 8에서 positon:fixed; 사용시 무료아이콘 전체게시물 10-27 2434 추천: 12
91 etc 마크업 성능 검사 w3c 관련링크 무료아이콘 전체게시물 08-01 828 추천: 12
90 etc px,em,%,pt 단위 변화 계산 관련링크 무료아이콘 전체게시물 08-01 1313 추천: 11
89 etc CSS2 규격 한글 번역문 관련링크 무료아이콘 전체게시물 07-31 1185 추천: 12
게시물 검색