이 글의 목적: 부트스트랩 탐색 표시줄과 반응형 구현을 분석하여 프로그래밍 기술을 더 높은 수준으로 향상시키는 것입니다.
먼저 구현 방법을 분석해 보겠습니다. 부트스트랩 네비게이션 바 템플릿
2. 코드는 다음과 같습니다
1 <nav class="navbar navbar-default navbar-fixed-top"> 2 <div class="container-fluid"> 3 <div class="navbar-header"> 4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5 <span class="sr-only">Toggle navigation</span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 <span class="icon-bar"></span> 9 </button>10 <a class="navbar-brand" href="#">Project name</a>11 </div>12 <div id="navbar" class="navbar-collapse collapse">13 <ul class="nav navbar-nav">14 <li class="active"><a href="#">Home</a> </li>15 <li><a href="#">About</a></li>16 <li><a href="#">Contact</a></li>17 <li class="dropdown">18 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>19 <ul class="dropdown-menu">20 <li><a href="#">Action</a></li>21 <li><a href="#">Another action</a></li>22 <li><a href="#">Something else here</a></li>23 <li role="separator" class="divider"></li>24 <li class="dropdown-header">Nav header</li>25 <li><a href="#">Separated link</a></li>26 <li><a href="#">One more separated link</a></li>27 </ul>28 </li>29 </ul>30 <ul class="nav navbar-nav navbar-right">31 32 </ul>33 </div><!--/.nav-collapse -->34 </div><!--/.container-fluld -->35 </nav>
효과는 다음과 같습니다.
모바일 단말기:
3.
분석하다 외부에서 내부로 각 라벨과 스타일의 역할3.1 가장 바깥쪽 div 컨테이너(스타일은 navbar navbar-default navbar-fixed-top): 소스 코드.navbar { position: relative; min-height: 50px;/**导航条最小宽度为50px**/ margin-bottom: 20px;/****/ border: 1px solid transparent; }@media (min-width: 768px) {/**>=768的设备,其实就是pc,移动设备width属性都小于768px**//**可能有很多人不理解,实际上移动端的width属性是以device-width来计量的,不是单纯的像数的概念,建议有疑问的同学自行搜索device-width关键字**/ .navbar { border-radius: 4px;/****/ }} .navbar-default {/**设备导航栏的配色**/ background-color: #f8f8f8; border-color: #e7e7e7; }.navbar-fixed-top, .navbar-fixed-bottom { position: fixed;/**相对浏览器定位**/ right: 0; left: 0; z-index: 1030;/**样式层叠在上层的优先级**/ }소스에서 볼 수 있음 코드에서 가장 바깥쪽 div 컨테이너의 주요 기능은 브라우저(.navbar-fixed-top)를 기준으로 위치가 지정되고 높이가 50px인 최소 A 막대 컨테이너(.navbar)를 생성하고 탐색 막대의 색상을 결정하는 것입니다( .navbar-default) device-width 관련 지식은 이 글을 참고하세요 3.2 navbar-header 스타일의 div 컨테이너Css 소스 코드는 다음과 같습니다
<br>
/**在pc端显示时向右浮动,在移动端此样式无效**/
@media (min-width: 768px) { .navbar-header { float: left; }}이의 표시 효과 PC와 모바일에서의 div는 다음과 같습니다PC: Mobile:
PC측에서는 브라우저 너비가 충분하고 이 div는 작은 블록으로만 존재한다는 것을 알 수 있습니다- 레벨 요소; 모바일 측에서는 화면 너비가 충분하지 않기 때문에 탐색 표시줄의 다른 요소가 드롭다운 메뉴 형태로 구현되며 이 div만 상위 컨테이너를 채웁니다. navbar-header 아래에는 두 개의 단어 요소가 있습니다. navbar-toggle 스타일의