본문 바로가기
Front/CSS

Bootstrap - 주요 기능

by Hyeon_ 2021. 12. 7.

Bootstrap

주요 기능

  • Containers
  • Jumbotron
  • Grid
  • button
  • Table
  • Image

Containers

  • 레이아웃 최상위 요소로 다른 요소 포함
  • <div class="container"></div>
  • .container : 반응형 고정 폭 컨테이너
  • .container-fulid : 뷰포트 전체 폭까지 늘어나는 최대 폭 컨테이너

Containers 예제

  • viewport 포함
  • <link> : css/bootstrap.min.css
  • <script> : jQuery 파일 소스 지정
  • <script> : js/bootstrap.min.js 소스 지정
  • 주의!!
    • jquery파일의 소스 지정이 먼저 와야 함
container.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width, initial-scale=1">
    <title>Bootstrap 컨테이너</title>
    <!--link -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery가 먼저 와야함!!!! -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container bg-primary text-white">
        <h1>Bootstrap</h1>
        <p>Container</p>
    </div>
    <div class="container-fluid bg-danger text-white">
        <h1>Bootstrap</h1>
        <p>Container</p>
    </div>
</body>
</html>

 

Jumbotron

  • 일종의 대형 전광판
  • 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한 큰 박스
jumbotron.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap jumbotron</title>
    <meta name="viewport" content="width=divice-width, initial-scale=1">
    <!--link -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery가 먼저 와야함!!!! -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="jumbotron alert-success">
            <h1>Jumbotron</h1>
            <p>둥근 모서리 사각형 영역</p>
        </div>
    </div>
    <div class="jumbotron">
        <div class="container">
            <h1>Jumbotron</h1>
            <p>container 밖에 있는 jumbotron</p>
        </div>
    </div>
</body>
</html>
  • container 영역이 jumpotron보다 더 넓고, jumbotron의 모서리는 둥글게 표시된다는 것 확인 가능

jumbotron2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap jumbotron2</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="jumbotron alert-primary">
        <h1 class="text-center">지능형 서비스 풀스택 과정</h1>
        <p class="text-center text-danger">
            Java / MySQL /HTML / CSS / JavaScript / jQuery / Bootstrap /
            Servlet / JSP / Spring Framework / AI API</p>
        <p class="text-center">
            <a class="btn btn-primary btn-lg" href="#">커리큘럼 보기</a></p>
    </div>
</div>
</body>
</html>

그리드 (Grid)

  • 격자 모양으로 영역 분할 가능
  • 1행을 12등분해서 비율로 배치
  • 행 : class="row"
  • 열 : class="col-숫자"
    • 숫자 : 12칸 중 차지하는 칸 수
  • 필요에 따라 열을 묶어 더 큰 크기의 열로 사용 가능

col-scale-숫자

  • col-scale-숫자 : 12칸 중 차지하는 칸 수
  • col-sm-숫자 : 576px 이하이면 세로로 배치
  • col-md-숫자 : 768px 이하이면 세로로 배치
  • col-lg-숫자 : 992px 이하이면 세로로 배치
  • col-xl-숫자 : 1200px 이하이면 세로로 배치
grid.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width, initial-scale=1">
    <title>Bootstrap grid</title>
    <!--link -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery가 먼저 와야함!!!! -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="col bg-success">a</div>
        <div class="col bg-danger">b</div>
        <div class="col bg-warning">c</div>
    </div>
    <br>
    <div class="row">
        <div class="col bg-success">a</div>
        <div class="col bg-danger">b</div>
        <div class="col bg-warning">c</div>
        <div class="col bg-info">d</div>
    </div>
    <br>
    <div class="row">
        <div class="col bg-success">a</div>
        <div class="col bg-danger">b</div>
    </div>
    <div class="row">
        <div class="col bg-warning">c</div>
        <div class="col bg-info">d</div>
    </div>
</body>
</html>

grid2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap </title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 bg-success">a</div>
            <div class="col-6 bg-warning">b</div>
        </div> <br>

        <div class="row">
            <div class="col-2 bg-success">a</div>
            <div class="col-10 bg-warning">b</div>
        </div> <br>

        <div class="row">
            <div class="col-4 bg-success">a</div>
            <div class="col-8 bg-warning">b</div>
        </div> <br>

        <hr>
        <div class="row">
            <div class="col-sm-6 bg-success">a</div>
            <div class="col-sm-6 bg-warning">b</div>
        </div> <br>

        <div class="row">
            <div class="col-md-6 bg-success">a</div>
            <div class="col-md-6 bg-warning">b</div>
        </div> <br>

        <div class="row">
            <div class="col-lg-6 bg-success">a</div>
            <div class="col-lg-6 bg-warning">b</div>
        </div> <br>
        <div class="row">
            <div class="col-xl-6 bg-success">a</div>
            <div class="col-xl-6 bg-warning">b</div>
        </div> <br>
    </div>
</body>
</html>
</html>

Button

  • 버튼으로 사용하 수 있는 요소들에 class="btn" 적용
  • <a>
  • <button>
  • <input type="button">
  • <input type="submit">
  • <input type="reset">
  • 기본 : class="btn"
  • 색상 설정 : class="btn btn-primary"
  • 크기 설정 : btn-lg, btn-md (디폴트), btn-sm
  • 테두리 표시 : btn-outline-dark, btn-outline-primary
button.html
  • btn만 설정
  • 클릭했을 때 테두리 표시
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap </title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- btn만 설정 / 클릭했을 떄 테두리 표시 -->
    <a class="btn" href="#">Link</a>
    <button class="btn">Button</button>
    <input type="button" class="btn" value="Input-Button">
    <input type="submit" class="btn" value="Input-Submit">
    <input type="reset" class="btn" value="Input-Reset">
</body>
</html>
</html>

button2.html
  • 색상 설정
  • 크기설정
  • 테두리 설정
  • 버튼 링크
  • btn-block (width를 50%로 설정하여 페이지의 크기에 따라 유동적으로 변함)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>버튼</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .block {width:50%;}
    </style>
</head>
<body>
    <!-- btn만 설정 / 클릭했을 떄 테두리 표시 -->
    <a class="btn" href="#">Link</a>
    <button class="btn">Button</button>
    <input type="button" class="btn" value="Input-Button">
    <input type="submit" class="btn" value="Input-Submit">
    <input type="reset" class="btn" value="Input-Reset">
    <hr>

    <!-- 색상 설정 -->
    <a class="btn btn-primary" href="#">Link</a>
    <button class="btn btn-warning">Button</button>
    <input type="button" class="btn btn-success" value="Input-Button">
    <input type="submit" class="btn btn-danger" value="Input-Submit">
    <input type="reset" class="btn btn-info" value="Input-Reset">
    <hr>

    <!-- 크기 설정 -->
    <a class="btn btn-primary btn-lg" href="#">Link</a>
    <button class="btn btn-warning btn-md">Button</button>
    <button class="btn btn-warning btn-mini">Mini</button>
    <input type="button" class="btn btn-success" value="Input-Button"> <!--DEFAULT-->
    <input type="submit" class="btn btn-danger btn-sm" value="Input-Submit">
    <input type="reset" class="btn btn-info btn-lg" value="Input-Reset">
    <hr>

    <!-- 테두리 설정 -->
    <a class="btn btn-outline-primary" href="#">Link</a>
    <button class="btn btn-outline-dark">Button</button>
    <input type="button" class="btn btn-outline-light text-dark" value="Input-Button">
    <input type="submit" class="btn btn-outline-danger" value="Input-Submit">
    <input type="reset" class="btn btn-outline-info" value="Input-Reset">
    <hr>

    <!-- 버튼 링크 -->
    <a class="btn btn-link" href="#">Link</a>
    <hr>

    <!-- btn-block -->
    <div class="block">
        <button type="button" class="btn btn-large btn-block btn-primary">btn-block</button>
        <button type="button" class="btn btn-large btn-block">btn-block</button>
    </div>

</body>
</html>

Image

  • rounded : 둥근 모서리
  • rounded-circle : 둥근 이미지
  • img-thumbnail : 썸네일 이미지
  • float-left / float-right : 좌/우 정렬
  • mix-auto + d-block : 가운데 정렬
image.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap </title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .container {border: 1px solid black; padding:5px;}
    </style>
</head>
<body>
    <div class="container">
        <img src="image/사진.jpg" class="rounded float-left">
        <img src="image/사진.jpg" class="rounded-circle float-right">
        <img src="image/사진.jpg" class="rounded-thumbnail ms-auto d-block">
    </div>
</body>
</html>

Table

  • class="table"
  • table-bordered: 테두리 있음
  • table-borderless : 테두리 없음
  • table-striped : td 태그 흰색행/회색행
  • table-hover : 행에 마우스 올리면 색상 변경
  • table-dark : 배경색을 검정색으로 설정
table.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Table</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-md table-hover table-info table-bordered">
            <thead class="thead-dark">
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성일</th>
                <th>조회수</th>
            </tr>
            </thead>
            <tr class="table-danger">
                <td>4</td>
                <td>HTML /CSS</td>
                <td>flower</td>
                <td>2019-11-17</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>일본어 스터디</td>
                <td>성춘향</td>
                <td>2019-11-15</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bootstrap</td>
                <td>이몽룡</td>
                <td>2019-11-12</td>
                <td>0</td>
            </tr>
            <tr>
                <td>1</td>
                <td>JSP 프로그래밍</td>
                <td>홍길동</td>
                <td>2019-11-07</td>
                <td>1</td>
            </tr>
        </table>

        <table class="table table-striped table-border">
            <thead class="thead-dark">
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성일</th>
                <th>조회수</th>
            </tr>
            </thead>
            <tr>
                <td>4</td>
                <td>HTML /CSS</td>
                <td>flower</td>
                <td>2019-11-17</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>일본어 스터디</td>
                <td>성춘향</td>
                <td>2019-11-15</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bootstrap</td>
                <td>이몽룡</td>
                <td>2019-11-12</td>
                <td>0</td>
            </tr>
            <tr>
                <td>1</td>
                <td>JSP 프로그래밍</td>
                <td>홍길동</td>
                <td>2019-11-07</td>
                <td>1</td>
            </tr>
        </table>
    </div>
</body>
</html>

Navbar (내비게이션 바)

  • class="navbar"
  • navbar-nav / nav-item
  • dropdown / dropdown-menu / dropdowm-item
  • 검색창 추가
    • <form> 추가
    • 오른쪽으로 배치 : <ul class="navbar-nav mr-auto">
    • 입력란 마진 : <input class="form-control mr-lg-2">
navBar.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap navBar</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>  <!-- jquery가 먼저 와야 함 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- navBar -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">HOME</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">LINK1</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">LINK2</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">LINK3</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">LINK4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">LINK5</a> </li>
                <!-- 드롭다운 메뉴 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown">DropDown</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item">Dropdown Item1</a>
                        <a class="dropdown-item">Dropdown Item2</a>
                        <!-- <div class="dropdown-dvider"></div> -->
                        <hr>
                        <a class="dropdown-item">Dropdown Item3</a>
                        <a class="dropdown-item">Dropdown Item4</a>
                    </div>
                </li>
            </ul>
            <!-- 검색 form 추가 -->
            <form class="form-inline">
                <input class="form-control mr-lg-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </nav>
    </div>
</body>
</html>

저작자표시 비영리 동일조건

'Front > CSS' 카테고리의 다른 글

CSS - header 메뉴 정렬 (float / clear)  (0) 2021.12.09
Bootstrap  (0) 2021.12.06
CSS - 반응형 웹  (0) 2021.12.06
CSS 연습문제  (0) 2021.12.06
CSS - 속성  (0) 2021.12.05

관련글

티스토리툴바