반응형
부트스트랩(Bootstrap)이란?
부트스트랩은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크이다.
트위터에서 개발된 이 프레임워크는 HTML, CSS, JavaScript를 기반으로 하여, 반응형 웹 디자인과 다양한 컴포넌트, 그리드 시스템 등을 제공하여 개발자들이 빠르고 효율적으로 웹 페이지를 개발하고 디자인할 수 있도록 도와준다.
부트스트랩(Bootstrap) 사용 방법
부트스트랩을 사용하는 방법으로는 부트스트랩을 직접적으로 다운로드하여서 자신의 환견에 위치시킨 후 사용하는 방법과, npm을 통해서 설치하는 방법, 그리고 CDN(Content Delivery Network)을 사용하는 방법이 있다.
CDN이란 html 파일에서 참조하는 css, javascript 파일을 웹사이트 서버가 아닌 다른 공유 공간에 두고 여러 웹사이트가 사용할 수 있게 하는 서비스이다. 웹사이트를 구축할 때, 별도의 다운로드가 필요 없고 페이지 로딩 속도가 빠르다는 장접이 있다. 하지만 단점으로는 CDN을 제공하는 서버가 다운된다면 구축한 웹페이지는 CDN을 사용하지 못할 수 있고 부트스트랩이 없는 웹페이지를 보게 될 것이다.
1. 부트스트랩 CDN 연결 방법
1. 부트스트랩 홈페이지에 접속한 후에 홈페이지 하단의 CDN 코드를 복사한다.
2. <head> 태그 안에 붙여 넣기 해준다.
3. 부트스트랩 홈페이지에서 필요한 소스를 복사하여 사용한다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
반응형
