Bootstrap的导航元素和Well详解【前端Bootstrap框架】
【摘要】 WellWell是一种容器，可以引起内容抑制显示或插图效果。要创建一口井，只需将内容放入class.well的<div>。演示：<div class="well">黎燃</div>大小：可以使用可选类别well LG或well SM来更改井的大小。这两个类与一起使用。。这两个类将影响填充。根据使用的类别，well将显示得更大或更小。<!DOCTYPE html><html><head> <...
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>
禁用链接运行结果如下：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区），文章链接，文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：cloudbbs@huaweicloud.com进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
- 点赞
- 收藏
- 关注作者
评论（0）