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

키워드 : bootstrap label

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

본문

부트스트랩 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

102개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
102 부트스트랩 동영상 슬라이드 관련링크 무료아이콘 전체게시물 01-20 718 추천: 14
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 751 추천: 14
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 481 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 836 추천: 14
98 부트스트랩 부트스트랩 특정 해상도에서만 보이게 하거나 숨기기 무료아이콘 전체게시물 01-10 1127 추천: 17
97 부트스트랩 그리드간에 길이가 틀려 그리드끼리 겹칠 때 무료아이콘 전체게시물 01-09 752 추천: 12
열람 부트스트랩 부트스트랩 label 스타일 추가하기 무료아이콘 전체게시물 01-09 1272 추천: 18
95 부트스트랩 부트스트랩 nav-tabs 스타일바꾸기 무료아이콘 전체게시물 01-08 1094 추천: 18
94 부트스트랩 부트스트랩 토글메뉴바외 다양한 기능 bootsnipp 관련링크 무료아이콘 전체게시물 01-03 549 추천: 10
93 jQuery/java 화면,페이지 접속시 페이드인 효과주기 무료아이콘 전체게시물 11-09 2318 추천: 13
92 etc 익스플로러 8에서 positon:fixed; 사용시 무료아이콘 전체게시물 10-27 2175 추천: 12
91 etc 마크업 성능 검사 w3c 관련링크 무료아이콘 전체게시물 08-01 701 추천: 12
90 etc px,em,%,pt 단위 변화 계산 관련링크 무료아이콘 전체게시물 08-01 1047 추천: 11
89 etc CSS2 규격 한글 번역문 관련링크 무료아이콘 전체게시물 07-31 986 추천: 12
88 Css3 넓이에 border값 포함 시키기 box-sizing 댓글1 관련링크 무료아이콘 전체게시물 07-25 1836 추천: 19
게시물 검색