부트스트랩 내비게이션2 내비게이션바
기본 구조는 아래와 같습니다.
<header class="navbar">
<nav>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</nav>
</header>배경색상을 추가하여 영역을 구분합니다.
<header class="navbar bg-light">반응형웹 내비게이션 바
반응형웹을 적용하여 필요한 디바이스 크기에 따라 내비게이션을 수직/수평으로 배치할 수 있습니다.
.navbar-expand-xl , lg , md , sm
<header class="navbar navbar-expand-sm">
<!--small screen일 경우(모바일) 내비게이션을 수직으로 배치합니다.-->
내비게이션 바 가운데정렬
가운데 정렬 시 .justify-content-center 클래스를 적용합니다.
<header class="navbar navbar-expand-sm bg-light justify-content-center">
내비게이션 바 로고
.navbar-brand 브랜드/로고/프로젝트명으로 사용합니다.
<h1 class="navbar-brand"><a href="#">Logo</a></h1>
모바일 내비게이션 바
모바일로 적용하고자 하는 button 요소에 클래스로 navbar-toggler을 적용하고 이어서
data-toggle="collapse" data-target="#내비게이션아이디명"을 작성합니다.
button 내부에는 span을 추가하여 navbar-toggler-icon 클래스명을 적용합니다.
모바일 내비게이션 바(아이디 호출)
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#호출아이디명">
<span class="navbar-toggler-icon"></span>
</button>기본 내비게이션 바(아이디 지정)
<div class="collapse navbar-collapse" id="아이디지정">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
내비게이션 바 검색 폼
form 요소와 class="form-inline" 등을 그룹화하여 사용합니다.
form-control 클래스를 적용하면 input 요소를 간편하게 디자인처리할 수 있습니다.
<form class="form-inline" action="#" method="post">
<input class="form-control" type="text">
<button class="btn" type="submit">검색</button>
</form>
내비게이션 바 일반텍스트
navbar-text 클래스를 사용해 일반 문자를 내비게이션에 사용합니다.
<span class="navbar-text">Navbar text</span>
내비게이션 바 고정 레이아웃
position:fixed를 활용하여 fixed-top을 이용하여 페이지 상단에 내비게이션을 고정합니다.
<nav class="navbar fixed-top"></nav>position:fixed를 활용하여 fixed-bottom을 이용하여 페이지 하단에 내비게이션을 고정합니다.
<nav class="navbar fixed-bottom"></nav>
스크롤을 내리면 고정되는 내비게이션 레이아웃
<nav class="navbar sticky-top"></nav>
Comments, Trackbacks