[Bootstrap] 부트스트랩 cdn을 이용해 사용하기 | 반응형 웹사이트

sm·2022년 11월 16일
0

Web

목록 보기
8/24

Bootstrap?

웹 사이트를 쉽게 만들어주는 공개 HTML, CSS, JS 프레임워크

  • 프레임워크: 어떤 프로그램을 만들기 위한 기본틀
  • 이미 틀이 있어서, 더 효율적!
  • 그러나 내가 직접 커스터마이징 하는 것은 쉽지 않다.
  • 직접 설치할 수도 있지만, cdn을 이용해서 사용할 수 있어서 편리하다.
    - cdn: content delivery network
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

+)
• Bootstrap Icon: https://icons.getbootstrap.com/
• FontAwesome: https://fontawesome.com/
• Google Icon Fonts: https://fonts.google.com/icons
• Bootstrap Theme: https://themes.getbootstrap.com/



반응형

: 웹사이트 화면의 크기에 따라 사이트를 반응하도록 만드는 것!
부트스트랩은 12열 그리드로 이미 배치해놓았기 때문에 반응형 사이트를 매우 간단하게 만들 수 있다.

Grid

<div class="row">
        <div class="col-8 col-md-4 col-lg-10 bg-warning">div1</div>
        <div class="col-4 col-md-8 col-lg-2 bg-success">div2</div>
</div>

https://getbootstrap.com/docs/5.2/layout/grid/

profile
📝 It's been waiting for you

0개의 댓글