当前位置: 首页 > 知识库问答 >
问题:

bootstrap,怎么在导航栏右边加个按钮?

姬念
2023-09-18

怎么在导航栏右边加个按钮

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script></head><body  style="height:1500px"><nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  <a class="navbar-brand" href="#">Logo</a>  <ul class="navbar-nav">    <li class="nav-item">      <a class="nav-link" href="#">Link</a>    </li>    <li class="nav-item">      <a class="nav-link" href="#">Link</a>    </li>  </ul></nav><div class="container-fluid" style="margin-top:80px">  <p></p></div></body></html>

共有1个答案

戚峻
2023-09-18
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script></head><body style="height:1500px">  <nav class="navbar navbar-expand-lg bg-body-tertiary">    <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">      <li class="nav-item">        <a class="nav-link active" aria-current="page" href="#">Home</a>      </li>    </ul>    <form class="d-flex" role="search">      <button class="btn btn-outline-success" type="submit">Search</button>    </form>  </nav></body></html>

image.png

官方也有示例的:

https://www.getbootstrap.cn/docs/5.3/components/navbar/
image.png
 类似资料:
  • 本文向大家介绍bootstrap侧边栏圆点导航,包括了bootstrap侧边栏圆点导航的使用技巧和注意事项,需要的朋友参考一下 如图,随页面向下滑动,到指定页面后圆点变成白色,也可以通过点击圆点跳转到某个位置。 这是四个部分。 这是导航, 这是导航的样式,使其浮动在页面右侧。 在这种情况下,已经可以点击圆点跳转到某个页面,只是圆点的颜色还没有设定好。 select和default决定小圆点的颜色。

  • 主要内容:默认的导航栏,实例,响应式的导航栏,实例,导航栏中的表单,实例,导航栏中的按钮,实例,导航栏中的文本,实例,结合图标的导航链接,实例,组件对齐方式,实例,固定到顶部,实例,固定到底部,实例,静态的顶部,实例,反色的导航栏,实例导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基

  • ap.hideOptionButton() 隐藏导航栏右侧按钮。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">显示多个按钮</button> <button

  • ap.showOptionButton() 显示导航栏右侧按钮。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">显示 optionButton</button

  • ap.setOptionButton(OPTION | items, CALLBACK) 设置导航栏右侧按钮。 OPTION 参数说明 名称 类型 必填 描述 onClick Function 否 监听 optionButton 点击事件 reset Boolean 否 重置到系统默认按钮,默认为 false。当为 true 时,忽略其他参数 preventDefault Boolean 否 是否

  • 导航和侧边栏 引用网站文档 如果你想在 docs 文件夹中引用另一个文档(或者你通过可选 customDocsPath路径站点配置选项设置的位置),那么你只需要使用你想引用的文档名称。 例如,如果你在 doc2.md 中,而你想引用 doc1.md: 这里引用了一个 [文档](doc1.md). Docusaurus 目前不支持嵌套文件夹中的文件; 只能是在一个平面文件结构中。 我们正在考虑添加