반원 블로그

BootStrap 1.부트스트랩 개요 본문

2018~/프론트 엔드 기초(HTML, CSS, JavaScript)

BootStrap 1.부트스트랩 개요

반원_SemiCircle 2019. 8. 12. 18:53

BootStrap이란?

BootStrap 기본 적용

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

적용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>수강 페이지</h1>
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link" href="#">홈</a></li>
        <li class="nav-item"><a class="nav-link" href="#">내정보</a></li>
        <li class="nav-item"><a class="nav-link active" href="#">수강정보</a></li>
        <li class="nav-item"><a class="nav-link" href="#">고객센터</a></li>
    </ul>

    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>강의명</th>
                    <th>수강학기</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>HTML</td>
                    <td>2019-1</td>
                </tr>
                <tr>
                    <td>CSS</td>
                    <td>2019-1</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>2019-1</td>
                </tr>    
            </tbody>
        </table>
    </div>
</body>
</html>
저작자표시 비영리 변경금지

'2018~ > 프론트 엔드 기초(HTML, CSS, JavaScript)' 카테고리의 다른 글

JavaScript 3.연산자(산술, 비교, 삼항, 논리)  (0) 2019.08.12
JavaScript 2.변수, 변수 스코프(영역)  (0) 2019.08.12
JavaScript 1.개요 및 기본구조  (0) 2019.08.12
Firebase 1.개요, 프로젝트 생성  (0) 2019.08.12
CSS 3. CSS파일 불러오기  (0) 2019.08.12
CSS 2.Box Model, margin, padding, border  (0) 2019.08.12
CSS 1.CSS란? CSS 적용 방법(요소, 선택자)  (0) 2019.08.12
HTML 6. form 태그  (0) 2019.08.12
'2018~/프론트 엔드 기초(HTML, CSS, JavaScript)' Related Articles more
Comments