부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-13

네비게이션 바 : 빠른 메뉴 이동을 위한 바를 의미한다.

부트스트랩으로 생성된 페이지는 이러한 형태를 유지하고 있다. 

예제

 

 

code

screen

또 실행 안됨..

screen MB

출력 안 되어서 코드 리뷰 

오탈자 수정

code 수정

screen

브랜드 이미지 추가하기

code

screen

이런 식으로 가져온 이미지가 원하는 사이즈로 안들어가면

원래 이미지를 조정하거나

CSS를 추가하여 조정할 수 있다.

CSS

screen

텍스트 추가하기

code

CSS

HTML

screen

????? 

수정 code

HTML

screen

일반 링크 추가하기

code

screen

콤포넌트 정렬 component alignment

.navbar-left 나 .navbar-right를 사용하여 버튼, 네비게이션링크, 폼 텍스트를 정렬한다.

상단이나 하단에 고정하기 위해 .navbar-fixed-top 이나 .navbar-fixed-bottom 을 사용한다.

code 

.navbar-fixed-top 클래스 추가

href에 이동하려는 id추가

본문에 id 클래스, 클래스명 추가

screen

problem : 상단 바 때문에 첫번째 컨텐츠가 안 보인다.

solution :  바디에 패딩값을 준다. 단, 반듣시 부트스트랩 CSS보다 뒤쪽에 넣어준다.

 

네이게이션 바 하단에 고정시키기

code

screen

네비게이션바 스타일 반전시키기

기존의 색상이 반전되는 클래스 명 : .navbar-inverse

code

screen

부트스트랩에서 네비게이션 바는 모바일 뷰에서 가려진 상태(토글가능)로 시작하며 가능한 뷰포트 너비가 되었을 때는 수평적으로 펼쳐진다.

네비게이션 바를 만드는 방법은 nav태그에 .navbar클래스명을 추가한 제공되는 소스를 활용하여 그 안에 네비게이션 메뉴와 search메뉴 등 컨텐츠를 필요한 대로 추가한다.

브랜드 텍스트 대신에 이미지를 추가하려면 .navbar-brand안에 <img>태그를 추가하여 로고 이미지를 넣는다.

네비게이션 상단에 고정된 스타일을 만드려면 .navbar에 .navbar-fixed-top을 추가하며 하단에 고정된 스타일을 만드려면 .navbar-fixed-bottom을 추가한 후 필요한 padding 값을  body에 추가한다.

참고

http://bootstrapk.com/components/#navbar