Bootstrap 导航

时间：2014-05-08 12:54:06 阅读：554 评论：0 收藏：0 [点我收藏+]

在本文中，您将学习如何使用 Bootstrap 工具包来创建基于导航、标签、胶囊式标签的导航。

基于标签的导航

nav nav-tabs

<!DOCTYPE html> 
<html lang="en"> 
<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"> 
</head>
<body>
<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>
</body>
</html>

效果如图:

bubuko.com,布布扣

胶囊式标签导航

nav nav-pills

<!DOCTYPE html> 
<html lang="en"> 
<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"> 
</head>
<body>
<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>
</body>
</html>

View Code

效果如图:

bubuko.com,布布扣

堆叠的或垂直的标签

nav nav-tabs nav-stacked

<!DOCTYPE html> 
<html lang="en"> 
<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"> 
</head>
<body>
<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>
</body>
</html>

View Code

效果如图:

bubuko.com,布布扣

Bootstrap 堆叠的或垂直的基于胶囊式标签的导航实例

nav nav-pills nav-stacked

<!DOCTYPE html> 
<html lang="en"> 
<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"> 
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span2">
            <ul class="nav nav-pills 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>
</body>
</html>

View Code

效果如图:

bubuko.com,布布扣

Bootstrap 基于标签的下拉菜单的导航实例

dropdown-menu bottom-up pull-right

<!DOCTYPE html> 
<html lang="en"> 
<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 class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a class="dropdown-toggle" 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 class="divider"></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>

View Code

效果如图:

bubuko.com,布布扣

Bootstrap 导航,布布扣,bubuko.com

Bootstrap 导航

原文：http://www.cnblogs.com/LT0314/p/3714010.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)