Bootstrap

이정수·2024년 9월 21일

기타 기술 정리

목록 보기

1/5

BootStrap :
부트스트랩 홈페이지
。반응형(responsive) Web Project 개발을 위한 CSS를 사전에 정의한 JavaScript 기반 Framework
。Front-End 개발을 용이하게 하기 위해 트위터에서 사용하는 각종 템플릿 양식, 레이아웃, 버튼, 입력창 등의 웹페이지 구성요소의 디자인을 미리 정의.
=> 프론트엔드 개발자가 아니더라도 쉽고 빠르게 웹페이지를 디자인이 가능.
。JS, CSS가 사전에 bootstrap에서 class 형식으로 되어 있어 HTML에서 해당 class를 선언하여 사용.
사용법
기존 방법 : Bootstrap 웹페이지에서 수동으로 Bootstrap CSS 파일을 다운로드 후 사용

jsp : Spring Boot에서 webjars dependency를 활용하여 사용.
BootstrapCDN :
。<head>태그 내에 <link>를 통해 css파일을 불러온다.
。<body>태그 하단에 <script>를 통해 js파일을 HTML에 불러와서 사용.
。단점 : bootstrap에서 해당 css, js파일을 업데이트 시 일일이 갱신해야한다.
=> bootstrap 사이트에서 다운로드후 서버파일에 각각의 js, css 폴더에 저장을 권장.
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
。<link>는 Bootstrap의 css파일로 연결.
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
。<script>는 Bootstrap의 js파일로 연결.
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <title>Bootstrap</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

bootstrap 색상 종류
。 primary : 파랑
。 secondary : 회색
。 success : 초록
。 danger : 빨강
。 warning : 노랑
。 info : 하늘
。 light : 흰색
。 dark : 검정
▶ 하늘색 버튼의 경우 btn-info

Bootstrap 활용
。해당 class들의 경우, bootstrap에서 사전에 정의된 JS , CSS class
<div class="container"> :
컨테이너
。기존 <div class="">는 좌측정렬이지만, class="container"선언 시 중앙으로 정렬됨.

。bootstrap의 가장 기본적인 레이아웃 요소로서 반응형 그리드 시스템을 제공하는 predefined된 class.
▶ 브라우저 크기에 반응하여 요소들의 배치가 자동으로 변경.
。그리드시스템(Grid System) : Page의 contents를 격자구조의 요소로 표현.
。Viewport 내에서 Contents를 포함 및 채우고 정렬하는 역할을 수행.

class에 사용되는 container 종류

container
。레이아웃을 생성하는 가장 상위 요소의 wrapper 요소로서 기본적인 반응형 고정된 반응사이즈로 조정하는 container.
。 페이지 내용을 가운데 정렬 및 반응형으로 화면크기에 따라 고정된 반응사이즈의 너비로 조정.
▶ 각 화면 크기마다 최대 width가 다르다.

container-fixed
。Media query에 의해 가로 해상도에 따라 반응형으로 동작하는 container.

container-fluid
。가로 해상도에 상관없이 항상 viewport의 100%의 width를 가지는 container.
▶ 화면 크기에 관계없이 좌우 끝까지 꽉 차는 형식.

container-반응사이즈
。지정된 viewport 사이즈까지만 viewport의 가로를 100% 채우는 container로서 작용하며, 지정사이즈보다 클 경우 고정된 width로서 나머지 비는 부분은 여백으로 표현
。반응사이즈 : sm , md, lg, xl, xxl

<table class="table">
。class="table"선언 시 다음 디자인을 제공.
  <head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <title>Bootstrap</title>
</head>
<body>
  <div class="container">
    this is container
    <table class="table">
      <h1>테이블입니다.</h1>
      <caption>캡션입니다.</caption>
      <thead>
        <tr>
          <th scope="col">첫번째</th>
          <th scope="col">두번째</th>
          <th scope="col">세번째</th>
          <th scope="col">네번째</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">첫째</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <th scope="row">둘째</th>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <th scope="row">셋째</th>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">마지막</th>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
ex. 생성 예시
navbar의 경우

。해당 코드를 참조하여 활용할 수 있음.

Bootstrap의 Navigation bar 관련
。Navbar : 웹사이트의 메뉴, 탐색링크를 표시하는데 사용.
。navbar 관련 bootstrap 사이트
<nav class="navbar navbar-expand-md navbar-dark bg-light mb-3 p-1">
    <a class="navbar-brand m-1" href="https://velog.io/@wjdtn747/posts">wjdtn747</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="/login">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="/list-todo">Todos</a></li>
        </ul>
    </div>
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
    </ul>
</nav>
navbar관련 CSS class
class="nav"
。<ul> , <ol> , <div> 등의 다양한 요소를 사용하여 일반적인 Navigation menu를 구축 시 선언.
▶ class="navitem"이 선언된 요소를 감싸는 부모태그요소로서 기본적으로 구성하는 nav 요소들에 대해 가로정렬.
▶ class="navbar"와 달리 반응형메뉴를 제공하지 않으며, padding, 배경색상 지정이 불가능.

。tab , menu , button group 등 다양한 navigation 요소를 styling시 활용.
。 flex-column class를 추가 정의할 경우 세로정렬
▶ class="nav flex-column"
<div className="container">
        <nav className="navbar navbar-expand-md bg-dark navbar-dark">
          <ul className="navbar-nav ">
            <li className="nav-item">
              <a className="nav-link" href="https://velog.io/@wjdtn747/">wjdtn747</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="/login">Login</a>
            </li>
          </ul>
        </nav>
      </div>
▶ <nav>의 navbar-expand-반응사이즈 에 의해 가로, 세로 정렬 지정.
class="navbar" : ex. <nav class="navbar"></nav>
。보통 HTML의 <nav>태그에 선언되며 Page 상단의 Navigation Bar를 Styling하는 목적으로 사용하는 Class
。 class="nav"와 달리 반응형메뉴를 제공하여 화면크기에 따라 Menu가 collapse되는 기능을 제공하며 배경색( bg-light , bg-dark 등 ), padding, 로고 , 글자색 ( navbar-dark ) 등을 위한 style이 기본제공.
。class="navbar-nav"등이 선언된 요소를 감싸는 최상단부모요소.

class="navbar-nav" : ex. <ul class="navbar-nav"></ul>
。Bootstrap의 class="navbar" 내부에서 정의되며 Menu를 styling 시 사용.
▶ <ul> 혹은 <div>요소에 적용하여 Navigation bar의 목록을 그룹화.

。기본적으로 nav 요소들에 대해 세로정렬이며, 상위 태그요소 <nav class="navbar">에 navbar-expand-반응사이즈 Class를 추가할 경우 일정크기 이상일 경우 가로정렬
▶ 보통 class="navitem" 이 선언된 태그요소를 감싸는 부모요소

class="nav-item" : ex. <li class="nav-item"></li>
。주로 <li> 요소에 선언하여 navigation bar의 개별 Menu item을 정의.
▶ 보통 <ul class="navbar-nav"></ul> 내부에 포함.

class="nav-link" : ex. <a href="URL" class="nav-link">문구</a>
。navigation bar에서 Menu item의 link를 <a>요소를 사용하여 styling.
▶ 보통 <li class="nav-item"></li> 내부에 포함.

。비활성화 시 disabled Class를 추가 정의.

class="navbar-dark" : <nav class="navbar-dark">
。navbar 내부 글자색을 흰색으로 설정.
▶ 정의 안할경우 검정색으로 설정됨.

class="navbar-collapse" :
。Bootstrap의 class="navbar" 내부에서 정의되며 Menu를 열고 닫는 기능을 제공.
▶ class="collapse navbar-collapse"로 collapse와 함께 사용하여 화면크기에 따라 Menu가 자동으로 숨겨지거나 표시되도록 도와주는 역할을 수행.

。보통 lg ( 992px )를 기준으로 collapse가 수행됨.

navbar-brand :
。회사명, 로고 등을 배치하는 역할
。문자 또는 이미지 삽입 가능.

class="navbar-toggler" :
。Bootstrap의 class="navbar" 내부에서 정의되며 Mobile 화면에서 navigation bar의 Menu를 열고 닫을 수 있는 토글버튼
▶ <button>에 적용.

。일반 HTML에서는 CDN을 통해서 Bootstrap의 JS파일을 정의해야 사용할 수 있으며, React에서는 react-bootstrap의 dependency를 추가하여 설치된 JS파일을 사용 가능.

navbar의 토글버튼을 사용하기위해 정의할 속성

type="button" :
。버튼으로 인식되도록 지정.

data-bs-toggle="collapse" :
。선언 시 해당 토글버튼이 collapse 기능을 작동시키는 toggle로서 작용.

data-bs-target="#토글대상요소의ID"
。toggle을 수행할 토글대상을 지정.
▶ class="navbar-nav"가 선언된 요소의 ID를 기입하여 해당 요소안에 있는 Item에 대하여 토글버튼을 통해 collapse를 수행.

navbar-toggler-icon :
。토글버튼에 아이콘을 지정.
navbar-expand-반응사이즈 :
。navigation bar가 특정 크기를 기준으로 줄어들거나 커지는지의 기준을 정의. ( 반응사이즈 sm, md , lg )
▶ 해당 Class 선언 시 lg 기준으로 화면이 992px 이상일 경우 네비게이션바가 수평정렬하고, 그보다 작은 화면에서는 네비게이션바가 수직정렬.
class="bg-색상" : navbar 배경 색상 설정
。 ( 색상 : bg-light(흰색), bg-dark(검정), bg-secondary(회색) )
색상을 임의로 지정
。bg-color , navbar-color를 임의 색상으로 지정한 후 <nav>태그 내에 style 속성으로 CSS코드를 지정하여 다음처럼 style="background-color:해쉬태그 !important;"를 정의하여 색상을 지정.
。!important : 다른 css class의 속성을 overwrite할때 선언하여 사용.
。ex)
<nav class="navbar navbar-light" style="background-color: #e3f2fd !important;">
。 설정을 영구적으로 적용해야할 경우, CSS 파일의 class의 css코드 자체를 수정.
▶ 보통 동일 Class명의 CSS를 작성하여 Overwrite하는 방식으로 사용.
class="collapse" :
。Bootstrap의 Class로서 화면이 특정크기 미만일때 특정 요소들을 숨기거나 드러내게 하는 기능을 수행.
▶ navbar-collapse class와 함께 사용 시 반응형 Web이 일정 크기 이하로 줄어들 경우 다수의 navigation 메뉴들을 하나의 아이콘 내부로 숨기게함.

。collapse가 적용되는 경우 <div>에서 class="collapse navbar-collapse"로 적용하며 이를 통해 navbbar가 collapse 되는 부분으로 navbar-expand 기준으로 화면이 최소화 될 경우 인식하여 숨겨준다.

class="fixed-bottom"
。navbar를 하단으로 고정시키는 역할을 수행.

텍스트 Class 관련

class="fs-숫자" : font size
。글자크기를 단계별로 설정.
▶ 숫자=[1,6] 단계별 설정.

class="fw-크기설정" :
。글자를 굵게 표시.
。크기설정 : light , normal , bold

class="text-색상"
。글자의 색상 지정 ex. text-black

간격 Class 관련

class="p-숫자"
。태그요소의 padding을 설정
。pe-숫자 , ps-숫자 , pb-숫자 , pt-숫자
。숫자=[0,5]까지 단계별 설정.

class="m-숫자"
。태그요소의 margin( 여백 )의 정도를 설정.
。숫자=[0,5]까지 단계별 설정.

class="mb-숫자" : margin bottom , class="mt-숫자" : margin top
。태그요소 하단, 상단의 margin의 정도를 설정
▶ 숫자=[0,5] 단계별 설정.

class="ms-숫자" : margin start , class="me-숫자" : margin end
。각각 태그요소의 margin-left와 margin-right를 설정
。숫자=[0,5]까지 단계별 설정.

간격 단계
0 : 없음 , 1 : 0.25rem , 2 : 0.5rem , 3 : 1rem , 4 : 1.5rem , 5 : 3rem

Border(테두리) Class 관련

class="border-bottom" :
。선언된 요소의 하단에 테두리( border ) 추가.
▶ 하단에만 테두리가 적용됨.

class="border-light" :
。선언된 요소의 테두리 색상을 light로 설정.
▶ border과 함께 선언. ex. class="border-bottom border-light border-5"

class="border-숫자" :
。선언된 요소의 테두리 두께를 설정.
。숫자=[0,5]까지 단계별 설정.

<div role="alert"> : 경고창
。alert 관련 bootsrap 사이트
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
。<div class="container"> 내부에 배치한 경우. width가 자동으로 맞춰짐.

alert-primary :
。경고창의 색상을 설정 ( primary : 하늘색 , warning : 연노랑색 )

Bootstrap : Grid System
그리드 시스템 설명
。모바일 우선의 요소의 배치를 처리하며 content 정렬과 layout 배치를 위해 row, column, container 등을 관리.
。flexbox를 기반으로 구축되었으므로, 반응형의 특성을 지닌다.
。그리드에서 class="row"를 설정 후 column은 class="col-"으로 최대 12개까지 설정이 가능하며, 그리드 관리 시 6개의 반응형 중단점을 이용.
Grid System 활용하기
。class=""에 row , col , offset 속성을 이용!
1개 row에서 4개의 column을 같은 width를 가지는 grid system으로 설정 시 $\frac{최대\ 그리드\ column\ 갯수}{설정할\ column의\ 갯수}$ 로 지정.
=> 12 / 4 = 3이므로. <div class='col-3'>으로 설정.
。두 칸을 사용하고 싶은 경우, <class='col-6'>로 설정.
 <div class="container">
    <div class="row">
      <div class="col-3">
        <div class="row">
          <div class="col-6">1열의 1열</div>
          <div class="col-6">1열의 2열</div>
        </div>
      </div>
      <div class="col-3">2/4열</div>
      <div class="col-6">4/4열</div>
    </div>
  </div>
。1,2열의 경우 container의 width 에서 분할될 12개 column을 4로 나눈 공간 3만큼 할당!
。1열의 경우 태그 내부에 <div class="row">를 하나 더 생성하여 해당 column width 기준으로 12 column으로 분할이 가능하며 1열에 2개의 열로 분할 할 경우 12 / 2 = 6으로 class="col-6"으로 설정.
=> 해당 작업은 계속 반복이 가능.
。3열의 <img>의 경우, 3*2=6 만큼 공간을 할당 후 style="width:100%"로 설정하여 지정 공간 밖으로 나오지 못하도록 설정.

offset-숫자 속성 이용 시 , 정의한 숫자 만큼 빈 공간을 제공.
。 column간 구분을 할때 사용됨.
ex) 2개 열을 구분할 공간 생성 시
  <div class="col-5.5">1열의 1열</div>
  <div class="col-5.5 offset-1">1열의 2열</div>
。grid의 총 12개 열 중 11열은 col에게 , 1열은 offset으로 할당.

하지만, Page의 크기를 축소할 경우, row column이 재배치되는것이 아닌 계속 column간 width를 유지를 한다. => 반응형 중단점( Grid Option ) 사용.
반응형 중단점 ( Grid Option ): xs , sm , md , lg , xl , xxl
。복수로 중복 적용도 가능!
Grid Option

HTML

xs : class="col-숫자" : default
sm : class="col-sm-숫자"
。일반적으로 모바일폰 화면사이즈로 적용.
md : class="col-md-숫자"
。일반적으로 태블릿 , 노트북 화면사이즈로 적용.
lg : class="col-lg-숫자"
。일반적으로 데스크탑 화면사이즈로 적용.
xl : class="col-xl-숫자"
。일반적으로 프로젝터 화면사이즈로 적용.

React의 <Container>, <Row> , <Col>의 반응형 중단점 속성
。react-bootstrap 라이브러리를 import하여 활용.
▶ import { Container, Row, Col } from 'react-bootstrap';를 통해 react-bootstrap에서 <Container>, <Row> , <Col>을 import한 후 해당 속성내에 정의하여 활용한다.

。1개 Row당 12개 Column을 분할.
return (
    <Container>
      <Row>
        <Col xs={3} md={3} lg={3}><ControlPane/></Col>
        <Col xs={9} md={9} lg={9}>
          <div ref={mapRef}  // React에서 OpenLayers가 맵을 렌더링할 DOM 요소를 참조
          className="map"/>
        </Col>
      </Row>
    </Container>
  );
xs={Column숫자} : 모바일 설정용도
md={Column숫자} : 태블릿 설정용도
lg={Column숫자} : 데스크탑 설정용도

활용 례
활용례 1
  <div class="row">
    <div class="col-lg-6 col-sm-12 col-md-12">
      <p>내용1</p>
    </div>
    <div class="col-lg-6 col-sm-12 col-md-12">
      <p>내용2</p>
    </div>
  </div>
。lg(lg $\ge$ 992px) 까지는 $\frac{12}{2}=6$ 으로 인해 2개 열을 유지
。sm, md (sm $\ge$ 576px , md $\ge$ 768px )까지는 $\frac{12}{1}=12$ 를 통해 1개 column 유지.

활용례 2
 <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-3 col-lg-3">1/4열</div>
      <div class="col-sm-12 col-md-3 col-lg-3">2/4열</div>
      <div class="col-sm-12 col-md-6 col-lg-6">4/4열</div>
    </div>
  </div>
。페이지의 크기를 조정 시 3개의 column 요소들이 중단점(md의 경우 : 768px)까지 동일한 width를 유지하면서 축소하다가 column 요소들이 재배열됨.
<form>에서 Grid System 활용하기. : Bootstrap / Formcontrol
form-row , form-group
。<div class="row"> 지정 시 요소를 inline 형식으로 width가 여유가 있을 경우, 자식요소를 한 row로 배치가 가능하지만, <div class="form-row">로 지정 시 요소를 block 형식으로 width가 여유가 있어도 다음 행으로 이동.
text 실습 1.
<div class="container">
    <div class="row">
      <div class="col-4">
        <h1>실습하기.</h1>
      </div>
      <div class="col-8">
        <form>
          <div class="form-row">
            <div class="form-group col-6" >
              <label for="id1">textfield1</label>
              <input type="text" class="form-control" name="textfield1" id="id1">
            </div>
            <div class="form-group col-6" >
              <label for="id2">textfield2</label>
              <input type="text" class="form-control" name="textfield2" id="id2">
            </div>
            <div class="form-group col-4">
              <label for="id3">textarea1</label>
              <textarea class="form-control" name="textarea1" id="id3" cols="40" rows="5"></textarea>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
。일반적으로 <form> 태그 내부에 <div class="form-row"> 태그 생성후 form-row 내부에 <div class="form-group">을 선언하여 해당 태그 내에 input 요소들을 선언.
。이때 form-row는 row와 동일한 역할을 수행하므로, 자식요소의 <div class="form-group col-숫자 offset-숫자">을 통해 부모요소의 width를 12분할하여 사용이 가능.
▶ class="row" 설정 시 다음처럼 입력 field가 inline 형식으로 나란히 표현.

Form Element Styling Class
。해당 CSS Class는 Bootstrap Framework의 일부로서 form element에 특정 Style을 적용하기 위해 사용.

class="form-control"
。<input> , <textarea> , <select> 등을 자동으로 Styling하는 CSS Class.
▶ class="form-control" 정의 시 HTML element에 Bootstrap에 의해 styling을 적용되어 입력 Field의 가로폭이 100%로 자동조정되면서 padding, border이 부드럽게 적용.

class="form-row"
。Bootstrap Grid System을 이용하여 Form element들을 가로로 구조화하여 정렬 시 사용.
▶ class="col-반응사이즈-숫자" 설정 시 반응형 디자인이 적용되면서 여러개의 입력 field의 크기를 조정하여 한 row로 배치 가능.

。적절한 간격으로 Compact한 Inline layout을 제공하기위해 설계됨.
▶ 여러 form element를 단일 row 내에 나란히 표시하는 경우 사용됨.

。class="form-row"의 경우 가로정렬로서 margin-left = margin-right = -5px

class="form-group" :
。여러 Form element ( ex. <label> , <input> 등 )들을 그룹으로 묶어서 세로로 정렬하는 CSS Class.
▶ 일반적으로 <div>에 선언하여 내부에 <label>과 <input>을 함께 묶을 때 사용.

。<label> , <input> 태그간에 적당한 margin값을 가지면서 정돈된 느낌 제공.
。<div> 태그에서 둘 다 동일한 display : flex , flex-wrap : wrap 특징을 지닌다.
。class="form-group"의 경우 세로정렬로서 margin-left = margin-right = -15px
drop down, radio 실습
。form-control
drop-down
  <div class="form-row">
            <div class="form-group col-6">
              <label for="shopping">선택하세용</label>
              <select id="shopping" multiple class="form-control">
                <optgroup label="1-3">
                  <option value="1" selected>1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </optgroup>
                <optgroup label="4-6">
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                </optgroup>
                <optgroup label="7-9">
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                </optgroup>
              </select>
            </div>
          </div>
。<select>에 class="form-control"을 지정.

radio
。라디오는 따로 정의된 class 존재 X
  <div class="form-row">
            <div class="form-group col-12">
              <p>라디오선택</p>
              <div class="row">
                <div class="col-3">
                  <input type="radio" id="id4" name="rad" checked>
                  <label for="id4">라디오1</label>
                </div>
                <div class="col-3">
                  <input type="radio" id="id5" name="rad">
                  <label for="id5">라디오2</label><br>
                </div>
                <div class="col-3">
                  <input type="radio" id="id6" name="rad">
                  <label for="id6">라디오3</label><br>
                </div>
                <div class="col-3">
                  <input type="radio" id="id7" name="rad">
                  <label for="id7">라디오4</label><br>
                </div>
              </div>
            </div>
          </div>
floating text field , button 실습
。class="form-floating"를 사용하여 <label>태그의 내용을 입력필드 위에 표현.
。style="margin-top:20px" :
요소의 상단의 여백의 정도를 설정.
margin-left , margin-right , margin-bottom 등으로 조정이 가능.
ex)
  <div class="container" style="margin-top:10px">
。class="mb-숫자" :
요소의 하단의 여백의 정도를 설정 (1, 2, 3, 4)
ex)
      <div class="container mb-3">
<div class="row">
      <div class="col-md-6">
        <form>
        <div class="row">
          <div class="form-floating mb-3 col-12">
            <input type="email" class="form-control" id="floatingInput" placeholder="">
            <label for="floatingInput">Email address</label>
          </div>
          <div class="form-floating mb-3 col-9">
            <input type="password" class="form-control" id="passwordin" placeholder="">
            <label for="passwordin">Password</label>
          </div>
          <div class="col-3">
            <input class="btn btn-primary" type="submit" value="Submit">
          </div>
        </div>
        </form>
      </div>
    </div>
。class="form-row"이므로, inline처럼 옆으로 나란히 배치되지 않고 block 형식으로 배치됨.
=> 나란히 배치할 경우 class="row" 설정.
<div class="form-floating"> :
。<input class="form-control">과 <label> 태그 요소와 함께 사용하며 <label>의 문구를 입력필드 위에 floating.
。<input> 태그에는 placeholder="" 속성이 반드시 필요.

<input class="btn">
。<input> type을 button 디자인으로 설정.

class="btn-block" :
。button의 width를 가능한 범위내에서 full width로 설정.

class="btn-color" : bootstrap 버튼 색상 종류
。 btn-primary : 파랑
。 btn-secondary : 회색
。 btn-success : 초록
。 btn-danger : 빨강
。 btn-warning : 노랑
。 btn-info : 하늘
。 btn-light : 흰색
。 btn-dark : 검정

form의 테두리 생성하기.
        <div style="border: 3px solid black;border-radius: 5px;padding:10px">
        form요소
        </div>

점보트론(Jumbotron) :
<div class="jumbotron">
부트스트랩-점보트론
。Banner처럼 간단한 정보를 눈에 띄게 보여주는 역할을 수행.

class="jumbotron-fluid" :
。jumbotron이 해당 container의 width로 제한되지 않고, 화면 전체 너비에 걸쳐 늘어나도록 설정
  <div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

modal : <div class="modal">
부트스트랩-모달
。웹페이지상에서 form을 수정 및 저장 등의 기능을 수행하여 정상적으로 반영될 경우 사용자에게 지시되는 메세지창
。modal 코드는 container 등의 요소에 포함되지 않고, 반드시 독립적으로 사용되어야함.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

modal 띄우는 방법
。<a>, <button> , 다른 element 등에 data-toggle="", data-target="#modal id" 속성을 설정하여 modal을 띄우거나, JS로 띄움.
。<Button> 태그 요소에 data-toggle="modal" , data-target="#<div class="modal">의id" 속성을 설정.
<button type="button" class="btn btn-dark btn-block" type="submit"  data-toggle="modal" data-target="#exampleModal" style="margin-top:10px;margin-left:-10px;">Submit</button>

이정수

공부기록 블로그

다음 포스트

Bootstrap

기타 기술 정리

OpenLayers

0개의 댓글