Bootstrap이란?
부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다.
웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다.
'프레임워크'라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다.
jquery는 라이브러리이고, 부트스트랩은 프레임워크다.
따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말할 수 있다.
Bootstrap 개발 목적
트위터에는 수많은 직원들이 각자가 맡은 부분의 프론트엔드 개발을 진행하기 때문에, 위와 같은 일관성 유지에 관한 문제에 항상 직면하곤 했다. 위와 같은 문제점을 해결하고자 트위터의 직원인 Mark Otto와 Jacob Thornton은 1년 동안 업무 외 시간과 주말에 프로젝트를 진행하면서, 정형화된 인터페이스 형태의 부트스트랩의 초기버전인 Twitter Blueprint를 개발했다. 초기 버전 개발 후 사내 개발자들에게 공개했는데, 폭발적인 반응을 얻었다. 이후로 점차 많은 개발자들이 프로젝트에 투입됐고, 하나의 프레임워크 형태로 발전했다.
기본 사용법
아래 사이트를 클릭합니다.
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드
bootstrapk.com
부트스트랩 다운로드를 클릭합니다.
부트스트랩 다운로드를 클릭합니다.
다운로드 받고 압축을 해제합니다.
부트스트랩의 기본 템플릿
<!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">
<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
<title>부트스트랩 101 템플릿</title>
<!-- 부트스트랩 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
기본 템플릿 파일을 실행해서 hello world 출력과 js파일이 정상적으로 로드되는지 확인합니다.
'Bootstrap' 카테고리의 다른 글
| 03. [Bootstrap] 그리드 시스템 (0) | 2021.10.08 |
|---|---|
| 02. [Bootstrap] 모바일 우선 & 콘테이너 (0) | 2021.10.08 |