Bootstrap 的导航元素和 Well 详解【前端 Bootstrap 框架】

作者：黎燃

2022 年 7 月 26 日
本文字数：1099 字
阅读完需：约 4 分钟

Well

Well 是一种容器，可以引起内容抑制显示或插图效果。要创建一口井，只需将内容放入 class.well 的<div>。演示：

<div class="well">黎燃</div>

复制代码

大小：可以使用可选类别 well LG 或 well SM 来更改井的大小。这两个类与一起使用。。这两个类将影响填充。根据使用的类别，well 将显示得更大或更小。

<!DOCTYPE html><html><head>  <meta charset="utf-8">   <title>Bootstrap 实例 - Well 的尺寸大小</title>  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
<div class="well well-lg">黎燃</div><div class="well well-sm">黎燃</div>
</body></html>

复制代码

这两个类将影响填充。根据使用的类别，well 将显示得更大或更小运行结果如下：

导航元素

表格导航或标签创建选项卡式导航菜单：从 class.Nav 的无序列表开始。添加类。导航选项卡。

<p>标签式的导航菜单</p><ul class="nav nav-tabs">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">SVN</a></li>  <li><a href="#">iOS</a></li>  <li><a href="#">VB.Net</a></li>  <li><a href="#">Java</a></li>  <li><a href="#">PHP</a></li></ul>

复制代码

导航元素运行结果如下：

胶囊导航菜单基本胶囊导航菜单如果需要将标签更改为胶囊样式，则只需要使用类。Nav 药片代替。导航标签，其他步骤同上。基本的胶囊式导航菜单如图：

对齐导航可以使用。导航标签或。导航药丸使用类。同时调整导航，使选项卡式或胶囊式导航菜单与父元素一样宽。在较小的屏幕上，导航链接堆叠在一起。

禁用链接对于每个。导航类，如果添加了.Disabled 类，将创建一个灰色链接，并且链接的：悬停状态将被禁用，如以下示例所示：

<p>导航元素中的禁用链接</p><ul class="nav nav-pills">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">SVN</a></li>  <li class="disabled"><a href="#">iOS（禁用链接）</a></li>  <li><a href="#">VB.Net</a></li>  <li><a href="#">Java</a></li>  <li><a href="#">PHP</a></li></ul><br><br><ul class="nav nav-tabs">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">SVN</a></li>  <li><a href="#">iOS</a></li>  <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>  <li><a href="#">Java</a></li>  <li><a href="#">PHP</a></li></ul>