Bootstrap이란 ?
트위터에서 시작된 프론트엔드 개발을 위한 프레임워크다. 트위터에서 사용되는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 css와 javascript로 만들어놓은 것이다.
글자 , 인용문, 목록 , 표 , 입력폼 , 버튼 , 이미지, 아이콘 등의 요소들을 모두 내장하고 있다. pc용만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 반응형으로 지원한다.
버전 차이가 있는데 버전 4는 제이쿼리를 사용하지만 버전5부터는 바닐라 자바스크립트만을 사용한다고 한다.
사용법
1. bootstrap 다운로드
다운로드 후 사용할 수 있다.
2. CDN을 통해 불러오기
별도의 다운로드없이 코드 몇줄로 불러올 수 있다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"><head>사이에 코드를 적고 예시로 밑에 있는 코드를 붙여넣기 해보겠다.
https://getbootstrap.com/docs/4.0/components/navbar/
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
원하는 디자인을 골라서 붙여넣기하면이렇게 Navbar가 생긴걸 확인할 수 있다.
다양한 css소스가 있어서 유용하게 사용할 수 있을거같다 !!
하나하나 직접 하면 좋겠지만 내가 구현할 모두의 맛집은 디자인보다는 그밖에 기능에 더 집중하고싶어서
부트스트랩을 선택하게 되었다 화이팅 !