Bootstrap
특징
Bootstrap은 트위터에서 개발한 것으로 class를 이용하여 보다 쉽게 레이아웃 등 프런트 개발에 도움을 주는 toolkit입니다.
지금은 5버전까지 나와있으며 css와 js 파일로 구분되며 Document도 잘되어 있어 쉽게 따라 할 수 있습니다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
버전에 따라 사용법과 의존성이 다를 수 있지만 금방 습득할 수 있습니다. 버전에 따라 사용하고 싶으면 구글에 "boostrap [version] cdn"을 치시면 해당 document를 보면 됩니다. 한국어 버전으로도 잘 나와있으니 한번 둘러보시기 바랍니다. bootstrapk 한국 버전은 아래의 링크로 가시면 됩니다.
http://bootstrapk.com/getting-started/
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치
bootstrapk.com
설치는 따로 하실 필요없이 링크만 설정해주면 됩니다. 간단하쥬
Bootstrap의 작동 방식
bootstrap은 class를 이용하여 쉽게 디자인을 할 수 있습니다. 어느 정도의 지식만 가지고 있으면 금방 습득할 수 있는 toolkit입니다. 하나의 예시를 들어보면 아래의 이미지에 여러 버튼이 있는데 class의 이름만 변경해도 아래와 같은 디자인을 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<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>bootstrap</title>
<!-- bootstrap link -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<!-- start -->
<div class="container" style="padding-top: 50px">
<div class="col-md-4">
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input" />
<input class="btn btn-danger" type="submit" value="Submit" />
</div>
<div class="col-md-4">
<a class="btn btn-info" href="#" role="button">Link</a>
<button class="btn btn-warning" type="submit">Button</button>
<input class="btn btn-success" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" />
</div>
<div class="col-md-4"></div>
</div>
</body>
</html>위의 "btn btn-info" "btn btn-warning"..처럼 class이름만 추가해줄 뿐인데 이쁜 버튼이 나옵니다. 다음에는 레이아웃에 대해 알아보겠습니다.
❗ 저작권