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

Bootstrap은 기본 레이블 기반 및 캡슐 레이블 탐색, 스택 또는 수직 레이블 기반 및 캡슐 레이블 탐색, 레이블 기반 및 캡슐 레이블 드롭다운 메뉴를 포함한 다양한 탐색을 만들 수 있으며 탐색 목록을 사용하여 생성됩니다. 스택 탐색, JavaScript를 사용하여 클릭 가능한 탐색(다른 방향)을 만듭니다.

기본 탭 (권장 학습: Bootstrap 비디오 튜토리얼)

두 개의 CSS 클래스인 .nav 및 .nav-tabs는 기본 탭 기반 탐색을 만드는 데 사용됩니다. Bootstrap 버전 v2.0.1에서 CSS 클래스 .nav의 스타일은 줄 번호 2176~2220(일부 관련 스타일도 포함)에 선언됩니다. 줄 번호 2222~2267에는 .nav-tabs에 대한 스타일이 포함되어 있습니다.

다음 예에서는 Bootstrap을 사용하여 기본 태그 기반 탐색을 만드는 방법을 보여줍니다.

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

기본 캡슐 태그

Bootstrap을 사용하여 기본 태그 기반 탐색을 만드는 방법을 알고 나면 기본 캡슐 태그 기반 탐색을 만드는 것은 쉽습니다. 여기서는 .nav-tabs 클래스를 사용하는 대신 .nav-pills 클래스를 사용하세요. .nav-pills의 스타일은 bootstrap.css의 2222~2224행에 있으며 bootstrap.css의 2268~2280행에서 다시 반복됩니다(마지막 인스턴스에서 사용됨).

다음 예에서는 기본 캡슐 탭 기반 탐색을 만드는 방법을 보여줍니다.

Bootstrap 기본 캡슐 탭 기반 탐색 예

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

스택 또는 수직 탭

스택 또는 수직 탭 기반 탐색을 만들려면 .nav-stacked, .nav 및 .nav-tabs 클래스를 마크업에 추가해야 합니다. 기본값은 가로 탭 기반 탐색을 만드는 것입니다. 줄 번호 2281~2309에는 .nav 스택 스타일이 포함되어 있습니다. 여기에 예가 있습니다.

Bootstrap 스택 또는 수직 탭 기반 탐색 예

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>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 레이블 기반 드롭다운 메뉴 탐색 예

nbsp;html> 


    <meta>
    <title>Bootstrap 基于标签的下拉菜单的导航实例</title>
    <meta>
    <link>
    <style>
        .container {
            margin-top: 200px;
        }
    </style>


<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li>
<a>FrontEnd<b></b></a>
                    <ul>
                        <li><a>Twitter Bootstrap</a></li>
                        <li><a>Google Plus API</a></li>
                        <li><a>HTML5</a></li>
                        <li>
                        <li><a>Examples</a></li>
                    </ul>
                </li>
                <li>
<a>BackEnd<b></b></a>
                    <ul>
                        <li><a>PHP</a></li>
                        <li><a>MySQL</a></li>
                        <li><a>PostgreSQL</a></li>
                        <li>
                        <li><a>Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script></script>
<script></script>
<script></script>

Bootstrap 관련 기술 기사를 더 보려면 Bootstrap Tutorial 열을 방문하여 알아보세요!

위 내용은 부트스트랩에는 어떤 종류의 탐색 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!