부트스트랩 내비게이션 바 각 요소(폼, 버튼, 텍스트) 조작 방법_자바스크립트 스킬
- WBOY원래의
- 2016-05-16 15:22:581520검색
이 글은 크게 세 가지 측면을 담고 있으니 주의 깊게 읽어보시기 바랍니다.
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 클래스를 사용하여 ff9c23ada1bcecdd1a0fb5d5a0f18437 내부에 없는 bb9345e55eb71822850ff156dfde57c8 요소에 버튼을 추가할 수 있으며, 버튼은 navbar의 수직 중앙에 위치합니다. .navbar-btn은 3499910bf9dac5ae3c52d5ede7383485 및 d5fd7aea971a85678ba271703566ebfd 요소에 사용할 수 있습니다.
표준 버튼 클래스가 아니므로 .navbar-nav 내부의 3499910bf9dac5ae3c52d5ede7383485 요소에 .navbar-btn을 사용하지 마세요.
다음 예에서는 이를 보여줍니다.
<!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-inverse" 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>
<button type="button" class="btn btn-default navbar-btn">
导航栏按钮
</button>
</div>
</nav>
</body>
</html>
효과는 다음과 같습니다.
3. 네비게이션 바의 텍스트
탐색에 텍스트 문자열을 포함해야 하는 경우 .navbar-text 클래스를 사용하세요. 이는 일반적으로 e388a4556c0f65e1904146cc1a846bee 태그와 함께 사용되어 적절한 행간 및 색상을 보장합니다. 다음 예에서는 이를 보여줍니다.
<div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <p class="navbar-text">导航栏中的文本</p> </div> <div>
효과는 다음과 같습니다.
위 내용은 이 글의 전체 내용입니다. 모두가 부트스트랩 네비게이션 바를 더욱 능숙하게 구현할 수 있도록 모두의 학습에 도움이 되기를 바랍니다.