부트스트랩 (6) 점보트론과 버튼 스타일

  <div class="container-fluid">
        <h1>Bootstrap</h1>
        <h3><code>.jumbotron</code></h3>
        <div class="jumbotron">
            <h1 class="display-4">점보트론</h1>
            <p class="lead">점보트론(Jumbotron)는 소니에서 1985년 공개한 대형 스크린
                TV의 상표명으로 각종 스포츠 경기장 및 콘서트장에서 사용되었다.</p>
            <!-- lead : 일반 글자보다 크게 -->
            <hr class="my-3">
            <p>2001년 공식적으로 단종 되었으나 점보트론의 단어 자체는 일반명사화 되어
                대형 전광판을 통칭하기도 한다.</p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">자세히 알아보기</a>
            </p>
        </div>
    </div>

 

 

<div class="container">
        <!-- container는 어디든 쓸 수 있음. 공백 등의 값을 갖고 싸줌 -->
        <h2 class="m-4">버튼 스타일</h2>
        <h3><code>.btn .btn-primary</code></h3>
        <div class="row d-flex flex-wrap">
            <!-- 클래스명 앞글자가 대문자이면 안됩니다. -->
            <button type="button" class="btn">Basic</button>
            <button type="button" class="btn btn-primary m-1">Primary</button>
            <button type="button" class="btn btn-secondary m-1">Secondary</button>
            <button type="button" class="btn btn-success m-1">Success</button>
            <button type="button" class="btn btn-info m-1">Info</button>
            <button type="button" class="btn btn-warning m-1">warning</button>
            <button type="button" class="btn btn-danger m-1">danger</button>
            <button type="button" class="btn btn-dark m-1">dark</button>
            <button type="button" class="btn btn-light m-1">light</button>
            <button type="button" class="btn btn-link m-1">Link</button>
        </div>
        <div class="row mb-3">
            <button type="button" class="btn btn-outline m-1">basic</button>
            <button type="button" class="btn btn-outline-primary m-1">primary</button>
            <button type="button" class="btn btn-outline-secondary m-1">secondary</button>
            <button type="button" class="btn btn-outline-success m-1">Success</button>
            <button type="button" class="btn btn-outline-info m-1">info</button>
            <button type="button" class="btn btn-outline-warning m-1">warning</button>
            <button type="button" class="btn btn-outline-danger m-1">danger</button>
            <button type="button" class="btn btn-outline-dark m-1">dark</button>
            <button type="button" class="btn btn-outline-light m-1">light</button>
            <button type="button" class="btn btn-outline-link m-1">link</button>
        </div>
        <div class="">
            <h2 class="m-4">배지 스타일</h2>
            <h3><code>.badge .badge-primary</code></h3>
            <div>
                <span class="badge badge-primary">primary</span>
                <span class="badge badge-secondary">secondary</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-info">info</span>
                <span class="badge badge-warning">warning</span>
                <span class="badge badge-danger">danger</span>
                <span class="badge badge-dark">dark</span>
                <span class="badge badge-light">light</span>
                <span class="badge badge-link">link</span>

            </div>
        </div>

 

 

 

  <div class="container">
        <h2 class="m-4">프로그래스 스타일</h2>
        <h3><code>.progress .progress-bar</code></h3>
        <div>
            <!-- Blue -->
            <div class="progress" style="height: 2em">
                <div class="progress-bar" style="width:10%"></div>
            </div><br>
            <!-- Green -->
            <div class="progress">
                <div class="progress-bar bg-success" style="width:20%"></div>
            </div><br>
            <!-- Turquoise -->
            <div class="progress">
                <div class="progress-bar bg-info" style="width:30%"></div>
            </div><br>
            <!-- Orange -->
            <div class="progress">
                <div class="progress-bar bg-warning" style="width:40%"></div>
            </div><br>
            <!-- Red -->
            <div class="progress">
                <div class="progress-bar bg-danger" style="width:50%"></div>
            </div><br>
            <!-- White -->
            <div class="progress border">
                <div class="progress-bar bg-white" style="width:60%"></div>
            </div><br>
            <!-- Grey -->
            <div class="progress">
                <div class="progress-bar bg-secondary" style="width:70%"></div>
            </div><br>
            <!-- Light Grey -->
            <div class="progress border">
                <div class="progress-bar bg-light" style="width:80%"></div>
            </div><br>
            <!-- Dark Grey -->
            <div class="progress">
                <div class="progress-bar bg-dark" style="width:90%"></div>
            </div><br>
            <!-- Striped -->
            <div class="progress">
                <div class="progress-bar bg-info progress-bar-striped" style="width:30%"></div>
            </div><br>
            <!-- Animated -->
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
            </div><br>
            <!-- Multi -->
            <div class="progress">
                <div class="progress-bar bg-success" style="width:40%">
                    Free Space
                </div>
                <div class="progress-bar bg-warning" style="width:10%">
                    Warning
                </div>
                <div class="progress-bar bg-danger" style="width:20%">
                    Danger
                </div>
            </div>
        </div>