首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

bootstrap快速入门笔记(七)-表格,表单

Class 描述 .active 鼠标悬停在行或单元格所设置颜色 .success 标识成功或积极动作 .info 标识普通提示信息或动作 .warning 标识警告或需要用户注意 .danger...当屏幕大于 768px 宽度,水平滚动条消失。   a,垂直方向内容截断:     响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部内容截断。...在内联表单,    们这些元素宽度设置为 width: auto;,因此,多个控件可以排列同一行。根据你布局需      求,可能需要一些额外定制化组件。   ...2),输入控件组:如需文本输入域  前面或后面添加文本内容或按钮控件,请参考输入控件组。   3),文本域:支持多行文本表单控件。可根据需要改变 rows 属性。   ...5),下拉列表(select):对于标记了 multiple 属性  控件来说,默认显示多选项。

2.9K30

分享5个关于 Vue 小知识,希望对你有所帮助

大家好,今天分享几个和Vue相关小知识,希望对你有所帮助 1、Vue.js中获取下拉框选择值 有时候,我们希望Vue.js中选项改变获取所选选项。...要在鼠标悬停在一个元素执行某些操作,我们可以监听mouseover(鼠标悬停)和mouseleave(鼠标离开)事件。...然后,我们添加@mouseover指令,并将其值设置为hovered = true,当我鼠标移到div内,我们@mouseover指令设置为hovered = false,以鼠标移到div内和移出...我们使用v-show指令来hovered为true显示第二个p元素。 现在,当我鼠标div内,我们可以看到“hovered”被显示出来。...当我鼠标移出div,“hovered”消失了。 3、Vue.js中获取组件内元素 有时候,我们希望Vue.js中获取组件内元素。

19830
您找到你想要的搜索结果了吗?
是的
没有找到

关于无障碍设计七件事

这篇文章帮助你了解有关无障碍设计主要知识,让你产品设计“准备就绪”,使你产品设计满足Section508和Web Content Accessibility Guidelines2.0中最低标准...应该做到在有链接空白区域旁边显示数字。 ? 下图是领英?。这是个人主页截屏。 ? 当我把鼠标停留在个人简历卡片时候会变成下图。 ?...再进一步,当我鼠标悬停在标题上,文本会变为蓝色,表示已经可以点击这一项了。 ? 这种设计方式可能会导致无障碍问题。下面是一种解决方案。每块输入框后面放一个小铅笔icon。...这些icon不会消失。 ? 当我鼠标悬停在某块地方,蓝色出现了。 ? 当我提出这种解决方法,有的设计师会说,“感觉有点重了”。 也许从视觉是有一点。但是它是无障碍设计解决方案。...一种方案就是,它们白色背景可以是绿色,鼠标悬停颜色反过来。 ? 这个解决方案也可能会被称为“重”。但是,请记住,我们不是为设计师而设计。我们在为不同用户设计。

3K30

【愚公系列】2023年11月 Winform控件专题 ToolTip控件详解

欢迎 点赞✍评论⭐收藏前言Winform控件是Windows Forms中用户界面元素,它们可以用于创建Windows应用程序各种视觉和交互组件,例如按钮、标签、文本框、下拉列表框、复选框、单选框、...,可以鼠标悬停在控件显示特定提示信息。...;在上面的示例中,当鼠标悬停在button1按钮,将会显示一个气球形式ToolTip,该ToolTip内容是“这是一个气球形式ToolTip!”。...同时,ToolTip控件绑定到button1按钮,当用户鼠标悬浮在button1,会显示所设定提示信息。...工具栏提示:Winform窗体中使用工具栏,可以通过ToolTip控件鼠标悬浮在工具栏按钮,显示该按钮功能描述,帮助用户更好地使用工具栏。

1.1K11

前端开发必备之Chrome开发者工具(上篇)

Elements 面板中选择元素,然后 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素选择器 ?...您需要将鼠标悬停到样式规则才能看到这个图标 ? 鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明快捷方式。...交互 消息堆叠 如果一条消息连续重复,而不是新行输出每一个消息实例,控制台“堆叠”消息并在左侧外边距显示一个数字。...由于每一条消息时间戳均不同,因此,每一条消息都将显示各自 ? 选择执行环境 以下屏幕截图中以蓝色突出显示下拉菜单称为 Execution Context Selector ?...鼠标悬停在 Break on ,然后选择 subtree modifications,attribute modifications或node removal。 ?

8.2K111

niRvana · 轻拟物主题4.8完美版

niRvana主题是一款轻拟物风格wordpress主题,该博客主题设计不再趋从于现有的扁平风,认为是时候从极致扁平稍微向拟物致敬了。...因此本主题原有的“短代码”全部升级成了“Gutenberg模块”,包括:小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮下拉菜单、站内文章链接等,极大为用户提供了方便,例如: 插入提示框...方便文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩 插入下载按钮 插入模态框 插入提示工具: 段落中插入提示语,鼠标悬停即可显示,就像这样。...UI样式 您可以轻松文章中插入小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮下拉菜单、站内文章链接等,例如: 图片 图片 未标题 显示下拉菜单 左眼会配右眼哭の博客...2、REST API错误不再清空页面,而是显示错误提示 v1.4.2 1、修复:启用Ajax不刷新加载页面,文章二维码封面显示后,使用返回按钮消失bug;鼠标悬停显示tooltip提示文字后,使用返回按钮消失

8.5K10

吐槽一下新浪微博网页版 UI 设计

有向下箭头是鼠标悬停时候显示下拉菜单吧: 可是,右侧这样普通按钮也会有悬停+显示下拉菜单效果: 继续,新浪微博没有把这样效果统一贯彻到底,发微博按钮就容易误导用户悬停然后等待下拉菜单,结果怎么也等不来...右侧这样 tab 页是鼠标悬停激活切换: 但是到了正中 tab 页,需要鼠标单击切换: 3. 按钮风格太多,不够直观简洁。...比如第四行,有两种 “更多” 按钮风格。 分组 “管理” 按钮设定为鼠标悬停展示,但是 “找人” 按钮却不是,不是很理解这种不一致设计原因。 4....每条微博左下角时间显示是一个链接,链接含义对于用户来说不够直观;“举报” 按钮鼠标悬停在微博才显示,不是很理解为什么这样做。...另外,转发/评论树没办法清晰地展示出来,而且转发时候还可以随意修改被转发信息,这似乎是信息伪造硬伤…… 5. 过多提示、悬停提示,打扰用户阅读。

1.3K10

服务器小白,是如何 node+mongodb 项目部署服务器并进行性能优化

BiaoChenXuYing 前言 本文讲解是:做为前端开发人员,对服务器了解还是小白,是如何一步步 node+mongodb 项目部署阿里云 centos 7.3 服务器,并进行性能优化...当然阿里云服务器每年双 11 都有很大优惠,也很便宜,选什么配置与价格得看自己用处。...刷新出现 404 问题,可以看下这篇文章 react,vue等部署单页面项目,访问刷新出现404问题 3.5 上传项目代码,或者用码云、 gihub 来拉取你代码到服务器 是创建了码云账号来管理项目代码...,因为码云可以创建免费私有仓库,本地把码上传到 Gitee.com ,再进入服务器用 git 把代码拉取下来就可以了,非常方便。...基于 node + express + mongodb blog-node 项目文档说明 4. 服务器小白,是如何node+mongodb项目部署服务器并进行性能优化

1.5K22

Google earth engine——矢量数据上传(新手必备)!

资产导入您脚本 您可以通过鼠标悬停在资产管理器中资产名称并单击 arrow_forward 图标。 如果单击资产名称,则会出现一个包含资产描述对话框。...一个对话框显示有关资产信息,包括预览缩略图、可编辑元数据属性列表以及用于导入、共享或删除资产按钮。资产对话框还支持对其描述进行 降价编辑。...请谨慎使用删除按钮。如果您无意中删除了资产,则必须重新创建。 共享资产 单击共享按钮以配置对您私人资产访问。您还可以通过鼠标悬停在资产并单击 share图标。...要允许 Earth Engine 应用程序查看资产,请从下拉列表中选择应用程序名称。 这个是我们上传矢量文件时候对话框,所以一定要按照要求上传否则会报错!...单击SELECT按钮并导航到本地文件系统 GeoTIFF。 用户文件夹中为图像提供适当资产 ID(尚不存在)。

31310

谷歌 Material Design 从这些方面打破了思维局限 - 1

触屏为主时代,悬停状态要慢慢淡出舞台 不论是下拉框、按钮、隐藏菜单……, Material Design 要么完全摒弃了鼠标悬停状态,要么就只把悬停状态看作一个无关紧要视觉反馈。...隐藏与否取决于必要性,而非空间是否足够 承认并且反省,直到昨天,做法都是所有可能用到东西都摆在界面上,发现看起来过多或放不下,才部分通过“更多”图标等方式隐藏起来。...很多人如果发现弹出框没有右上角“×”会抱怨,但实际他们根本不需要那个“×”,谁都知道方框之外点一下弹出框就消失了。...Material Design 对弹出框运用很灵活,如下图这种情况,弹出框用处只是增加一段评论而已,那么干脆标题、确定按钮和取消按钮都去掉,这样使用起来反而更加顺畅了。 ?...纸上看书时候,我们往往通过不断地扫视、翻页来寻找自己刚兴趣内容详读。浏览网页么也希望能够一眼界面上扫到自己感兴趣内容,然后再深入研究。

93880

后台系统设计(上篇:选择)

常见类型: ·单选按钮 ·复选框 ·图标切换 ·切换开关 ·穿梭框/列表构造器 ·下拉菜单 一、单选按钮 允许用户从一组相互排斥选项中选择一个。通常,一个选项定义为默认选择。 外观 常规: ?...单个选项下,存在多组互斥选项,且互斥选项组之间存在一定关系,可以考虑混用分段控件和常规按钮,由于分段控件视觉占用更大面积,故给人在层级更加置前。 ?...最佳用法 ·较小空间下,对多个选项进行选择或内容较为次要且不需要一直显示下拉菜单是不错选择。若选项较少,考虑使用单选框(当进行单项选择)或复选框(当进行多项选择)。...关于下拉搜索 下拉搜索有两种情况,下拉单选和下拉多选情况。 ·单选情况下,我们搜索放在了原有的框体内,流程如下:用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。 ?...·多选情况下,由于是多选操作,我们搜索框放在下拉菜单内,这样就不影响原有框体承载选项问题。 ? 但是该模式极大复杂了控件及用户交互行为。

9.6K21

CSS Transitions

「触发过渡:」 过渡通常在「元素状态发生变化时触发」。 例如,当我们悬停在按钮,可以更改其背景颜色,过渡效果将使颜色平滑地指定持续时间内变化。...这意味着当鼠标悬停按钮按钮transform属性将以更快速度改变。...当用户悬停在按钮按钮向上移动10像素,创建了一个视觉反馈,以指示按钮可以被点击。 另一个常见例子是弹窗(modals)。...相信项目开发中,或多或少遇到过如下情况: 作为开发者,我们可能可以理解为什么会发生这种情况:下拉菜单只鼠标悬停在上面保持打开!...当我们悬停在这个普通按钮,它会导致子元素从上方露出。然而,按钮本身是静止

25130

BootStrap框架总结

(最多视口分为12列) "通过class属性来设置不同屏幕所占列 n表示每格占份数" col-lg-n 大屏 col-md-n 中屏 col-sm-n 小屏 col-xs-n...tabl-hover 带有鼠标悬停表格 table-condensed 紧缩表格 表单: 垂直表单: 内联表单:(所有内容放在同一行) 水平表单: 按钮: btn: 为按钮添加基本样式...btn-default : 默认/标准按钮 btn-primary : 原始按钮样式(未必操作) btn-success : 表示成功动作 btn-info : 该样式可用于要弹出信息按钮...class="small":表示最小 list-unstyled:去掉列表原点或者方块 list-inline:把列表横着排列 组件: "无数可复用组件,包括字体图标,下拉菜单,导航,警告框,弹出框等更多功能..." 下拉选: 导航条: javaScript 插件: "jQuery 插件为Bootstrap 组件赋予了"生命".可以简单一次性引入所有插件,或者逐个引入到你页面中."

3.3K20

路径复制

一些选项修改路径复制到剪贴板默认行为,而可以使用该路径启动可执行文件。有关每个选项说明,鼠标悬停在每个选项显示工具提示。 一个强大选项是使用正则表达式执行查找/替换操作。...然后,可以样本字符串(2)测试正则表达式。单击此对话框中“确定”按钮会将修改后参数保留在父自定义命令对话框中。 专家模式下编辑自定义命令可释放其全部潜能,但要付出更多技术用户体验代价。...简单模式下编辑自定义命令,可以通过类似标签按钮访问专家模式(请参阅“自定义命令”)。同样,编辑对于简单模式而言过于复杂现有自定义命令将在专家模式下自动打开该命令。 ?...专家模式对话框中每个元素都通过工具提示进行记录。只需将鼠标悬停在元素即可显示其工具提示。 路径复制复制附带了可在定制命令中使用各种类型管道元素。当按下“新元素”按钮显示它们。 ?...如果需要帮助,鼠标悬停下拉菜单中项目上将显示一个工具提示,说明元素类型作用。 ? ? ?

3.4K30

一篇带你了解如何使用纯前端类Excel表格构建现金流量表

我们创建了一个更动态表格,当我们需要数据而不是单元格范围,我们可以引用 Table1。...,完成安装后,按照下列步骤操作: 单击数据选项卡模板菜单 - 字段列表面板将出现在右侧 鼠标悬停在 Start 分支并通过单击绿色 + 按钮添加字段 *请注意,你可以使用“x”按钮删除字段并使用位于分支右侧设置修改这些字段...设置选取器开始、结束年份和高度 然后,我们进行计算为包含月份单元格指定一个名称。 公式选项卡,选择名称管理器 弹出窗口中,单击新建按钮 设置单元格名称。...,我们例子中为“=MONTH(B4)MONTH(currentMonth)” - 此格式仅适用于月份与下拉列表中选择月份不同单元格 单击格式 编号 → 自定义 输入”;;;”作为格式化程序所有正确单元格设为空白...为 currentMonth 创建名称范围步骤是: 公式选项卡,选择名称管理器 弹出窗口中,单击新建按钮 设置单元格名称 我们示例中: name:当前选择;refer to: ='Cash-Flow

10.8K20

Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

当拥有 Earth Engine 帐户的人访问 URL ,浏览器导航到代码编辑器并复制创建链接环境,包括代码、导入、地图图层和地图位置。单击“获取链接”按钮将自动脚本链接复制到剪贴板。...“导出”选项卡管理导出任务。要开始导出,请单击任务 选项卡中导出任务旁边 运行按钮。...要使用探查器,请单击“运行”按钮下拉菜单中“使用探查器运行”选项。作为快捷方式,按住 Alt(或 Mac Option)并单击运行,或按 Ctrl+Alt+Enter。...这将激活代码编辑器右侧Profiler选项卡。脚本运行时,Profiler选项卡显示脚本中资源使用表。单击运行按钮(不进行分析)将使分析器 选项卡消失并禁用分析器。...它显示发生错误时任何单个计算节点正在使用内存量。 峰值内存 任何单个计算节点用于该操作最大内存。 几何工具 您还可以通过屏幕绘制几何图形几何图形导入脚本。

1K10

BootStrap基础知识

如果一次只要展示一个吐司,请将定位样式放在 .toast 。 当使用 autohide: false ,必须增加一个关闭按钮,让用户可以关闭吐司。...支持 Page Visibility API 浏览器中,当网页对用户不可见,轮播避免滑动(例如浏览器分页不是启用状态、浏览器视窗最小化时等)。...元素 .dropdown-menu 类后添加 .dropdown-menu-right 类,使下拉式功能表右对齐。 dropright类,下拉式功能表向右弹出。...内联表单需要在 元素添加 .form-inline 类 所有内联表单中元素都是左对齐 荧幕宽度 小于 576px 为垂直堆叠,如果荧幕宽度 大于等于 576px 表单元素才会显示同一个水平线上...>鼠标移动到我这 提示框是一个小小弹窗,鼠标移动到元素显示,鼠标移到元素外就消失。 通过向元素添加 data-toggle=”tooltip” 来来创建提示框。

23110

导航设计15个原则

用户成功导航一个最基本标准是他自己能发现:“在哪儿?” 通常被选中的菜单选项视觉与其他选项是有差异,这可以帮助用户明确自己的当前所在位置(或者通过面包屑导航定位)。...减少用户阅读菜单具体内容时间,如使用左对齐垂直菜单、或关键词前置。 对于大型网站来说,让用户通过导航菜单预览子级内容。...鼠标悬停触发下拉菜单呈现时间太过短暂会给用户带来挫败感,因为用户还没来得及点击菜单里某个链接时候,下拉菜单就消失了。另外,太长垂直导航菜单也不利于底部选项点击,除非滚动屏幕。...最后,鼠标悬停触发下拉菜单不能太宽,否则会让用户误以为是新页面、并且好奇为什么自己还没点击就出现了新“页面”? 当页面内容很长,可以考虑悬浮吸顶(或固底)菜单。...尽可能缩短导航菜单最常用操作物理距离。下拉菜单内容比较多时,将用户最常点击链接放到离鼠标悬停选项最近地方可以减少鼠标移动距离(移动端也类似)。

1.5K10

Fdog系列(四):使用Qt框架模仿QQ实现登录界面,界面篇。

学习该篇,你学会: 自定义标题框,实现移动 隐藏任务栏图标,图标显示系统托盘(系统右下角) 创建右击菜单 文本框奇思妙想 自定义边框如何添加边框阴影效果 样式设计 等等等等 图中下拉框...如果你不会添加资源的话,教你呀,右击项目,创建新文件,选中Qt中Qt Resources文件,创建之后工程列表会多出一个Resources文件,然后项目文件夹下面创建一个lib文件夹,图片放在里面...,当我们点击按钮按钮文字会向右上角晃动,但是当我们添加了自定义图片,该效果则消失,如何做到这一点,可以使用padding-left:2px; padding-top:2px;来实现。...3.如何实现右边下拉选项框,其实这里是一个文本框和一个combox下拉列表框组成 ? 点击三角按钮选中内容显示文本框就可以了。...实现背景阴影 到目前为止,还剩下最后一个问题,当使用自带标题栏后,窗口是自带阴影边框,但是当我们取消了系统自带标题栏之后,边框也随之消失,如何自己搞一个边框阴影?

3.6K52

Qt Style Sheet实践(二):组合框QComboBox定制

导读      组合框是一个重要且应用广泛组件,一般由两个子组件组成:文本下拉单部分和按钮部分。许多既需要用户选择、又需要用户手动输入应用场景下,组合框能够很好满足我们需求。...如我们经常使用聊天软件QQ登录框,便是一个很好应用例子: ?      显然,用户既可以自己手动输入新QQ号码,也可以列表框中选择历史输入记录。对于提高用户体验是一个不错手段。...如果不给按钮设置圆角,那么按钮棱角将会遮挡住整体边框圆角效果。另外,我们改变了按钮箭头图标。::down-arrow也是一个子组件,我们用image属性替换了系统默认图标。对比一下: ?...嗯,整体风格看起来协调些了。当然了,::drop-down子组件定制中,我们subcontrol-position属性设置成了top, right。这样按钮就位于最右边了。...这样,当用户点击了选项中某一个选项,能够QComboBox文本框中显示选中项。那么,QSS该如何编写呢?

7.4K70
领券