<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>버튼</h1>
    <h2>.btn</h2>
    <p>
        btn 클래스는 버튼 스타일을 지원한다.
        a, input, button 태그에 사용할 수 있다.
    </p>
    <div>
        <a href="" class="btn btn-primary">링크</a>
        <button class="btn btn-primary">버튼</button>
        <input type="submit" class="btn btn-primary" value="등록" />
    </div>
    <h2>버튼 종류</h2>
    <div>
        <button class="btn btn-default">default</button>
        <button class="btn btn-primary">primary</button>
        <button class="btn btn-success">success</button>
        <button class="btn btn-info">info</button>
        <button class="btn btn-warning">warning</button>
        <button class="btn btn-danger">danger</button>    
        <button class="btn btn-link">link</button>    
    </div>
    
    <h2>버튼 크기</h2>
    <div>
        <button class="btn btn-primary btn-lg">버튼</button>
        <button class="btn btn-primary">버튼</button>
        <button class="btn btn-primary btn-sm">버튼</button>
        <button class="btn btn-primary btn-xs">버튼</button>
    </div>
    
    <h2>버튼 비활성화</h2>
    <div>
        <button class="btn btn-primary" disabled>버튼</button>
    </div>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo3-form  (0) 2019.06.09
demo2-table  (0) 2019.06.09

+ Recent posts