What types of navigation does bootstrap have?-Bootstrap Tutorial-php.cn

What types of navigation does bootstrap have?

(*-*)浩

Release： 2019-07-25 13:06:28

Original

4373 people have browsed it

Bootstrap can create a variety of navigation, including: basic label-based and capsule-label navigation, stacked or vertical label-based and capsule-label navigation, drop-down menus based on labels and capsule labels, Use navigation lists to create stacked navigation and JavaScript to create clickable navigation (different directions).

What types of navigation does bootstrap have?

Basic tags(Recommended learning: Bootstrap video tutorial)

Two CSS classes .nav and .nav-tabs are used to create basic tab-based navigation. In Bootstrap version v2.0.1, styles for CSS class .nav are declared in line numbers 2176 to 2220 (which also contains some related styles). Line numbers 2222 to 2267 contain styles for .nav-tabs.

The following example demonstrates how to use Bootstrap to create a basic tag-based navigation.

<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>

Copy after login

Basic Capsule Tags

Once you know how to create basic tag-based navigation with Bootstrap, creating basic capsule-based tag navigation is as simple as It seems easy. Instead of using .nav-tabs class here, use .nav-pills class. The styles for .nav-pills are located in bootstrap.css at lines 2222 to 2224, repeated again in bootstrap.css at lines 2268 to 2280 (used in the last instance).

The following example demonstrates how to create a basic capsule-tab-based navigation.

Bootstrap basic navigation example based on capsule tags

<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>

Copy after login

Stacked or vertical tags

To create stacked or vertical based on For tabbed navigation, you must add .nav-stacked, .nav and .nav-tabs classes to your markup, which defaults to creating horizontal tab-based navigation. Line numbers 2281 to 2309 contain the .nav-stacked style. Here is an example.

Bootstrap stacked or vertical tab-based navigation example

<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>

Copy after login

Tab-based drop-down menu

You can create a tab-based drop-down using Bootstrap Menu navigation. There are four CSS classes - .dropdown, .dropdown-toggle, .dropdown-menu and .caret - that you need, along with the .nav and .nav-tabs classes. In bootstrap.css (version 2.0.1), line numbers 1545 to 1547 contain the .dropdown class style, line numbers 1548 to 1553 contain the .dropdown-toggle style, and line numbers 1576 to 1632 contain the .dropdown-menu style, line numbers 1554 to 1575 contain the .caret style. In the demo example, another CSS class .divider is also used, but is not required.

Of course, you need to reference three JavaScript files in your HTML file - jquery.js, bootstrap-dropdown.js, and application.js. All of these are located inside the docs/assets/js/ folder.

The following is an example.

Bootstrap Label-based drop-down menu navigation example

<!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>

Copy after login

For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of What types of navigation does bootstrap have?. For more information, please follow other related articles on the PHP Chinese website!