부트스트랩 내비게이션 바 각 요소(폼, 버튼, 텍스트) 조작 방법

부트스트랩 내비게이션 바 각 요소(폼, 버튼, 텍스트) 조작 방법_자바스크립트 스킬

WBOY

풀어 주다： 2016-05-16 15:22:58

원래의

1542명이 탐색했습니다.

이 글은 크게 세 가지 측면을 담고 있으니 주의 깊게 읽어보시기 바랍니다.

1. 네비게이션 바의 양식
탐색 모음의 양식은 부트스트랩 양식 장에서 언급한 기본 클래스를 사용하지 않고 .navbar-form 클래스를 사용합니다. 이렇게 하면 더 좁은 뷰포트에서 양식의 적절한 수직 정렬과 축소 동작이 보장됩니다. 정렬 옵션(구성 요소 정렬 섹션에 자세히 설명되어 있음)을 사용하여 탐색 모음의 콘텐츠가 배치될 위치를 결정하세요.

다음 예에서는 이를 보여줍니다.

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        下拉菜单 
        <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
        <li><a href="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">搜一下</button> 
   </form>   
  </div> 
</nav> 
</body> 
</html>

로그인 후 복사

효과:

검은색 효과

2. 네비게이션 바의 버튼
.navbar-btn 클래스를 사용하여

내부에 없는