[Bootstrap] button

btn

글자색을 강조하는것처럼 버튼도 강조할수 있다 이 둘을 비교해보자면
글자색을 강조->text-(text-primary,text-success,text-info,,,)이라면
버튼의 색을 강조->btn-(btn-primary,btn-success,btn-info,,,) 이다.

btn 을 적용하면 다음과 같은 효과를 적용한다.
.btn {
			  display: inline-block;
			  padding: 6px 12px;  직사각형의 버튼모양
			  margin-bottom: 0;
			  font-size: 14px;    글자크기
			  font-weight: normal;
			  line-height: 1.42857143;
			  text-align: center;   글자정가운데
			  white-space: nowrap;
			  vertical-align: middle;
			  -ms-touch-action: manipulation;
			      touch-action: manipulation;
			  cursor: pointer;	
			  -webkit-user-select: none;
			     -moz-user-select: none;
			      -ms-user-select: none;
			          user-select: none;
			  background-image: none;
			  border: 1px solid transparent;
			  border-radius: 4px; ->둥근모서리
			}

---

버튼색

class="btn btn-default"   기본 모양 버튼  (기본)
class="btn btn-primary"   즁요한 버튼     (파랑)
class="btn btn-success"   긍정의미 버튼   (연두)
class="btn btn-info"      정보제공 버튼   (하늘)
class="btn btn-warning"   주의알람 버튼   (노랑)
class="btn btn-danger"    위험표시 버튼   (빨강)
class="btn btn-link"      단순 링크 버튼  (링크)

---

button 만드는 3가지 방법

부트스트랩으로 버튼을 만드는 방법은 3가지가 있다.

1) input태그 사용 => 흔히 아는 input 타입 버튼

<input type="button" class="btn btn-default" value="기본 모양 버튼">
<input type="button" class="btn btn-primary" value="즁요한 버튼">
<input type="button" class="btn btn-success" value="긍정의미 버튼">
<input type="button" class="btn btn-info" value="정보제공 버튼">
<input type="button" class="btn btn-warning" value="주의알람 버튼">
<input type="button" class="btn btn-danger" value="위험표시 버튼">
<input type="button" class="btn btn-link" value="단순 링크 버튼">

---

2) a태그 사용(role="button") =>a 링크태그로 만듬

	<a href="#" class="btn btn-default" role="button">기본버튼</a>
	<a href="#" class="btn btn-primary" role="button">중요버튼</a>
	<a href="#" class="btn btn-success" role="button">긍정버튼</a>

---

3) 버튼태그

   	<button type="button">클래스 선택자가 적용X</button>
    <button type="button" class="btn">class="btn"만 적용</button>
    <button type="button" class="btn btn-warning">class="btn-warning"만 적용</button>

---

버튼의 크기 조절

버튼의 크기를 조절하기 위해 그리드처럼 lg,sm,xs 를 사용한다

.btn클래스 선택자 (btn-lg(pc), btn-sm(Tablet), btn-xs(Mobile)

참고)
버튼의 비활성화(disabled)=>누를수없는 버튼

<button class="btn btn-primary btn-lg" disabled="disabled">큰버튼</button>
<button class="btn btn-primary btn-lg">큰버튼 btn-lg</button>
<p>
<button class="btn btn-primary">중요버튼</button>
<button class="btn btn-default">기본버튼</button>
<p>
<button class="btn btn-primary btn-sm">작은 버튼 btn-sm</button>
<button class="btn btn-default btn-sm">작은 버튼 btn-sm</button>
<p>
		
<button class="btn btn-primary btn-xs">더작은 버튼 btn-xs</button>
<button class="btn btn-default btn-xs">더작은 버튼 btn-xs</button>	<p>	<!-- 대화상자에 나오는 버튼(.btn-block)선택자(넓이가 100% 사용) -->	<button class="btn btn-primary btn-block">대화상자</button>

2022-08-09