bootstrap 활용

IT 공부/JavaScript

bootstrap 활용

toraa 2022. 7. 20. 17:15

구현
. div
. 클래스명

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container" style="background-color: skyblue; height:100px;">
		class = "container" ---(100%)--576px--(540)--768px--(720)--992px--(960)--1200px -- 
	</div>
	<div class="container-sm" style="background-color: red; height: 100px;">small종단점까지 100%</div>
	<div class="container-md" style="background-color: orange; height: 100px;">medium종단점까지 100%</div>
	<div class="container-lg" style="background-color:yellow; height: 100px;">large종단점까지 100%</div>
	<div class="container-xl" style="background-color:green; height: 100px;">extra large종단점까지 100%</div>
	<div class="container-xxl" style="background-color:blue; height: 100px;">extra extra large종단점까지 100%</div>
	<div class="container-fluid" style="background-color:purple; height: 100px;">
	뷰포인트 전체 너비에 걸쳐있는 컨테이너는 fluid를 사용 - 여백없음, 창의 사이즈가 작아지면 같이 작아짐</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
       .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-xs8, .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-xs11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs12, 
       .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-md">
		<div class="row">
			<div class="col" style="background-color: green;">1 of 2</div>
			<div class="col" style="background-color: red;">2 of 2</div>
		</div>
		<div class="row">
			<div class="col" style="background-color: red;">1 of 3</div>
			<div class="col" style="background-color: yellow;">2 of 3</div>
			<div class="col" style="background-color: white;">2 of 3</div>
		</div>
		<div class="row">
			<div class="col-md-8" style="background-color: yellow">col-md-8</div>
			<div class="col-md-4 col-6" style="background-color: orange">col-md-4 col-md-6</div>
		</div>
</div>
</body>

</html>

너비와 높이
너비 - w-25, w-50, w-75, w-100
높이 - h-25, h-50, h-75, h-100
mw - 100 : max-width:100% 같음
mh - 100 : max-height:100% 같음

마진 : m-0 ~ m-5 mt my
ml mr mx mx
mb my

m-1: 글자크기가 16px이라면 16*0.25 = 4 ; 4px 여백을 준다
m-2: 16*0.5 = 8
m-3: 16*1.0 = 16
m-4: 16*1.5 = 24
m-5: 16*3.0 = 48

패딩 : p-0 ~p-5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
	<div class="container border mt-3">
		<p>
			<h3>justify-content-start적용</h3>
		</p>
		<ul id="nav1" class="nav justify-content-start bg-light">
			<li class="nav-item"><a class="nav-link active" 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 disabled" href="#">Disabled</a></li>
		</ul>
		<hr class="my-5">
		<p>
			<h3>justify-content-center적용</h3>
		</p>
		<ul id="nav1" class="nav justify-content-start bg-light">
			<li class="nav-item"><a class="nav-link active" 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 disabled" href="#">Disabled</a></li>
		</ul>
		<hr class="my-5">
		<p>
			<h3>justify-content-end적용</h3>
		</p>
		<ul id="nav2" class="nav justify-content-end bg-light">
			<li class="nav-item"><a class="nav-link active" 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 disabled" href="#">Disabled</a></li>
		</ul>
		<hr class="my-5">
		<p>
			<h3>justify-content-between적용</h3>
		</p>
		<ul id="nav3" class="nav justify-content-between bg-light">
			<li class="nav-item"><a class="nav-link active" 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 disabled" href="#">Disabled</a></li>
		</ul>
		<hr class="my-5">
		<p>
			<h3>justify-content-around적용</h3>
		</p>
		<ul id="nav3" class="nav justify-content-around bg-light">
			<li class="nav-item"><a class="nav-link active" 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 disabled" href="#">Disabled</a></li>
		</ul>
	</div>
</body>
</html>

. 글자크기
<h1> 36px
<h2> 30px
<h3> 24px
<h4> 18px
<h5> 14px
<h6> 12px

. 기본 줄간격 : light-height ; 1.428
. p태그의 하단여백 : 10px

. 디스플레이 헤딩태그
display-1 ~ display4

. em, rem 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
	
		<div class="card mt-5">
			<h2 class="card-header">겸댕</h2>
			<img class="card-img-top" src="images/rol4.png">
			<div class="card-body">
				<p class="small text-muted">January 7.2022</p>
				<h2 class="card-title">귀염둥이</h2>
				<p class="card-text">시나모롤 인데용</p>
				<button class="btn btn-primary">Read more ▷</button>
			</div>
		</div>	
	</div>
</body>
</html>

글자/링크 색상 배경 색상
class="text-primary" "bg-primary"
secondary
success
danger
warning
info
light
dark
body
muted
white
black
등

getbootstrap.com의 Pagination에서 참고

저작자표시 (새창열림)

'IT 공부 > JavaScript' 카테고리의 다른 글

아이콘 참고 사이트 (0)	2022.07.20
Bootstrap(BS)를 활용한 블로그 페이지 (0)	2022.07.20
여행사이트 만들기 (0)	2022.07.18
wow활용 (1)	2022.07.18
Jquery (1)	2022.06.21

현재글bootstrap 활용

기록 저장소