[Bootstrap] Bootstrap

μ†Œμ΄λŽΒ·2023λ…„ 10μ›” 31일
CSSbootstrap
1

Bootstrap

λͺ©λ‘ 보기
1/1
post-thumbnail

πŸ“ Bootstrap

  • μ›Ή μ‚¬μ΄νŠΈ 및 μ›Ή μ•± μ œμž‘μ„ μœ„ν•œ 무료 μ˜€ν”ˆ μ†ŒμŠ€ ν”„λŸ°νŠΈμ—”λ“œ 개발 ν”„λ ˆμž„μ›Œν¬μ΄λ‹€.
  • μ›Ή νŽ˜μ΄μ§€λ₯Ό μ‰½κ²Œ λ§Œλ“€ 수 μžˆλ„λ‘ μž‘μ„±ν•΄ 놓은 μ½”λ“œ λͺ¨μŒμœΌλ‘œ 미리 μž‘μ„±λœ HTML, CSS, JavaScript μ½”λ“œλ₯Ό κ°€μ Έλ‹€ μ‚¬μš©ν•  수 μžˆλ‹€.
  • Bootstrap 4λŠ” jQuery에 λŒ€ν•΄ μ’…μ†λ˜μ–΄ 있고, Bootstrap 5λŠ” jQuery에 λŒ€ν•œ 쒅속성이 μ—†λ‹€.

πŸ“ 적용 방법

  • Bootstrap의 CSS, JS νŒŒμΌμ„ 본인의 HTML 파일과 μ—°κ²°ν•œλ‹€.
  • 본인의 CSS νŒŒμΌμ„ μ—°κ²°ν•  경우, Bootstrap μ½”λ“œ μ•„λž˜μ— μž‘μ„±ν•œλ‹€.
<head>
  <!-- bootstrap CDN link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <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>
  
  <!-- My CSS file link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" type="text/css" href="CSS 파일 경둜">
</head>

πŸ“ Layout

1) Containers

  • λ ˆμ΄μ•„μ›ƒμ„ μœ„ν•œ ꡬ성 μš”μ†Œμ΄λ‹€.
  • .container은 각 breakpointμ—μ„œ Bootstrap이 μ„€μ •ν•œ μ΅œλŒ€ λ„ˆλΉ„λ₯Ό λ”°λ₯Έλ‹€.
  • .container-fluidλŠ” 항상 width: 100%이닀.
  • κ°€μš΄λ° 정렬이 μ μš©λœλ‹€.

2) Grid

πŸ“ Utilities

1) λ ˆμ΄μ•„μ›ƒ κ΄€λ ¨

2) κ·Έ μ™Έ

  • ul: nav
  • li: nav-item
  • a: nav-link
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>
profile
μ†Œμ΄λŽ

0개의 λŒ“κΈ€