Bootstrap
bootstrap이란?
다른 사람이 만들어둔 것을 사용.
bootstrap.css를 불러와서 적용한다.
Bootstrap 시작하기
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<a class="btn btn-danger"> 버튼 작성 </a>
</body>3을 쓰는 이유
기반 플러그인이 3 버전이라는데 강의 오래된 것만 같은 ...레이아웃
| 화면 사이즈 | 표현 |
|---|---|
| 768px보다 클 때 | col-sm- |
| 970 | col-md |
| 1170 | col-lg |
| 768 | col-xs |
col-sm- : 768보다 아래로 내려가면 세로로 한 줄로 정렬된다. 가로 정렬이 안됨.
<head>
<title>부트스트랩</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.con-sm-6, .col-sm-4 { border: 1px solid red; }
</style>
</head>
<body>
<!-- 컴 화면에서는 가로로 보이고 폰 화면에서는 세로로 보인다.
한 줄에 12칸이라고 생각하고, sm-4에서 4칸인지 확인하는 것.-->
<div class="container">
<div class="col-sm-4">첫번째</div>
<div class="col-sm-4">두번째</div>
<div class="col-sm-4">세번째</div>
</div>
</body>
</html>만약 <768 이면 1, 768< 이면 2, 970px 이상에서는 3
<div class="container">
<div class="col-sm-6, col-md-4">첫번째</div>
<div class="col-sm-6, col-md-4">두번째</div>
<div class="col-sm-6, col-md-4">세번째</div>
</div>컴포넌트
버튼
부트스트랩 컴포넌트 버튼
<div class="container" style="padding-top: 50px;">
<a href="" class="btn btn-default">default</a>
<a href="" class="btn btn-primary">default</a>
<a href="" class="btn btn-success">default</a>
<a href="" class="btn btn-info">default</a>
<a href="" class="btn btn-waring">default</a>
<a href="" class="btn btn-danger">default</a>
</div>
테이블
<div class="container" style="padding-top:50px;">
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
</div>패널
<div class="panel panel-default">
<div class="panel-heading">
bootstrap
</div>
<div class="panel-body">
안녕하세요 <br>
안녕하세요 <br>
안녕하세요 <br>
</div>
</div>폼
<ul>
<li class="form-inline">
<label for="">아이디 :</label>
<input type="text" class="form-control">
</li>
<li class="form-inline">
<label for="">비밀번호 :</label>
<input type="password" class="form-control">
</li>
<!-- form-inline 없으면 줄을 모두 차지하고 뉴라인에 다음 요소가 나온다. -->
<li class="form-inline">
<label for="">생년월일 :</label>
<select name="" id="" class="form-control">
<option value="">년도</option>
<option value="">1995</option>
<option value="">1994</option>
</select>
-
<select name="" id="" class="form-control">
<option value="">월</option>
<option value="">01</option>
<option value="">02</option>
</select>
-
<select name="" id="" class="form-control">
<option value="">일</option>
<option value="">30</option>
<option value="">31</option>
</select>
</li>
<li class="">
<input type="checkbox">
<label for="">약관에 동의 하시겠습니까?</label>
</li>
</ul>네비게이션
JQuery & bootstrap 동시 사용.
<head>
<title>네비게이션</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>