bootstrap有哪几种导航


当前第2页 返回上一页

当然,您需要在 HTML 文件中引用三个 JavaScript 文件 - jquery.js、bootstrap-dropdown.js 和 application.js。所有这些都位于 docs/assets/js/ 文件夹内。

下面是一个实例。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!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教程栏目进行学习!

以上就是bootstrap有哪几种导航的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

bootstrap 模态框用法

bootstrap.css样式表是什么

为什么不用bootstrap

bootstrap是哪家开发的

bootstrap4和bootstrap3的区别是什么

bootstrap如何设置鼠标悬停提示

浅谈bootstraptable+jstree插件对树列表条件和查询条件的处理

bootstrap怎么更改主题

bootstrap怎么适配

bootstrap基本样式介绍

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...