Bootstrap Web 만들기 part. 2 Navbar 만들기

Bootstrap Web 만들기 part. 2 Navbar 만들기

 

Navbar 에 들어가는 메뉴를 생성한다. 

이제부터 bootstrap navbar 에 대한 스타일을 적용한다. 

화면의 크기가 md 설정보다 작은 경우,  세로로 메뉴가 보이게 된다. 

다음은 회사의 메뉴에 로고를 추가해보자. 

 

메뉴 스타일 변경 

 - 메뉴 로고 사이즈 2배 : fa-2x

 - 매뉴 배경 어둡게 : bg-dark

 - 메뉴 아이템 밝게 : text-light

 - 메뉴 아이템 대문자 표시 : text-uppercase

 - 메뉴 아이템 볼드 : text-weight-bold

 - 좌우 pading 3 적용 : px-3

 

 

Dropdown 메뉴 추가하기 

 

Projects 메뉴아래 서브메뉴 추가한다. 

dropdown-toggle : 하위 메뉴가있다는 것을 표시해 주는 아이콘 추가

메뉴에 Search form 추가하기 

 

 

다음은 화면크기에 따라서 메뉴를 숨기는 기능을 추가한다. 

 

마지막에 위치한 Search 모듈의 위치를 약한 오른쪽으로 이동해서 라인을 맞춘다. 

 

 

페이지 스크롤 다운해도 항상 메뉴바가 화면에 보이도록 설정 

- fixed-top 

 

기본 메뉴에 대한 구현 끝...