본문 바로가기
공부 기록/HTML & CSS

부트스트랩 연습(1)

yurison 2023. 1. 18. 17:36

.html(v4.5)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Basics</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="app.css" />
  </head>

  <body>
    <div class="container">
      <h1 class="display-1 text-center">Bootstrap Playground</h1>
      <h2 class="display-4">Buttons</h2>
    </div>
    <div class="button">
      <div class="button_block">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
      </div>
      <div class="button_line">
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">
          Secondary
        </button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
      </div>

      <div class="button_lg_sm">
        <button type="button" class="btn btn-primary btn-lg">
          Large button
        </button>
        <button type="button" class="btn btn-secondary btn-lg">
          Large button
        </button>
        <button type="button" class="btn btn-primary btn-sm">
          Small button
        </button>
        <button type="button" class="btn btn-secondary btn-sm">
          Small button
        </button>
      </div>

      <button type="button" class="btn btn-primary btn-lg btn-block">
        Block level button
      </button>
      <button type="button" class="btn btn-secondary btn-lg btn-block">
        Block level button
      </button>
      <div class="btn-group" role="group">
        <button class="btn btn-warning">Left</button>
        <button class="btn btn-warning">Middle</button>
        <button class="btn btn-warning">Right</button>
      </div>
    </div>

    <div class="container">
      <h2 class="display-4">
        Typography<span class="badge badge-primary badge-pill">Badge</span>
      </h2>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        You should check in on some of those fields below.
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <p class="lead">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi tempora inventore ea aliquid, magnam perferendis id adipisci omnis libero porro. Esse aspernatur amet dolorum quidem? Nemo beatae dignissimos esse dicta?
      </p>

      <blockquote class="blockquote text-center bg-light">
        <p class="mb-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </p>
        <footer class="blockquote-footer">Son yuri</footer>
      </blockquote>
      <button type="button" class="btn btn-primary updated">
        Updated <span class="badge badge-light">3</span>
        <span class="sr-only">Updated messages</span>
      </button>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

.css

.btn-block {
  margin: 0.5rem 0;
}

.button {
  margin: 1rem 10%;
}

.display-4 {
  font-size: 1.5rem;
  font-weight: 600;
  border-top: 1px solid #abc;
  border-bottom: 1px solid #abc;
  padding: 1rem 1rem 1rem 0;
}

.display-1 {
  font-size: 3.5rem;
  font-weight: 100;
  letter-spacing: 3px;
  line-height: 90%;
  margin: 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #abc;
}

.blockquote {
  padding: 0 5rem;
}
.button_line {
  margin-top: 1rem;
}

.button_lg_sm {
  margin-top: 1rem;
}

.btn-sm {
  margin: 0 0.15rem;
}

.badge-primary {
  font-size: 0.8rem;
  margin: 0 0.5em;
  background-color: blueviolet;
}

.updated {
  background-color: blueviolet;
  border-color: blueviolet;
}

.btn-group {
  width: 100%;
}

 

 

공식 사이트

https://getbootstrap.com

 

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

 

https://getbootstrap.kr

 

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

Quick Start(v5.2.3)

1. <meta name="viewport"> 삽입

2. 부트스트랩의 CSS, JS 포함

<!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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

 

'공부 기록 > HTML & CSS' 카테고리의 다른 글

부트스트랩 연습(2) - Grid, Form, navbar  (0) 2023.01.18
간단한 실습(2) - Price Table (반응형 디자인과 reset CSS)  (0) 2023.01.18
간단한 실습(1) - Photo site  (0) 2023.01.18
Button :hover  (0) 2023.01.18
Form  (0) 2023.01.18

'공부 기록/HTML & CSS' Related Articles

티스토리툴바