w3school에 가서 Bootstrap4에 내용을 확인하면 예제를 확인할 수 있다.
Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
border: 1px solid red;
padding: 10px;
}
.row{
margin-bottom: 4px;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-9">col-md-9</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-8">col-md-8</div>
<div class="col-md-2">col-md-2</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-2">col-md-2</div>
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-8 offset-md-2">col-md-8</div>
</div>
<!--중첩 그리드 레이아웃-->
<h1>중첩 그리드 레이아웃</h1>
<div class="row">
<div class="col-md-8">
<div class="container">
<div class="row"><div class="col-md-2"></div>
<div class="col-md-10"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container">
<div class="row"><div class="col-md-2"></div>
<div class="col-md-10"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>반응형 감추기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
ul.nav{
display: block;
background-color: rgba(200,200,200,0.5);
padding: 10px;
border-radius: 5px;
}
footer{
text-align: center;
font-family: sans-serif;
font-size: 0.8em;
height: 45px;
background-color: rgba(200,200,200,0.5);
}
</style>
</head>
<body>
<div class="container">
<header class="jumbotron">
<h1 class="text-primary text-center">My Home</h1>
<p class="mt-5 text-center">그리드를 중첩하여 레이아웃을 구성</p>
</header>
<!--contents 들어가는 부분-->
<div class="row">
<div class="col-md-3 d-none d-sm-block">
<ul class="nav">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div class="col-md-9">
<div class="container">
<div class="row">
<div class="col-md-7">
<p>첫 코로나19(신종 코로나바이러스 감염증) 치료제인 렘데시비르의 미국 공급가격이 공공 건강보험 가입자 기준 1병(바이알)당 390달러(약 47만원)으로 책정됨에 따라 국내 수입가격에 관심이 모아진다. 글로벌 시장에 비해 낮은 약가 정책을 고수하고 있는 한국 입장에선 가격협상부터 난항이 예상된다.
1일 제약바이오업계와 보건복지부, 질병관리본부, 국민건강보험, 건강보험심사평가원, 식품의약품안전처 등에 따르면 중증 환자 치료제로 긴급사용 승인을 받은 항바이러스제 렘데시비르 수입의 최대 관문은 약가 협상이다. 글로벌 제약시장에서 신약이 개발되면 판매사는 높은 가격을 책정해주는 국가에 우선 공급한다. 이후 약가 협상의 기준이 되는 까닭이다.
약가에 인색하기로 소문난 한국이 렘데시비르를 우선 배정받기는 어려울 전망이다. 통상 해외에서 개발한 신약은 첫 번째 협상 국가가 책정한 가격의 60% 정도만 인정하고 있어서다.
</p>
</div>
<div class="col-md-5"><p>첫 코로나19(신종 코로나바이러스 감염증) 치료제인 렘데시비르의 미국 공급가격이 공공 건강보험 가입자 기준 1병(바이알)당 390달러(약 47만원)으로 책정됨에 따라 국내 수입가격에 관심이 모아진다. 글로벌 시장에 비해 낮은 약가 정책을 고수하고 있는 한국 입장에선 가격협상부터 난항이 예상된다.
1일 제약바이오업계와 보건복지부, 질병관리본부, 국민건강보험, 건강보험심사평가원, 식품의약품안전처 등에 따르면 중증 환자 치료제로 긴급사용 승인을 받은 항바이러스제 렘데시비르 수입의 최대 관문은 약가 협상이다. 글로벌 제약시장에서 신약이 개발되면 판매사는 높은 가격을 책정해주는 국가에 우선 공급한다. 이후 약가 협상의 기준이 되는 까닭이다.
약가에 인색하기로 소문난 한국이 렘데시비르를 우선 배정받기는 어려울 전망이다. 통상 해외에서 개발한 신약은 첫 번째 협상 국가가 책정한 가격의 60% 정도만 인정하고 있어서다.
</p></div>
</div>
</div>
</div>
</div><!--row end-->
<footer class="p-3">
여기는 푸터가 들어가는 곳
</footer>
</div><!--container end-->
</body>
</html>Color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Background</h1>
<p class="bg-primary text-white">.bg-primary</p>
<p class="bg-success text-white">.bg-success</p>
<p class="bg-danger text-white">.bg-danger</p>
<p class="bg-info text-white">.bg-info</p>
<p class="bg-warning text-white">.bg-warning</p>
<p class="bg-secondary text-white">.bg-secondary</p>
<p class="bg-dark text-white">.bg-dark</p>
<p class="bg-light text-dark">.bg-light</p>
<hr>
<h4>Button Color</h4>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-warning">warnings</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-info">info</button>
<button class="btn btn-secondary">secondary</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-light">light</button>
<button class="btn btn-link">link</button>
<h4>A태그를 버튼처럼 활용 가능</h4>
<a href="http://www.google.com">단순 링크</a>
<a href="http://www.google.com" role="button" class="btn-info">Link 버튼</a>
<h4>Button Size</h4>
<button class="btn btn-outline-primary btn-lg">Large</button>
<button class="btn btn-outline-info btn-default">Medium</button>
<button class="btn btn-outline-danger btn-sm">Small</button>
<h4>Block Level Button</h4>
<button class="btn btn-dark btn-block"></button>
<h4>Spinner Button</h4>
<button class="btn btn-danger">
<span class="spinner-border spinner-border-sm"></span>
Loading
</button>
<button class="btn btn-info">
<span class="spinner-grow spinner-grow-sm"></span>
Loading
</button>
<h4>Active/Disable</h4>
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-primary" disabled>Disable Button</button>
<a href="#" class="btn btn-primary disabled">Disabled link</a>
<hr>
<p class="font-weight-bold text-left">Bold text</p>
<p class="font-weight-normal text-center">Normal text</p>
<p class="font-weight-light text-right">Light text</p>
<p class="font-italic">italic text</p>
</div>
</body>
</html>Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Basic Card</h1>
<div class="card">
<div class="card-body">Card-Body</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">header</div>
<div class="card-body">body</div>
<div class="card-footer">footer</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/가위.PNG" class="card-img-bottom img-thumbnail">
<div class="card-body">
<h4 class="card-title">가위</h4>
<p class="card-text">가위바위보 절대 강자</p>
<a href="#" class="btn btn-outline-danger">show info</a>
</div>
<div class="card-footer">footer</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/바위.PNG" class="card-img-bottom img-thumbnail" style="height: 375px;">
<div class="card-img-overlay">
<h4 class="card-title">바위</h4>
<p class="card-text">가위바위보 더 강자</p>
<a href="#" class="btn btn-outline-danger">show info</a>
</div>
<div class="card-footer">footer</div>
</div>
</div>
</div>
</div>
</body>
</html>Table
table읠 class를 다음과 같이 주면 변한다.
table : 기본 테이블
table-bordered : 테두리 테이블
table-striped : 줄무늬 테이블
table-sm : 작은 테이블
table-dark : 어두운 테이블
table-hover : 선택시 바뀜
table-responsive는 table을 div.table-responsive로 감싸면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>Basic Table</h4>
<table class="table">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
<tr>
<td>Scontt</td>
<td>abc</td>
<td>scott@a.c</td>
</tr>
<tr>
<td>King</td>
<td>Ddi</td>
<td>king@a.c</td>
</tr>
<tr>
<td>Victoria</td>
<td>kim</td>
<td>vi@a.c</td>
</tr>
<tr>
<td>summer</td>
<td>se</td>
<td>ssumer@a.c</td>
</tr>
</table>
<h4>Bordered Table [.table-bordered table-hover]</h4>
<table class="table table-bordered table-hover">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
<tr>
<td>Scontt</td>
<td>abc</td>
<td>scott@a.c</td>
</tr>
<tr>
<td>King</td>
<td>Ddi</td>
<td>king@a.c</td>
</tr>
<tr>
<td>Victoria</td>
<td>kim</td>
<td>vi@a.c</td>
</tr>
<tr>
<td>summer</td>
<td>se</td>
<td>ssumer@a.c</td>
</tr>
</table>
</div>
</body>
</html>
dropdown
버튼을 누르면 submenu가 나오는 것
default는 아래이고 dropleft, dropright를 누르면 나오는 방향을 바꿀 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>Basic dropdown [.dropdown-toggle]</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">dropdown button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item active">menu1</a>
<div class="dropdown-header">Dropdown header 1</div>
<a href="#" class="dropdown-item">menu2</a>
<a href="#" class="dropdown-item disabled">menu3</a>
</div>
</div>
</div>
<hr>
<h4>Group Button Dropdown</h4>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 57일차 - Bootstrap 이미지 슬라이드, form, list group, modal (0) | 2020.07.05 |
|---|---|
| 국비지원 56일차 - 팀프로젝트 (0) | 2020.07.02 |
| 국비지원 54일차 - Servlet Memo 수정 예시 (0) | 2020.06.30 |
| 국비지원 53일차 - JS 자동차견적, 갤러리, Bootstrap/jQuery 다운로드방식, CDN방식 (0) | 2020.06.29 |
| 국비지원 52일차 - HTTP, POST방식, memo예시 (0) | 2020.06.26 |