[CSS] 부트스트랩 사용하기

[CSS] 부트스트랩 사용하기
/category/%F0%9F%92%BB%EA%B0%9C%EB%B0%9C/WEB

2021. 3. 31. 16:33

HTML 파일을 다음과 같이 시작한다.

<!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>

부트스트랩을 사용하기 위해 CSS 링크와 javascript 링크를 넣어준 것이다.

CSS 파일을 따로 만들어주고 HTML에 연결하듯이 인터넷 상에 있는 부트스트랩 CSS 파일을 연결해주는 것이다.

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

위의 부트스트랩 사이트에서 원하는 디자인을 고르고 해당 코드를 복사해 원하는 위치에 붙여넣어준다.

부트스트랩 디자인에서 나만의 디자인을 추가하고 싶을 때 style을 따로 작성하여 class 이름을 하나 더 추가하면 된다.

<button type="button" class="btn btn-primary">Primary</button>

예를 들어 위와 같은 부트스트랩에서 가져온 버튼을 생성할 때,

나만의 디자인을 작성해 놓은 mybtn을 추가하고 싶다면

<button type="button" class="btn btn-primary mybtn">Primary</button>

class 이름에 mybtn을 추가해주면 된다.

728x90

'💻개발 > WEB' 카테고리의 다른 글

[CSS] 브라우저 기본 css 초기화하기 (0)	2022.03.10
웹에서 사용하는 이미지 : jpg, png, gif, webp, svg (0)	2022.03.10
[JavaScript] 서버와 통신하기 : API, JSON, Ajax (0)	2021.04.02
[JavaScript] jQuery (0)	2021.04.02
[CSS] 구글 웹폰트 사용하기 (0)	2021.03.31

개발개발

CATEGORIES