🌊Bootstrap

타인이 짜 놓은 코드를 그대로 쓰거나 활용할 수 있는 css framework

☔Bootstrap

사용시에 css 코드와 js 코드를 정해진 위치에 삽입해야함


container -여백을 주고 컨텐츠를 담기 위한 빠른 방법

<div class="container">text</div>

container - md , fluid , xs ,etc.

수많은 부트스트랩 요소들이 있지만 여기서는 일부만 다룰 것

🌈Bootstrap button

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

btn-primary,secondary,success 는 색상 값이다

class="btn btn-outline-warning , btn-sm,lg  이라는 값도 등등 여러 옵션들이 존재한다

모두 외울수 없으니 필요할때 찾아서 쓴다

🌈Typography

-Display
 class = "display - 1,2,3,4"
 큰 헤더를 만드는데 사용

-Lead

-Blockquotes 

-Color Utility

🌈Badge

span 요소, badge class, badge 색으로 구성

Badges can be used as part of links or buttons to provide a counter

ex)Button

<button type="button" class="btn btn-primary">
  Notifications 
   <span class="badge text-bg-secondary">4</span>
</button>

💧Button group, Alert

bootstrap의 여러 예시들을 참고하면 좋을듯
https://getbootstrap.com/docs/5.3/components/button-group/
https://getbootstrap.com/docs/5.3/components/alerts/

bg , text 등 utility를 활용할 것 !

💧Grid system

그리드는 테이블과 유사하게 화면을 분할하여 원하는 레이아웃을 잡기위해 정의된것
그리드는 여섯 개의 반응형 중단점별로 컨테이너 및 연 크기 및 동작을 제어함
https://getbootstrap.com/docs/5.3/layout/grid/#grid-options

container class,row class를 필요로 함
+부트스트랩의 모든 행에는 분배될 공간이 12유닛씩 존재
행에 열을 만들어야함

<div class="container">
  <div class="row">
       <div class="col bg-primary">I AM AUTO SIZED</div>
       <div class="col bg-secondary">I AM AUTO SIZED</div>
       <div class="col-8 bg-primary">I AM NOT AUTO SIZED</div>
  </div>
</div>
+) 크기를 지정 또는 분배할 수 있고 분배하지 않으면 자동으로 나누어 가짐

🌊Responsive Bootstrap Grid

img-fluid class를 활용해 web의 크기(중단점)에 따라 화면에서 img가 차지하는 크기를 조절할 수 있음

<div class="row">

     <div class="col-xl-4 col-md-6">
         <img class="img-fluid" src="https://images.unsplash.com/photo-1589595363745-d842812a9db7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"alt="">
     </div>

     <div class="col-xl-4 col-md-6">
         <img class="img-fluid"src="https://images.unsplash.com/photo-1511692277506-3be3a7ab1686?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"alt="">
     </div>
     
     <div class="col-xl-4 col-md-6"> 
     	 <img class="img-fluid" src="https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"alt="">
     </div>
</div>
+) md크기일 때는 합이 18유닛이기 때문에 행이 하나 늘어남
+) grid utility (justify-contetnt-x 등등 중단점 지정 포함) 사용 할 수 있음

🌊Bootstrap Forms

    <div class="container">
        <h1 class="display-2">Forms</h1>
        <form action="#nowhere">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email">
                </div>
                <div class="form-group col-md-6">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="password">
                </div>
            </div>
            <div class="form-group">
                <label for="address">Street Address</label>
                <input type="text" class="form-control" id="address" placeholder="923 Chicken Ranch St">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="city">City</label>
                    <input type="text" class="form-control" id="city">
                </div>
                <div class="form-group col-md-3 col-6">
                    <label for="state">State</label>
                    <select class="form-control" name="state" id="state">
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                    </select>
                </div>
                <div class="form-group col-md-3 col-6">
                    <label for="zip">Zip Code</label>
                    <input type="text" class="form-control" id="zip">
                </div>
            </div>
            <div class="form-group">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="tos">
                    <label class="custom-control-label" for="tos">Sign Me Up</label>
                </div>
            </div>

            <button type="submit" class="btn btn-success">Register</button>



        </form>
    </div>
   

row and form-row difference?
form-row를 사용하면 기본 간격을 줄일 수 있음

container display form row을 이용해서 다루기 쉽게 하고 
col과 각 중단점을 이용해서 각각의 사용자에게 더 가독성있는 웹을 만드는 것

🌊Bootstrap Navbar

   <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="expandme">
            <div class="navbar-nav">
                <a href="Home" class="nav-item nav-link">Home</a>
                <a href="Home" class="nav-item nav-link">About</a>
                <a href="Home" class="nav-item nav-link">Contact</a>
            </div>
            <form class="form-inline ml-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

- fixed-top을 사용하지 않으면 스크롤을 내릴경우에 navbar가 보이지 않음

- collapse navbar-collapse collapse 요소를 사용하면 겹치거나 드러내거나 숨길 수 있음

- navbar-expand-sm 이용하면 부트스트랩이 언제 collapse을 멈출 지 정할 수 있음

- button class= navbar-toggler 그리고 span class= navbar-toggler-icon을 이용해서
  햄버거 모양 버튼을 만들 수 있음 
  
  버튼을 눌렀을 때 무언가 나오는 효과는 data-toggle="collapse 요소와 data-target 
  그리고 collapse navbar-collapse의 id(하위 요소들이 포함되어 있음)를 일치시켜서 
  연결 시켜야 하며 그리고 js를 이용해야 함

- form-line에서 ml-auto는 폼의 왼쪽 여백을 자동으로 설정해줌 여기서는
  검색창이 오른쪽에 붙게끔 함

💧Bootstrap Icon

여러 아이콘들 소개

<svg> 와 관련된 정보

Font Awesome 사이트 정보

🌊Bootstrap Utility

css 요소를 빠르게 적용할 수 있음

Margin
Padding
Display

가볍게 다룸

🌊추가로 소개해주는 요소

Card
Carousel - 컨텐츠 순환 슬라이드 쇼
Dropdown
Spinner
Modal - 대화창을 띄우는 요소

동적인 부분을 필요로 해서 ![](https://velog.velcdn.com/images/ho0010/post/4bd78461-8db8-40c1-b72c-f62f226ae14a/image.jpg)
대부분 js요소를 필요로 함