본문 바로가기
ETC/Bootstrap

올 뉴 30분 요약강좌(Bootstrap) 정리 #2

by java나유 2022. 12. 4. 

  

    
    
    
    
  
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- CSS only -->

    <link

      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"

      rel="stylesheet"

    />

  </head>

  <body>

    <!--table-striped table-hover: 테이블색/테이블 마우스올리면 색바뀜-->

    <table class="table table-striped table-hover">

      <thead>

        <tr>

          <th scope="col">#</th>

          <th scope="col">First</th>

          <th scope="col">Last</th>

          <th scope="col">Handle</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <th scope="row">1</th>

          <td>Mark</td>

          <td>Otto</td>

          <td>@mdo</td>

        </tr>

        <tr>

          <th scope="row">2</th>

          <td>Jacob</td>

          <td>Thornton</td>

          <td>@fat</td>

        </tr>

        <tr>

          <th scope="row">3</th>

          <td colspan="2">Larry the Bird</td>

          <td>@twitter</td>

        </tr>

      </tbody>

    </table>

    <!-- JavaScript Bundle with Popper -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  </body>

</html>
Document
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

 

 


  

    
    
    
    
  
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- CSS only -->

    <link

      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"

      rel="stylesheet"

    />

  </head>

  <body>

    <p class="text-primary">.text-primary</p>

    <p class="text-secondary">.text-secondary</p>

    <p class="text-success">.text-success</p>

    <p class="text-danger">.text-danger</p>

    <p class="text-warning bg-dark">.text-warning</p>

    <p class="text-info bg-dark">.text-info</p>

    <p class="text-light bg-dark">.text-light</p>

    <p class="text-dark">.text-dark</p>

    <p class="text-body">.text-body</p>

    <p class="text-muted">.text-muted</p>

    <p class="text-white bg-dark">.text-white</p>

    <p class="text-black-50">.text-black-50</p>

    <p class="text-white-50 bg-dark">.text-white-50</p>



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

    <button type="button" class="btn btn-light">Light</button>

    <button type="button" class="btn btn-dark">Dark</button>



    <button type="button" class="btn btn-link">Link</button>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  </body>

</html>
Document

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50


  

    
    
    
    
  
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- CSS only -->

    <link

      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"

      rel="stylesheet"

    />

  </head>

  <body>

    <div class="container">

      <div class="row my-3">

        <div class="col-md-3 mb-3">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>



        <div class="col-md-3">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>



        <div class="col-md-3">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>



        <div class="col-md-3">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>



        <div class="col-md-4">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>



        <div class="col-md-4">

          <div class="card" style="width: 100%">

            <img src="jeju.jpg" class="card-img-top" alt="..." />

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up

                the bulk of the card's content.

              </p>

              <a href="#" class="btn btn-primary">Go somewhere</a>

            </div>

          </div>

        </div>

      </div>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

 

 

 

 

 

부트스트랩 마진/패딩

잘 요약해주신 블로그

https://coding-restaurant.tistory.com/42

728x90
저작자표시 비영리 변경금지 (새창열림)

'ETC > Bootstrap' 카테고리의 다른 글

올 뉴 30분 요약강좌(Bootstrap) 정리  (0) 2022.12.04

관련글

댓글

티스토리툴바