Bootstrap 垂直标签页项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00830/article/details/141841510

Bootstrap 垂直标签页项目教程

bootstrap-vertical-tabsMissing vertical tabs component for bootstrap.项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-vertical-tabs

1. 项目的目录结构及介绍

bootstrap-vertical-tabs/
├── css/
│   ├── bootstrap-vertical-tabs.css
│   └── bootstrap-vertical-tabs.min.css
├── js/
│   ├── bootstrap-vertical-tabs.js
│   └── bootstrap-vertical-tabs.min.js
├── index.html
├── README.md
└── LICENSE

css/ 目录包含项目的样式文件，包括压缩和未压缩版本。
js/ 目录包含项目的JavaScript文件，包括压缩和未压缩版本。
index.html 是项目的示例页面。
README.md 是项目的说明文档。
LICENSE 是项目的许可证文件。

2. 项目的启动文件介绍

index.html 是项目的启动文件，它展示了如何使用 Bootstrap 垂直标签页组件。以下是 index.html 的部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Vertical Tabs</title>
    <link rel="stylesheet" href="css/bootstrap-vertical-tabs.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="vertical-tab">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-9">
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <h3>Tab 1 Content</h3>
                        <p>This is the content for Tab 1.</p>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <h3>Tab 2 Content</h3>
                        <p>This is the content for Tab 2.</p>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <h3>Tab 3 Content</h3>
                        <p>This is the content for Tab 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/bootstrap-vertical-tabs.js"></script>
</body>
</html>