부트스트랩에는 어떤 종류의 탐색 기능이 있나요?-부트스트랩 튜토리얼-php.cn

부트스트랩에는 어떤 종류의 탐색 기능이 있나요?

(*-*)浩

풀어 주다： 2019-07-25 13:06:28

원래의

4449명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!