自从猫猫发了上一篇按钮弹出下拉菜单之后，社群里面的大神纷纷被炸了出来，有意思。...瓜哥发出来一个小巧好用的类 用法那是相当的简单 按钮分为左边点击是按钮，右边点击是菜单 左边按钮点击代码 右边菜单点击代码 对了，还有菜单在哪里设置？...这就是全部的内容啦。
CSS组件 下拉菜单 .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。 data-toggle属性：下拉菜单触发器。取值为“dropdown”。....dropdown-menu：给指定下拉菜单的样式。 .dropup：向上弹出的下拉菜单(下拉菜单父元素)。...下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right .divider：为下拉菜单添加分隔线，用于将多个链接分组。...按钮式下拉菜单 按钮式下拉菜单的应用 按钮或文本对齐。 .navbar-btn：对于不在中的元素，实现垂直对齐。
下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧 1.栅格系统 定义：一系列行和列构建的布局，可以跟着屏幕自动布局 最多可以展示12个列...网页上所有的内容都放在这个容器中 两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕） 创建行：（..."> 下拉菜单的小三角： 快速浮动： pull-left：左浮动 pull-right：右浮动 清除浮动：clearfix 块元素居中：center-block 文字居中：text-center...激活状态和禁用状态 激活：active 禁用：disabled 按钮式的下拉菜单 将ul列表转换为下拉菜单，添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...9.分页：（即有页数及上/下一页的东西） 直接添加：pagination： ?
配置下拉菜单 ?...homeHeader{ background-color:#409eff; display: flex; align-items: center; /*竖轴上居中...font-family: 华文行楷; color: #ffffff; } .userInfo{ cursor: pointer; } 每个下拉菜单都是一个点击按钮...homeHeader { background-color: #409eff; display: flex; align-items: center; /*竖轴上居中...从下拉菜单点击注销登录 ，会出现提示，此操作将注销登录，是否继续？有取消和确定按钮，点击确定会注销成功并跳转到登录页面 ?
，我们可以重命名该页面为首页： 接着创建一个行，命名这个行为标题，设置他的高度为自动，背景色为白色，以及为了之后内容的垂直对齐，设置他的垂直对齐为居中即可： 接着为了方便其内部元素距离上下左右的距离...30px，设置背景色为红色： 此时页面显示如下： 也可以重命名这个行为 logo ，方便之后添加 logo 内容： 接着我们添加下拉菜单列表，下拉菜单列表在扩展组件中，...点击需要添加下拉菜单的容器，然后点击扩展组件，点击下拉菜单即可添加： 在下拉菜单的属性中，，更改当前选中值，设置选项列表中的内容，更改大小即可完成： 接着在右侧的行中更改水平对齐属性选择靠右...70% 右侧购票为 30% 宽度，在此需要主要的是，右侧的购票信息按钮为垂直居中，那么此时就需要给予这个购票信息的高度为撑开，再设置垂直对其为居中（如果你父容器没有设置高度，那么撑开无效）：...若觉得这个行挨的太近，那么此时只需要给予这些行的内边距一定大小即可： 最后我们在右侧添加一个按钮，设置对应的文本和颜色： 三、添加导航容器 我们还发现，这个首页的导航栏是在下部：
，用于判断是否是下拉菜单，默认为0，若选中的组件为下拉菜单那么该值将会为 1： 那么此时在 if 判断中应该判断是否下拉选项这个变量的值为 1，为 1 时则显示下拉选项添加页面元素： 接着我们回到表单内容事件面板中...，在其添加条件，判断当前点击的序号在次序数组中为几，若为下拉菜单的标记 5，那么则设置是否下拉选项变量值为 1，否则为 0： 此时动态添加下拉菜单作为表单内容，点击一个下拉菜单将会在右侧属性改变内容中出现下拉菜单选项添加元素...： 接下来则需要为提交按钮添加事件，将输入的选项添加到下拉菜单之中。...点击提交为其添加事件： 此时事件的更改方式与添加背景色类似，但是由于下拉菜单选项会有多个值，此时还需添加一个一维数组，在此命名这个一维数组为下拉菜单内容： 我们首先在提交按钮中为这个下拉菜单内容进行赋值...： 随后设置组件属性对象数组的某个值，该值的行为选中的序号、列为下拉菜单选项、值则为下拉菜单的内容： 接下来我们为下拉菜单为其绑定选项内容，设置选项内容为组件属性的某一行某一列： 随后设置行号为当前序号值
width="10" height="10"> 表格标题和表头单元格标签 caption— 表格大标题–默认在表格整体顶部居中位置显示 th— 表头单元格–用于表格第一行，默认内部文字加粗并居中显示...” multiple>** multiple–多文件选择 按钮：**** 提交按钮，提交数据给后端服务器 重置按钮，恢复表单默认值 ** type=”button” – 可以设置 type 属性值 submit–提交按钮 reset–重置按钮 button–普通按钮 谷歌浏览器中 button 默认是提交按钮...button 标签是双标签，更便于包裹其他内容：文字、图片等 select 下拉菜单标签 select 标签：下拉菜单的整体 option 标签：下拉菜单的每一项 select 标签语法 selected...：下拉菜单的默认选中 textarea 文本域标签 textarea— 提供可输入多行文本的表单控件 textarea 语法 cols：规定了文本域内可见宽度 rows：规定了文本域内可见行数 label
.text-secondary 副标题 .text-white 白色文本（白色背景上看不清楚） .text-dark 深灰色文字 .text-light 浅灰色文本（白色背景上看不清楚） 【表格标签...垂直按钮组 按钮组大小 .btn-group-lg 大号按钮组 .btn-group-sm 小号按钮组 菜单触发样式 .dropdown-toggle 下拉基类，定义一个触发下拉的元素。...下拉菜单容器右对齐。...默认是左对齐 .dropdown-header 下拉菜单标题 .dropdown-item 下拉菜单列表项目 .dropdown-divider 在下拉菜单中创建一个水平的分割线 .active 启用指定下拉菜单列表项目....disabled 禁用指定下拉菜单列表项目 【徽章】 .badge 基类，默认样式为四角圆角6像素 .badge-pill 药丸形状徽章 .bg-{primary | secondary | info
1 下拉菜单 Bootstrap 中的下拉菜单依赖于 .dropdown 类，或者添加了 position: relative; 的元素。...，可以为下拉菜单的父元素设置 .dropup 类（默认是向下弹出的）。...： .dropdown-header 标明一组动作 .divider 添加一条分割线 .disabled 禁用相应的菜单项 1.1 按钮式下拉菜单 把按钮放入 .btn-group 中，然后加入适当的菜单列表...，就可以让按钮作为菜单的触发器了。... 注销 1.2 分裂式按钮下拉菜单
功能：非常重要+无处不在=悬浮响应按钮（Floating action button） 海拔：选择浮动还是平面按钮，具体取决于它所在的容器以及屏幕上有多少z轴空间图层。 屏幕上不应有太多层。...推荐的按钮放置 标准提示框 屏幕上的按钮对齐方式：右边 将肯定性按钮放在右侧，否定性的放在左边。 表单 屏幕上的按钮对齐：左边 将肯定性按钮放在左侧，否定性的放在右边。...在下拉菜单中滚动的方式与Menus滚动的方式相同。 ? ? 一般的下拉按钮 溢出下拉菜单按钮 这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。...点击菜单中的任意一个选项将会引导到对应的设置页面。 分段式下拉菜单按钮 分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应的动作。...点击下拉箭头则会弹出所有状态菜单; 点击任意一个状态会改变当前的状态。 可编辑分段式下拉菜单按钮 可编辑分段式下拉菜单按钮的当前状态位置是可编辑的（例如用来选择文字大小的下拉菜单）。
右边通常可以放置一个图层对话框，如未出现可以在下拉菜单中 选择 “窗口”— “可停靠对话框”— “图层”，来打开图层对话框。 也可以用同样的方法打开其他对话框，如通道、路径和直方图等 对话框。...一．文件的打开和存储 1.打开文件 在下拉菜单中选择“文件”— “打开”，可以打开一个图像文件。 出现打开图像对话框以后，可以在位置和名称栏中一层一层选择 要打开的文件名称，然后打开。...图像经过编辑后往往后用一个新的名称来保存，具体操作如下： 在下拉菜单中选择 “文件”— “另存为” 出现保存图像对话框后，先填入图像的名称，再在位置和名称栏中选 择好保存的位置，最后点击“选择文件类型”...格式选定后按 “保存”按钮。 出现导出文件对话框，按导出。 出现另存为对话框时，首先要选择“质量”，一般调整为85—100 之间，然后按 “保存”按钮。...(若未显示标尺，则在下拉菜单中选择“查看”—“显示标尺”) 在工具箱中选中 “旋转工具”， 其下部会出现一个与其相配的选项： 第一个选项为 “变换”选择第一个按钮 “图层”，表示现在要旋 转变换的是图层
在 iVX 中遵循越下部元素越靠前显示的规则，左右显示左为先右为后、上下显示上为先下为后；若你需要一个元素显示在一个另外一个元素左侧，就需要这个元素在在另一个元素之下。...接下来我们在左侧分类内容列中创建一个 按钮组件，设置文本为 “手机：华为、小米、OPPO”、宽度为 100%、高度为 50px： 随后将该按钮复制 6 个并修改其对应的文本，此时按钮就可以充满整个高度...名为 登录块，再到 登录块行 中创建一个名为登录内容的 行组件，在登录内容行中创建 4 个 行组件，分别用作用命名包裹按钮与文本，设置 水平对齐 为 居中 即可，对象树 如下： 注册页也同理： 6.2.2...商品发布页制作 商品发布页与登录/注册页大致类似： 商品发布页的 对象树 图如下： 下拉选项组件 位于扩展组件之中，我们点击 扩展组件 进行 下拉选项组件 的添加： 下拉菜单组件 在此作为类型的选择菜单...，添加完 下拉菜单组件 后，我们在 下拉菜单组件 属性栏中修改选项列表即可，不同选项之间使用逗号间隔即可完成： 富文本编辑器组件 位于 组件栏 右侧中部，点击即可添加到 富文本行 之中： 6.2.3
tr > tr 表格每行，可以用于包裹td > td 表格单元格，可用于包裹内容 caption 表格大标题 表示在表格整体大标题，默认在表格整体顶部居中位置显示 th 表格单元格 表示一列小标题...，通常用于表格第一行，默认内部文字加粗并居中显示 6.1合并单元格 具体步骤如下所示： 1.明确合并哪几个单元格 2.通过左上原则，确保保留谁 删除谁 上下合并 只保留最上的，删除其他 左右合并...用于重置，点击之后恢复表单默认值 submit 提交按钮 用于提交，点击之后提交数据给服务器 button 普通按钮，默认无功能，之后配合js添加功能 action..."> button可以做标签，可以做任何功能 我是标签 提交按钮 重置按钮 八：select系列 下拉菜单 select标签 下拉菜单整体 option标签 下拉菜单的每一项 selected 下拉菜单默认选中 <select
AppBar组件主要用于定义应用程序顶部区域，可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。常用的属性如下所示： 1. leading 标题前置控件。...在首页通常显示应用程序的Logo，其它页面通常显示为返回按钮； 2. title 页面标题。通常显示当前页面的标题文字，可以放组件； 3. actions 标题后置控件。...值的类型为Colors； 6. iconTheme 图标样式。值的类型为IconThemeData； 7. textTheme 文字样式。...值的类型为TextTheme； 8. centerTitle 标题是否居中显示。...appBar: AppBar( title:Text('Flutter App'), // 无论什么平台，标题都居中
技巧23、快速关闭所有excel文件 按shift键不松，再点右上角关闭按钮，可以关键所有打开的excel文件。 ? 技巧24、制作下拉菜单 例：如下图所示，要求在销售员一列设置可以选取的下拉菜单。...分析：在excel里制作下拉菜单有好几种方法，我们这里是介绍用数据有效性设置下拉菜单， 设置步骤： 步骤1：选取销售员一列需要设置下拉菜单的单元格区域（这一步不能少），打开数据有效性窗口（excel2003...步骤2：在来源输入框里我们需要设置下拉菜单里要显示的内容，有两种设置方法。 1 直接输入法。在来源后的框里输入用“,”（英文逗号）连接的字符串：张一，吴汉青，刘能，将文胜，李大民 ?...2 引用单元格的内容法。如果销售员在单元格B4:B8区域里，在“来源”后输入或点框最后的折叠按钮选这个区域。如下图所示。 ? 进行如上设置后，我们就可以在销售员一列看到下拉菜单了。...技巧25、二级联动下拉 例：如下图所示，在手机列输入或选取苹果，型号下拉里会显示所有苹果手机的所有型号，如果手机列输入三星，在型号列下拉菜单显示所有三星的型号。 手机列选苹果： ?
将鼠标移动到指定元素上就能看到下拉菜单。...使用容器元素(如：div)来创建下拉菜单的内容，并放在任何你想放的位置上。 使用div元素来包裹这些元素，并使用CSS来设置下拉内容的样式。...CSS 部分： .dropdown类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。...注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。...我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。 :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
，比如，上面点击“记录”按钮，需要先请求后端详情接口，然后再打开编辑弹框，这时很容易忘记加 loading 效果，影响用户体验 需求分析 基于目前的业务场景，对于这个通过组件，归纳一下几点需求： 操作列只放三种类型的按钮...：普通 text button 、二次确认 Popconfirm 按钮、下拉菜单 button 自动管理按钮的 loading 效果，若声明了对应的异步函数，自动出 loading 效果 对于，Popconfirm...按钮，如果有异步操作，不在确认按钮的地方开 loading，而是直接在对应 button 的位置开 loading 对于，下拉菜单 button，如果有异步操作，要等 loading 完再关闭下拉菜单...预留鉴权的接口，通过权限控制按钮的显示与否 核心组件 ButtonExt 对 antd 的按钮进行扩展，增加 onAsyncClick 回调函数，如果使用该函数，并且有异步操作的话，按钮自动管理 loading...和 Button 两个组件，定义配置项，实现 JSON 生成下拉菜单的按钮 TableOption 自定义操作列按钮，整理上面几种类型的按钮，通过 JSON 声明式生成对应组件
下拉菜单 ① 使用方法 * 在 div 中添加 class="dropdown" 或 class="dropup" 此时 div 是下拉菜单的容器 * 在下拉菜单的容器中添加两个子元素...- 按钮，单击后弹出下拉菜单 - ul，弹出的菜单 * 修改按钮 - 给按钮添加 data-toggle="dropdown"...分裂式下拉菜单 ① 按钮组合 * 使用方法 - 写一个普通下拉菜单，仅包含一个箭头 - 修改下拉菜单太容器的 class="btn-group"...，仅包含一个箭头 - 修改下拉菜单太容器的 class="input-group-btn" - 给当前下来菜单容器添加父级 div 并指定 class="input-group...* 将导航中的某个 li 添加 class="dropdown-menu" 当作下拉菜单的容器 * 示例
disabled">菜单三 9 10 这是一句文字 11 五、折叠导航：小屏幕上我们都会折叠导航栏...href="#" class="nav-link disabled">菜单三 16 17 18 折叠导航注意事项： 1、定义折叠按钮时除了折叠的属性之外...： .justify-content-start 默认，左对齐 .justify-content-center 居中对齐 .justify-content-right 右对齐...li 标签可用样式及属性 .nav-item 指定一个选项 .dropdown 指明该选项是一个下拉菜单（下拉菜单也可以不用指定） a标签可用样式及属性 .nav-link 指定导航链接 .active...| center | end }内容对齐 rounded-{0 | top | right | bottom | left | circle } 边角半径设置 bootStrap实现垂直居中
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
