5. 부트스트랩 버튼과 드롭-다운 메뉴

부트스트랩 버튼 디자인

버튼의 색상은 아래 페이지를 참고하세요.

https://webty.tistory.com/35?category=881122

<button type="button" class="btn">Basic</button>
<a href="#" class="btn">Link Button</a>
<input type="button" class="btn" value="Input Button">
<input type="submit" class="btn" value="Input Button">

+ a 요소에 class="btn"을 적용하는 경우 웹표준을 지켜 role="button" 규칙을 설정해주는 것이 좋다.(screen reader)

<a href="#" class="btn" role="button">Link Button</a>

 

버튼 테두리 디자인

원하는 테두리 색상 클래스명 사이에 outline을 추가해서 작성한다.

<button type="button" class="btn btn-outline-primary">Primary</button>

 

버튼 크기

btn-lg, sm 으로 큰 버튼과 작은 버튼을 표현할 수 있다.

<button type="button" class="btn btn-lg">Large</button>

 

버튼을 블록요소로

인라인 요소 특징을 가지고 있는 버튼을 블록으로 만들어 디자인하고 싶다면 .btn-block을 입력한다.

<button type="button" class="btn btn-block">block button</button>

 

버튼 그룹 수평

연관된 버튼요소를 하나의 그룹으로 설정할 수 있다.

<div class="btn-group">
  <button type="button" class="btn">Apple</button>
  <button type="button" class="btn">Samsung</button>
</div>

 

버튼 그룹 수직

<div class="btn-group-vertical">
  <button type="button" class="btn">Apple</button>
  <button type="button" class="btn">Samsung</button>
</div>

 

---

드롭-다운 버튼

button요소는 a로 변경 가능합니다. 상황에 따라서 올바른 요소를 적절히 사용하도록 합니다.

<div class="btn-group">
        <button type="button" class="btn" data-toggle="dropdown">Apple</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Tablet</a>
          <a class="dropdown-item" href="#">Smartphone</a>
        </div>
</div>

부트스트랩의 드롭-다운 버튼은 기본적으로 클릭 이벤트로 출력됩니다.

마우스 올렸을 시 출력되는 메뉴를 만들고 싶다면 아래와 같이 클래스를 추가합니다.

※ 태그의 관계와 이름에 따라 css 선택자의 차이가 있으니 코드 관계를 잘 확인하고 이해한 후 작성합니다.

.btn-group:hover .dropdown-menu {display:block;}

 

드롭-다운 헤더

다운메뉴의 제목을 추가하고 싶을 때 사용합니다.

<div class="dropdown-menu">
      <h2 class="dropdown-header">Dropdown header</h2>
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <h2 class="dropdown-header">Dropdown header</h2>
      <a class="dropdown-item" href="#">Link 3</a>
</div>

 

드롭-다운 메뉴 위치

기본 메뉴의 위치는 하단이나 dropdown 의 down 클래스를 left right up 값으로 위치를 다르게 설정할 수도 있습니다.

<div class="dropright">
    <button type="button" class="btn" data-toggle="dropdown">button</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>

<div class="dropleft">
    <button type="button" class="btn" data-toggle="dropdown">button</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>

<div class="dropup">
    <button type="button" class="btn" data-toggle="dropdown">button</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>

 

여러개의 메뉴 중 일부만 드롭-다운일 경우

드롭-다운 메뉴만 별도의 div를 묶어서 btn-group으로 표시해줍니다.

<div class="btn-group">
    <button type="button" class="btn">Apple</button>
    <button type="button" class="btn">Samsung</button>
    <div class="dropup">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sony</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>

 

드롭-다운 수직메뉴

드롭다운 메뉴를 가장 바깥쪽에서 묶는 btn-group 클래스명 뒤에 -veritcal을 추가합니다.

<div class="btn-group-vertical">