부트스트랩에는 어떤 종류의 탐색 기능이 있나요?
- (*-*)浩원래의
- 2019-07-12 10:37:354407검색
Bootstrap은 기본 레이블 기반 및 캡슐 레이블 탐색, 스택 또는 수직 레이블 기반 및 캡슐 레이블 탐색, 레이블 기반 및 캡슐 레이블 드롭다운 메뉴를 포함한 다양한 탐색을 만들 수 있으며 탐색 목록을 사용하여 생성됩니다. 스택 탐색, JavaScript를 사용하여 클릭 가능한 탐색(다른 방향)을 만듭니다.
기본 탭 (권장 학습: Bootstrap 비디오 튜토리얼)
두 개의 CSS 클래스인 .nav 및 .nav-tabs는 기본 탭 기반 탐색을 만드는 데 사용됩니다. Bootstrap 버전 v2.0.1에서 CSS 클래스 .nav의 스타일은 줄 번호 2176~2220(일부 관련 스타일도 포함)에 선언됩니다. 줄 번호 2222~2267에는 .nav-tabs에 대한 스타일이 포함되어 있습니다.
다음 예에서는 Bootstrap을 사용하여 기본 태그 기반 탐색을 만드는 방법을 보여줍니다.
<div class="container"> <div class="row"> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
기본 캡슐 태그
Bootstrap을 사용하여 기본 태그 기반 탐색을 만드는 방법을 알고 나면 기본 캡슐 태그 기반 탐색을 만드는 것은 쉽습니다. 여기서는 .nav-tabs 클래스를 사용하는 대신 .nav-pills 클래스를 사용하세요. .nav-pills의 스타일은 bootstrap.css의 2222~2224행에 있으며 bootstrap.css의 2268~2280행에서 다시 반복됩니다(마지막 인스턴스에서 사용됨).
다음 예에서는 기본 캡슐 탭 기반 탐색을 만드는 방법을 보여줍니다.
Bootstrap 기본 캡슐 탭 기반 탐색 예
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
스택 또는 수직 탭
스택 또는 수직 탭 기반 탐색을 만들려면 .nav-stacked, .nav 및 .nav-tabs 클래스를 마크업에 추가해야 합니다. 기본값은 가로 탭 기반 탐색을 만드는 것입니다. 줄 번호 2281~2309에는 .nav 스택 스타일이 포함되어 있습니다. 여기에 예가 있습니다.
Bootstrap 스택 또는 수직 탭 기반 탐색 예
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
탭 기반 드롭다운 메뉴
Bootstrap을 사용하여 탭 기반 드롭다운 메뉴 탐색을 만들 수 있습니다. .nav 및 .nav-tabs 클래스와 함께 .dropdown, .dropdown-toggle, .dropdown-menu 및 .caret의 네 가지 CSS 클래스가 필요합니다. bootstrap.css(버전 2.0.1)에서 줄 번호 1545~1547에는 .dropdown 클래스 스타일이 포함되고, 줄 번호 1548~1553에는 .dropdown-toggle 스타일이 포함되며, 줄 번호 1576~1632에는 .dropdown-menu 스타일이 포함됩니다. 줄 번호 1554~1575에는 .caret 스타일이 포함되어 있습니다. 데모 예제에서는 또 다른 CSS 클래스인 .divider도 사용되지만 필수는 아닙니다.
물론 HTML 파일에서 jquery.js, bootstrap-dropdown.js 및 application.js라는 세 가지 JavaScript 파일을 참조해야 합니다. 이들 모두는 docs/assets/js/ 폴더 안에 있습니다.
다음은 예시입니다.
Bootstrap 레이블 기반 드롭다운 메뉴 탐색 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 基于标签的下拉菜单的导航实例</title>
<meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a data-toggle="dropdown" href="#">FrontEnd<b></b></a>
<ul>
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li><a data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>
Bootstrap 관련 기술 기사를 더 보려면 Bootstrap Tutorial 열을 방문하여 알아보세요!
위 내용은 부트스트랩에는 어떤 종류의 탐색 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!