[부트스트랩] select(<select>)에 스타일 적용하기 - Bootstrap-select

기본 부트스트랩에는 <select>태그에 대한 스타일 시트나 자바스크립트가 없습니다.

 

 

 

그런데 다행히도 누군가 만들어 둔것이 있군요 ㅎㅎ

 

 

1. Bootstrap-select

'Bootstrap-select'라는 프로젝트입니다.

부트스트랩을 사용할때 <select>태그의 디자인과 기능을 확장해줍니다.

(참고 : silviomoreto - bootstrap-select )

 

 

1-1. 설치

설치는 간단합니다.

다운로드 받은 파일중 'bootstrap-select.min.js'와 'bootstrap-select.min.css'를 원하는 위치에 넣고 웹페이지에서 임포트 해줍니다.

(위치는 제이쿼리 위에 부트스트랩 아래 위치하는게 좋을듯 하네요.)

 

<link href="~/Content/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css"  />
<script src="/Content/bootstrap-select/bootstrap-select.min.js" ></script>

 

 

 

 

 

 

 

 

1-2. 추가 코드

그냥 이상태로 넣고 사용하면 아무런 동작을 하지 않습니다-_-;;;

결국 셈플을 열어서 확인해보니......

자바스크립트에 추가 코드를 넣어주셔야 합니다.

 

다음코드는 제이쿼리(jquery)와 부트스트랩-셀랙트(bootstrap-select) 스크립트가 선언된 이후에 나와야 합니다.

 

$(window).on('load', function ()
{
	$('.selectpicker').selectpicker(
	{
		'selectedText': 'cat'
 	});
});

 

 

 

 

2. 테스트

이제 웹페이지에 <select>를 추가 하고 클래스를 'selectpicker'로 지정합니다.

 

<select id="Select1" class="selectpicker" style="height:30px">
	<option value="@itemTemp.LanguageName">
		@itemTemp.LanguageDisplay
	</option>
</select>

 

 

이제 코드를 돌려 봅시다.

 

 

 

오홍~

부트스트랩의 기본 스타일과 비슷하게 구성되었습니다.

 

 

 

마무리

부트스트랩의 기본구성에서 셀랙트(select)태그가 지원되지 않는 이유를 찾아 보긴 했는데...

별다르게 검색된게 없습니다 ㅎㅎㅎ

그냥 select가 다른 태그들에 비해 구성하기가 쉽지 않다는 식으로 써있는 글을 본정도 였죠,.

 

그러던중 발견한 것이라 더욱 기분이 좋습니다.

참고로....'Bootstrap-select'는 많은 기능을 지원하고 있으니 부트스트랩퍼-셀랙트가 배포되고 있는 'github' 페이지를 확인해보시기 바랍니다.