카테고리 없음

bootstrap_button

신방동불주먹 2022. 11. 8. 13:37
반응형

<일반 버튼>

<button type="button" class="btn btn-defaut">버튼1</button>
<button type="button" class="btn btn-defaut">버튼2</button>
<button type="button" class="btn btn-defaut">버튼3</button>
<button type="button" class="btn btn-defaut">버튼4</button>

 

 

<버튼 그룹>

  • div 태그로 묶어 한번에 효과를 줄 수 있음
   <h5>버튼 그룹1</h5>
      <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-defaut">버튼1</button>
        <button type="button" class="btn btn-defaut">버튼2</button>
        <button type="button" class="btn btn-defaut">버튼3</button>
        <button type="button" class="btn btn-defaut">버튼4</button>
      </div>

      <br><br>
      <h5>버튼 그룹2</h5>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-defaut">버튼1</button>
        <button type="button" class="btn btn-defaut">버튼2</button>
        <button type="button" class="btn btn-defaut">버튼3</button>
        <button type="button" class="btn btn-defaut">버튼4</button>
      </div>

 

(크기 속성)

 

 

<버튼 중첩>

  • 드롭다운 방향 버튼 표시 : <span class="caret">
      <div class="btn-group">
        <button type="button" class="btn dtn-defualt">버튼1</button>
        <button type="button" class="btn dtn-defualt">버튼2</button>
        <div class="btn-group">
          <button type="button" data-toggle="dropdown" class="btn dtn-default dropdown-toggle">클릭<span class="caret"></span></button>
          <button type="button" data-toggle="dropdown" class="btn dtn-default">클릭<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">메뉴1</a></li>
            <li><a tabindex="-1" href="#">메뉴2</a></li>
          </ul>
        </div>
      </div>

 <hr>
      <!-- 버튼수직정렬 : div class="btn-group-vertical-->
      <div class="btn-group-vertical">
        <button type="button" class="btn dtn-defualt">버튼1</button>
        <button type="button" class="btn dtn-defualt">버튼2</button>
        <div class="btn-group">
          <button type="button" data-toggle="dropdown" class="btn dtn-default dropdown-toggle">클릭<span class="caret"></span></button>
          <button type="button" data-toggle="dropdown" class="btn dtn-default">클릭<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">메뉴1</a></li>
            <li><a tabindex="-1" href="#">메뉴2</a></li>
          </ul>
        </div>
      </div>


      <!-- 드롭업 드롭다운 비교 -->
      <br><br>
      <div class="btn-group dropup">
        <button type="button" data-toggle="dropdown" class="btn dtn-default dropdown-toggle">클릭<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">메뉴1</a></li>
          <li><a tabindex="-1" href="#">메뉴2</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn dtn-default dropdown-toggle">클릭<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">메뉴1</a></li>
          <li><a tabindex="-1" href="#">메뉴2</a></li>
        </ul>
      </div>


      <!-- 입력그룹
      하나의 줄처럼 보임-->
      <br><br>
      <div class="input-group">
          <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
          <input type="text" class="form-control" placeholder="아이디">
      </div>

      <br><br>
      <div class="input-group">
        <span class="input-group-addon">금액</span>
        <input type="text" class="form-control" placeholder="금액">
        <span class="input-group-addon">원</span>


      </div>

반응형