Development

[HTML, CSS] 부트스트랩 기본 템플릿으로 웹페이지 만들기

개발자 강정 2021. 12. 29. 13:34

부트스트랩 기본 템플릿

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>제목</title>
</head>

<body>
    <h1>시작</h1>
</body>

</html>

https://getbootstrap.com/docs/4.0/components/alerts/

 

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

기본 템플릿을 베이스로 부트스트랩 홈페이지에서 원하는 component를 가져다 쓰면 된다.

'Development' 카테고리의 다른 글

[Ajax] Ajax 기본 코드  (0) 2021.12.29
[JavaScript] JQuery 사용하기  (0) 2021.12.29
[JavaScript] list에 값 추가하기  (0) 2021.12.29
[HTML] <style>태그 부분을 파일로 불러오기  (0) 2021.12.28
[CSS, HTML] 폰트 적용하기  (0) 2021.12.28