728x90
부트스트랩(Bootstrap)이란?
- 부트스트랩은 트위터에서 시작된 jQuery 기반의 오픈 소스 웹 프레임워크
- 반응형이며 모바일 우선인 웹프로젝트를 개발하기 위한 가장 인기있는 HTML, CSS, JS 프레임 워크
부스스트랩 사용하기
부트스트랩을 사용하기 위해 아래의 웹사이트로 접속한다.
한글로 '부트스트랩'이라고 검색했을 때 나오는 웹사이트는 옛날 버전인 3.3.2를 지원하기 때문에 영어로 bootstrap을 검색해서 나오는 아래 사이트에 들어가면 된다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
bootstrap 사이트에서 필요한 코드를 복사 & 붙여넣기로 사용할 것이기 때문에 다운로드 대신에 Get started를 선택하도록 한다.
CSS 부분의 코드 Copy / JS 부분의 코드를 Copy 하여 HTML에 코드에 붙여넣기 한다.
복사한 CSS 코드의 rel="stylesheet" 뒷부분과 복사한 JS 코드의 intergirty = "-----" 부분은 삭제해도 무관하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello world</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Grid를 사용하기 위해 홈페이지 왼쪽 Layout -> Grid
https://getbootstrap.com/docs/5.1/layout/grid/
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
예제 코드와 함께 option에 관한 내용이 자세히 적혀있기때문에 참고하며 코드를 작성하면 된다.
내가 작성한 코드는 아래와 같으며 별다른 코드 없이도 반응형웹으로 제작할 수 있어 매우 편리하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 반응형 웹사이트 Grid 편하게 사용하기 -->
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.b
{
border: solid 1px;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<div class="container-fluid">
<div class="row">
<!-- 12 칸을 넘어가면 다음줄로 넘어감-->
<!-- md≥768px 다음줄로 넘어감 / sm≥576px 다음줄로 넘어감 -->
<div class="col-md-6 col-sm-6 b">hello</div>
<div class="col-md-3 col-sm-6 b">hello</div>
<div class="col-md-3 col-sm-12 b">hello</div>
</div>
<div class="row">
<div class="col-md-4 b">hello</div>
<div class="col-md-4 b">hello</div>
<div class="col-md-4 b">hello</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-4 b">hello</div>
<div class="col-md-4 b">hello</div>
</div>
</div>
</body>
</html>728x90