浅谈对Bootstrap的看法之二（下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框）

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量6.2k 收藏 25
点赞数 1
分类专栏： Bootstrap 文章标签： Bootstrap 前端开发 下拉菜单 轮播图 导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42451979/article/details/80741028
版权
1.下拉菜单相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。主要代码：<div class="dropdown"> <button type="button" class="btn btn-primary
摘要由CSDN通过智能技术生成

1.下拉菜单

相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。

主要代码：

<div class="dropdown">
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      HTML
		    </button>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">HTML 教程</a>
		      <a class="dropdown-item" href="#">HTML 简介</a>
		      <a class="dropdown-item" href="#">HTML 基础</a>
		    </div>
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      CSS
		    </button>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">CSS 教程</a>
		      <a class="dropdown-item" href="#">CSS 简介</a>
		      <a class="dropdown-item" href="#">CSS 基础</a>
最低0.47元/天 解锁文章
吉帅振的网络日志
关注
  • 1
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap模态框在按钮右侧弹出_ANSYS入门案例梁的模态分析
weixin_30989967的博客
01-16 541
问题描述：一简支梁截面为矩形，如图1所示，几何尺寸及材料特性如下，分析其前三阶固有频率及振型。 几何参数：材料参数如下：密度，弹性模量图1 模型示意图下面分别是利用菜单操作和命令流方式进行有限元分析的方法一、GUI菜单操作如下：第一步，清除内存准备分析 清除内存：GUI：UtilityMenu>File>Clear& Start New 更换工作文件名：GUI：Ut...
bootstrap中input框清除按钮
07-11
bootstrap input 框 清除 小插件、很简单的一个小的js，引入即可。省时省力。
Bootstrap插件之模态框&工具提示&标签页&滚动监听
andrew_dear的博客
03-01 329
模态框 基本实例 使用模态框的弹窗组件需要以下三层div容器元素： 分别是modal(模态声明层)、dialog(窗口声明层)、content(内容层)； 在内容层里面，还有分层，分别是 header(头部)、body(主体)、footer(注脚) 语法格式 /* 模态框声明 */ <div class="modal" id=""> /*窗口声明 */ <div class="modal-dialog"> /* 内容声明 */ <div class="modal
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
林林一928的博客
06-03 821
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
Bootstrap 3 modal导致页面出现右边距
hua_ban_yu的博客
11-13 1887
使用bootstrap框架制作弹出框页面时发现，打开model弹出框页面右边出现一个边距，关闭弹出框后这个边距还是不会消失，非常影响页面美观。 产生这个边距是由于打开modal时给body添加的modal-open类，默认的overflow为hidden导致滚动调消失，同时又为body添加了一个padding-right:12px的右边距。 解决方法：设置modal-open样式为： .mo
bootstrap模态窗
浮生不觉梦的博客
04-10 245
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <script src="../day24/jquery-ui/jquery-3.1.0.js">
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
09-01
Bootstrap 包含了大量的预定义样式、表单控件、导航组件、下拉菜单、轮播、模态框以及栅格系统等，极大地简化了网页开发流程。 导航条(Navigation Bar) Bootstrap 的导航条组件是创建网站顶部导航的关键元素。通过...
简单实现bootstrap导航效果
08-31
在示例中，没有包含导航栏的折叠功能，但如果希望在小屏幕上将导航链接折叠成下拉菜单，可以添加`navbar`类和相关的按钮元素。 为了使导航具有交互性，例如点击切换活动标签，还需要引入Bootstrap的JavaScript插件...
bootstrap响应式宽屏图书教育网站模板-DREAMLIFE.zip
11-17
8. **插件集成**：为了增强用户体验，模板可能集成了各种Bootstrap插件，比如轮播组件、模态框、下拉菜单等。 9. **SEO优化**：教育类网站需要考虑搜索引擎友好，DREAMLIFE可能已经包含了元标签和其他SEO最佳实践。...
Bootstrap每天必学之导航
11-24
Bootstrap还提供了导航条的其他变体，如`.navbar`类用于创建顶部固定或内嵌的导航栏，`.navbar-toggle`用于响应式导航的折叠按钮。同时，`dropdown`类可用于创建下拉菜单，使导航更富功能。 在实际项目中，开发者...
bootstrap整体架构图、组件类型、插件实现步骤
最新发布
06-19
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的预设样式、组件和JavaScript插件，使得构建响应式和移动设备优先的网站变得容易。在深入理解Bootstrap的整体架构之前，我们先来了解一下其核心...
Bootstrap 模态框（Modal）插件
包子源的博客
11-16 1421
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或href=
bootstrap modal 关闭时右侧滚动条消失，页面左移的解决方法
mengzuchao的专栏
05-25 2306
Bootstrap Modal 关闭时右侧滚动条消失，页面左移的解决方法问题描述：页面在打开Modal之前右侧有滚动条，Modal关闭之后，body中的class="modal-open"和style="padding-right: 17px;"并未被移除，导致滚动条消失，并且页面左移，打开并关闭Modal一次，页面左移一次，一直累加。body中被添加的class和样式未被移除的原因一直未找到，目...
Bootstrap|模态框
准提童子的专栏
09-26 473
1. 效果：从一个主页面中，点击某个按钮，弹出另外一个小页面，称为模态框 2. 主页面，两个元素：事件按钮，加载模态框的div &lt;button type="button" id="open_modal" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-original-title="" title=..
bootstrap页面左侧导航栏 右侧网页
热门推荐
知世俗而不世俗
12-17 4万+
我们在浏览网页的时候，左侧导航栏，右侧网页的页面很常见，那么你有好奇过那些炫酷好看的页面是怎么做的吗？ 下面小编带你了解一下这种页面是怎么做的。 首先介绍一下用的框架：Asp.net mvc+EF+BootStrap 第一步把asp.net mvc的框架搭建起来，具体的步骤在此就不过多的介绍了（网上有很多的教程）。第二步把数据库用EF映射到程序中，具体步骤在此也不过多介绍了。第三步web
bootstrap中的模态框（modal，弹出层）
极客神殿
12-31 2967
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。 务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。 默认的modal示例： [html] view plain copy 在CODE上查看代码片派生到我的代码片 ...
Bootstrap3 模态框（modal）bug，padding-right：17px
F_mustang的博客
05-27 1235
在使用Bootstrap3 模态框（modal）组件的时候发现一个bug 。 问题描述： 点出模态框时，滚动条消失，多了.modal-open类，和padding-right：17px。 问题分析： 问题在于b3源码中的.modal-open这个类 Bootstrap3源码中写到 当点出模态框时，这个类会加到body上。导致了滚动条隐藏，容器宽度自动扩大17px，也就是...
Bootstrap模态框(Modal)插件
a_Keri的博客
03-28 817
Bootstrap模态框(Modal)插件1.定义模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互。2.设置方法模态框设置"modal",一般给它赋予角色 role="dialog"模态框入口设置:通过data属性，在控制器元素(比如按钮或者链接)上设置data-toggle="modal",同时设置d...
帮我写一个bootstrap网页，要求包含导航条，表单，下拉菜单，模态框，轮播图，卡片，折叠，选项卡。网站页面要求三个
06-09
好的，以下是一个基本的Bootstrap网页示例，包含导航条、表单、下拉菜单、模态框、轮播图、卡片、折叠和选项卡。这个示例包含三个网页，你可以根据自己的需求进行修改和补充。 ### 网页1：首页 ```html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container-fluid"> <h1>Welcome to My Website</h1> <p>This is the homepage of my website.</p> </div> </body> </html> ``` ### 网页2：表单页面 ```html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container-fluid"> <h1>Contact Us</h1> <form> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <div class="form-group"> <label for="message">Message:</label> <textarea class="form-control" id="message" rows="5"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html> ``` ### 网页3：轮播图页面 ```html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container-fluid"> <h1>Welcome to My Website</h1> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值