[CSS] Bootstrap사용하여 간단하게 html, css만들기!

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

우측을 클릭해서 버전을 다르게 다운 받을수 있습니다.

버전마다 브라우저 호환이 다르기 때문에 잘 확인 해야합니다

원하는 버전을 클릭하면 Starter template라는 제목의 글이 있습니다.

<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
 -->  </body> </html>

다음과 같은 html 코드가 있는데, 이게 bootstrap을 사용할 기본 설정입니다.

만약 네비게이션 바를 만들고 싶은 경우 상단 검색 기능을 사용해서 'Navs'를 검색합니다.

다음과 같이 사용했을때 화면에 보이는 방식과 코드가 있습니다.

코드를 적절한 곳에 붙여 넣고 사용하면 끝입니다

저작자표시 (새창열림)

'프론트엔드 > CSS' 카테고리의 다른 글

[css]Spinner 사이트 (0)	2022.12.05
[css] flex공부 블로그 (0)	2022.12.05
CSS 기본부터 활용까지 - 박스모델 (0)	2022.07.29
CSS 기본부터 활용까지 - 인라인 VS 블럭레벨 (0)	2022.07.29
CSS 기본부터 활용까지 - 웹폰트 (구글 웹폰트 사용) (0)	2022.07.29

'프론트엔드 > CSS' 카테고리의 다른 글

티스토리툴바