bootstrap3 - 导航（基础样式）

最新推荐文章于 2025-05-21 12:17:01 发布

weixin_34138377

最新推荐文章于 2025-05-21 12:17:01 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/iNiL0119/blog/511952

本文介绍如何使用Bootstrap框架创建导航条，并提供了具体的代码示例。通过为ul元素添加.nav和特定的样式类（如nav-tabs），可以轻松实现不同样式的导航条。

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

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航（基础样式）</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li><a href="##">Responsive</a></li>
  </ul>
  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

...
<ul class="nav nav-pills>
...

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。

转载于:https://my.oschina.net/iNiL0119/blog/511952