Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

简介:   Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:   1、导航条中的按钮navbar-btn   2、导航条中的文本navbar-text   3、导航条中的普通链接navbar-link   但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。

 

  Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:

  1、导航条中的按钮navbar-btn

  2、导航条中的文本navbar-text

  3、导航条中的普通链接navbar-link

  但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

 

  

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <ul class="nav navbar-nav">
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
     </ul>
</div>

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <div class="nav navbar-nav">
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
     </div>
</div>

 

相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
|
20天前
Bootstrap5 侧边栏导航(Offcanvas)3
通过设置 `data-bs-scroll` 和 `data-bs-backdrop` 属性,可以控制侧边栏弹出时元素的滚动行为和背景画布的显示。示例中展示了不同配置下的滚动效果和背景画布的使用方法。
|
21天前
|
JavaScript 前端开发
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle=&quot;offcanvas&quot;` 属性,可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。
|
20天前
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏可通过`.offcanvas-start`、`.offcanvas-end`、`.offcanvas-top`和`.offcanvas-bottom`类分别设置在页面的左、右、顶、底位置。示例代码展示了如何使用这些类创建不同方向的侧边栏,包括按钮触发和内容区域的定义。
|
28天前
Bootstrap5 导航7
胶囊状动态选项卡通过设置 `data-bs-toggle=&quot;pill&quot;` 实现,包含导航项和内容区两部分。导航项使用 `&lt;ul class=&quot;nav nav-pills&quot;&gt;` 定义,每个选项链接到对应的内容区,实现点击切换显示的效果。内容区由多个 `&lt;div class=&quot;tab-pane&quot;&gt;` 组成,根据导航项的选择显示相应内容。
|
28天前
Bootstrap5 导航6
动态选项卡允许用户通过点击链接切换不同内容。在每个链接上添加 `data-bs-toggle=&quot;tab&quot;` 属性,并在对应内容的 `&lt;div&gt;` 标签中使用 `.tab-pane` 和 `.tab-content` 类。若需淡入效果,可在 `.tab-pane` 后添加 `.fade` 类。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
|
29天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。