11/15 43-1 [BS] Buttons_2

1. Button Sizes 사이즈 조절   :   btn btn-primary btn-크기

 	<h2>Button Sizes</h2>
        <div>
            <button class="btn btn-primary btn-lg">Large</button>
            <button class="btn btn-primary">Default</button>
            <button class="btn btn-primary btn-sm">Small</button> 
        </div>

 

2.Block Level Buttons   :   btn btn-block

 버튼은 원래 인라인 엘리먼트 !! 이걸 블락엘리먼트로 바꾸기 !!

<h2>Block Level Buttons</h2>
    <div>
       <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    </div>

 

3. Active/Disabled Buttons  :    btn activ/disabled 

    버튼 활성화/비활성화 하기

 <h2>Active/Disabled Buttons</h2> <!--버튼 활성화/비활성화-->
     <button type="button" class="btn btn-primary active">Active Primary</button> <!--색이 바뀜-->
     <button type="button" class="btn btn-primary" disabled >Disabled Primary</button> <!--클릭이 비활성화-->
     <a href="#" class="btn btn-primary disabled ">Disabled Link</a> <!--a태그는 disabled가 없으니 속성으로 넣어준다.-->

 

 

4.Spinner Buttons  :    span태그 안에 적용! spinner-border/grow 

    로딩할 때 나오는 액션들... 인데 이거도 구현이 여기서 안됨ㅠㅠㅠㅠㅠ

   <h2>Spinner Buttons</h2>
     <button class="btn btn-primary">
         <span class="spinner-border spinner-border-lg">돌</span>
     </button>          
     <button class="btn btn-primary">
         <span class="spinner-border spinner-border-lg">돌돌</span>
           Loading..
      </button>          
      <button class="btn btn-primary" disabled>
         <span class="spinner-border spinner-border-sm">와</span>
           Loading..
       </button>          
       <button class="btn btn-primary" disabled>
         <span class="spinner-grow spinner-grow-lg"></span>
           Loading..
        </button>

클릭해보세요!

Buttons.html

0.00MB