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 blazor组件的使用方法

bootstrap-select下拉框如何清除选中的状态?

如何去掉bootstrap模态框的遮罩层

bootstrap 怎么安装

bootstrap table实现定时刷新数据的方法

bootstrap怎么实现圆角

bootstrap什么时候出来的

bootstrap是什么框架

如何解决bootstrap 图标不显示的问题

bootstrap中如何设置表单的宽高

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




打赏

取消

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

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

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

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

评论

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