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

키워드 : bootstrap label

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

본문


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

112개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 24 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 47 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 26 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 19 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 57 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 54 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 101 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 57 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 43 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 116 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1298 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1455 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 918 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 2502 추천: 15
98 부트스트랩 부트스트랩 특정 해상도에서만 보이게 하거나 숨기기 무료아이콘 전체게시물 01-10 1740 추천: 17
게시물 검색