[Bootstrap] #2 버튼 만들기

1. 부트스트랩으로 버튼 만들기

 

 부트 스트랩은 CSS파일과 JS파일을 묶어둔 프레임워크 형태이다.

 그래서 저장된 스타일을 갖고 있는 CSS의 클래스를 호출하면 그에 맞는 형태의 여러 디자인을 생성해낼 수 있다.

 

 가장 먼저 버튼을 만들어보자!!

 

1) 여러 스타일의 버튼들

 부트스트랩에선 아래와 같은 형태의 버튼들을 간단하게 만들 수 있다.

 

 

 코드는 아래에서 살펴보자.

<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

 

2) 태그를 갖고 있는 버튼들

 태그를 갖고 있는 버튼들도 생성을 할 수 있다.

 

Link Button

 

 위의 버튼을 누르는 것으로 일정 기능을 수행하게 하는 것이다.

<h2>Button Tags</h2>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

 

3) 버튼 사이즈 조절하기

또한 버튼의 사이즈도 조절할 수 있다.

 

<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>    
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

4) 한 블럭의 버튼 만들기

 전체 블럭 형태의 버튼도 만들 수 있다.

 또한 블럭의 크기까지도 이미 저장되어있는 형태를 불러올 수 있다.

 

Block Level Buttons

Large Block Level Buttons

Small Block Level Buttons

<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-block">Button 2</button>

<h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

<h2>Small Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>

 

 

5) 버튼의 상태

 항상 눌려있는 상태(Active)와 누르면 버튼을 모두 해제시키는(Disabled) 버튼도 만들 수 있다.

 

<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button> // 기본 형태
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

6) 버튼 그룹짓기

 버튼들을 그룹지을 수 있다.

 

 

<h2>Button Group</h2>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div>

 

7) 세로 형태로 그룹짓기

 

<h2>Vertical Button Group</h2>
<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div>

 

8) 스플릿 형태로 버튼 만들기

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>

 

• Tablet
• Smartphone