bootStrap实现导航栏

最新推荐文章于 2025-03-17 14:39:13 发布

嘘 -你听

最新推荐文章于 2025-03-17 14:39:13 发布

阅读量2.2k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44657829/article/details/106061354

版权

java 同时被 3 个专栏收录

38 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现导航栏和Tab面板的方法，通过Bootstrap框架简化布局和交互。示例展示了如何创建一个包含Java、C语言和Python选项卡的导航栏，每个选项卡下都有相应的简介。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.css">

</head>
<body>

<div class="container">
    <div class="col-lg-6 col-lg-offset-3">
        <ul class="nav  nav-tabs nav-pills nav-justified">
            <!--   pills横向 nav-stacked纵向排列-->
            <li  ><a href="#java" data-toggle="tab">Java</a></li>
            <li ><a href="#C语言" data-toggle="tab">C语言</a></li>
            <li  ><a href="#Python" data-toggle="tab">Python</a></li>
        </ul>
        <div class="tab-content">
            <div id="java" class="tab-pane">
                Java是由Sun公司于1995年5月推出的面向对象的程序设计语言。Java继承了C++语言面向对象技术的核心，又舍弃了C++语...
            </div>
            <div id="C语言" class="tab-pane">
                C语言是一门面向过程、抽象化的通用程序设计语言，广泛应用于底层开发。C语言具有高效、灵活、功能丰富、表达力强和较高的可移植性等特点，在程序设计中备受...
            </div>
            <div id="Python" class="tab-pane">
                Python是一种计算机程序设计语言，由吉多·范罗苏姆创造，第一版发布于1991年，可以视之为一种改良的LISP。Python的...
            </div>

        </div>
    </div>
</div>


</body>
</html>