엄지월드

bootstrap css 적용 방법(CDN) - 최신 본문

Front/Bootstrap

bootstrap css 적용 방법(CDN) - 최신

킨글 2022. 4. 19. 22:23

<head>와 </head> 태그 사이에 아래 CDN 태그를 삽입해주면 bootstrap css 사용이 가능하다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 

전체 코드 예시

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
   
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- CSS  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <title>게시글 목록</title>
</head>
<body>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

 

최신 버전의 bootstrap cdn 을 사용하고 싶으면 아래 링크에 들어가서 [Copy] 아이콘을 클릭하여 붙여넣기 후에 사용하면 된다.

- https://getbootstrap.com/

 

 

<광고 한번 클릭해주시면 저에게 큰 힘이 됩니다 😃>

'Front > Bootstrap' 카테고리의 다른 글

부트스트랩 사이트 모음  (0) 2017.05.27
'Front/Bootstrap' Related Articles more
Comments