这些类可用于微调元素的边框和间距,使页面看起来更整洁。 响应式设计 Bootstrap 的全局 CSS 样式还包括响应式设计,这意味着页面会根据不同设备的屏幕尺寸自动适应布局。...Bootstrap 使用断点(breakpoint)来定义不同屏幕尺寸上的样式变化。 以下是一些常见的断点类: d-none、d-sm-none、d-md-none:用于在不同屏幕尺寸上隐藏元素。...d-block、d-sm-block、d-md-block:用于在不同屏幕尺寸上显示元素。 d-flex、d-md-flex:用于创建弹性布局。...示例代码: 在中等屏幕上显示,其他屏幕上隐藏。 创建一个弹性布局。... 这些响应式样式允许您根据不同设备上的屏幕尺寸自动调整元素的显示和排列方式,从而提供更好的用户体验。
用户更喜欢在不同的方向使用APP,因此最好是你能能够满足用户这种期望。 做好更改文本大小的准备。用户希望大多数APP在设置中选择不同的文本大小时都能做出响应。...在深色模式下,系统为所有屏幕、视图、菜单和控件使用较暗的色彩,并使用更具活力的颜色,使前景内容在较暗的背景下突出。深色模式也支持所有辅助功能。...系统视图和控件使你的APP文本在所有背景上都看起来很好,并自动调整以适应是否有Vibrancy。当你可以使用系统提供的视图来显示该文本时,请不要自己绘制文本。...人们重视使他们能够快速访问内容并执行任务的应用程序。设计类似于应用程序界面的启动屏幕会产生一种幻想,即该应用程序立即启动。结合快速的启动时间,这种设计方法使您的应用程序立即响应。...使用字体粗细,大小和颜色突出显示应用程序中最重要的信息。 响应文本大小更改时优先处理内容。并非所有内容都同样重要。
网页设计基础知识问题:什么是响应式设计?为什么在现代网页设计中它是重要的?答案:响应式设计是一种能够适应不同设备和屏幕尺寸的网页设计方法。...它通过使用弹性网格布局、媒体查询和灵活的图像等技术,使网页在各种设备上都能良好地显示。在现代网页设计中,响应式设计是重要的,因为用户使用多种设备浏览网页,包括桌面、平板和手机。...这是重要的,因为不同设备和浏览器支持的字体不同,使用字体堆栈可以提高字体的兼容性,确保页面在不同环境中都能正确显示。问题:解释什么是行高(line height),以及在网页设计中为什么要注意它?...答案:行高是指文本行的高度,它包括文本的实际高度以及上下间距。在网页设计中,适当设置行高可以提高文本的可读性和美观性。合适的行高可以确保文字之间的间距适中,不会显得过于拥挤或稀疏。3....格式选择:选择合适的图像格式,如 JPEG、PNG 或 WebP。懒加载:仅在用户滚动到图像位置时加载图像,而不是一开始就加载所有图像。4. 用户体验(UX)问题:解释用户体验设计的基本原则。
响应式设计:PWAs通常使用响应式设计,以确保在各种设备上提供一致的用户体验。...响应式设计:适应多种设备 响应式设计已经成为现代Web开发的标准实践之一。它的目标是确保网站或应用程序在不同设备上(如手机、平板电脑、台式机)上都能提供一致的用户体验。...适应性内容:根据不同屏幕尺寸提供不同的内容,以确保用户在移动设备上获得最有用的信息。 响应式设计可以通过使用CSS框架(如Bootstrap、Foundation)来简化。...这些框架提供了各种响应式工具和组件,使响应式设计变得更加容易。...这有助于确保文本在不同设备上都能清晰可读。 总结 前端开发领域不断演进,采用新技术和最佳实践可以提高应用性能、用户体验和可访问性。
可视化查询解释(非常点赞的功能) 在 MySQL、MariaDB 和 PostgreSQL 中,可视化查询解释可帮助你在查询集合中获取有价值的信息,这种方式是传统文本解释不能做到的。...img 快速建模,简化执行 在一个工作区中创建多个模型,使你可以在单个图表中说明不同的模型对象,简化了复杂系统的浏览和理解。另外,对函数/过程的支持允许你在模型阶段预定义过程和操作。...要查看所有值,你可以增加列宽,或者只需在屏幕底部的列统计中的值分布图下方使用滚动条即可: img 更改布局 有几种选项可以更改数据的呈现方式。...img 探索相互关联的见解 现在,仪表板上具有相同数据源的所有图表可以相互连接。当你在其中一个图表上选择数据点时,链接到同一数据源的同一仪表板页面上的所有其他图表将立即更新,以反映你的选择。...这种实时协调,使你能够观察数据不同可视化表示形式的模式、相关性和趋势。 可视化聚合管道 你现在可以通过一个清晰且响应迅速的界面进行一步步构建和测试 MongoDB 聚合管道。
在需要更高效能源利用率的设备上(比如使用 OLED 屏幕的设备上),通过减少发光像素来延长电池使用寿命。 增强可访问性 ?...文本和背景之间的对比度级别至少要达到 15.8:1 才行。这样的对比度确保了即使是高程处于最高、最亮的控件当中,作为正文的白色文本都能通过 WCAG 的AA对比度标准,也就是 4.5:1 。 ?...在这种情况下,这些UI 能够通过不发光的黑色像素来节省硬件的电量。 ? 注意 在 OLED 屏幕上,打开和关闭像素发光会导致屏幕滚动时出现延迟,导致像素模糊。...默认的主色 深色主题的主色 ? 正确 较浅的色调(200-50范围内的颜色)在深色主题中(在所有不同的高程之下)具有更好的可读性。 ?...错误 避免在深色主题中使用高饱和度的色彩,因为它们可以在深色的背景上形成炫光效果。 ? 默认主题下,在顶部菜单中使用配色方案中的主色。 ?
运输层 因特网的运输层在应用程序断点之间传送应用程序报文,在这一层主要有两种传输协议 TCP和 UDP,利用这两者中的任何一个都能够传输报文,不过这两种协议有巨大的不同。...HTML HTML 称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。...例如,在HTML文档上,浏览器将滚动到定义锚点的那个点上;在视频或音频文档上,浏览器将转到锚点代表的那个时间。值得注意的是 # 号后面的部分,也称为片段标识符,永远不会与请求一起发送到服务器。...Accept-Language: en-US,en;q=0.5 请求标头我们大概就介绍这几种,后面会有一篇文章详细深挖所有的响应头的,下面是一个响应头的汇总,基于 HTTP 1.1 ?...响应标头 响应标头是可以在 HTTP 响应种使用的 HTTP 标头,这听起来是像一句废话,不过确实是这样解释。并不是所有出现在响应中的标头都是响应标头。
原作 James Vincent Root 编译自 TheVerge 量子位 出品 | 公众号 QbitAI 在地铁上,有没有经常担心旁边或背后有人偷瞄你的手机?...在Demo里面,大家可以看到,一旦有人偷窥,手机界面会立即跳出来一个红框,圈住猥琐的人,并加标呕吐彩虹的动画效果,来提醒用户。 ? 可以精确到哪怕是路人扫了一眼,都能马上被工具逮到。 ?...只要在谷歌的Pixel手机上,打开前置摄像头,加上眼动跟踪检测算法,看看除了用户以外,有没有第三只眼在盯着屏幕看。 Ryu and Schroff提到,这个算法目前已经可以适应不同的光照环境和姿势了。...还能迅速地在2毫秒内识别出来他人猥琐的斜视。 响应速度有这么快,是托Pixel手机计算能力的福,不然的话,等连接云端服务器再处理后返回手机端,旁边怪蜀黍早就没影了,还提醒个啥。...如今谷歌推出了好多能在移动设备端跑起来的AI小应用,除了这个被偷窥提醒,还有自动检测复制文本中的数字和地址,在回复邮件的时候,给备选的回复句子等等。
在登录中使用Max Retry和监禁功能。 对所有敏感数据使用加密。 JWT(JSON 网络令牌) 使用一个随机的复杂密钥 ( JWT Secret) 使暴力破解令牌变得非常困难。...在服务器端使用 HTTPS 来避免 MITM(中间人攻击)。 使用HSTS带有 SSL 的标头来避免 SSL Strip 攻击。 对于私有 API,仅允许从列入白名单的 IP/主机进行访问。...Not Acceptable如果不匹配,则以响应响应。...加工 检查是否所有端点都受到身份验证的保护,以避免身份验证过程中断。 应避免使用用户自己的资源 ID。使用/me/orders而不是/user/654321/orders. 不要自动增加 ID。...持续集成和光盘 使用单元/集成测试覆盖率审核您的设计和实现。 使用代码审查流程并忽略自我批准。 确保在推送到生产之前,您的服务的所有组件都由 AV 软件静态扫描,包括供应商库和其他依赖项。
当其轻压屏幕且获得相应响应的同时,便意味着其发现了一个新的交互维度。 主屏幕交互 在支持3D Touch设备的主屏幕上,按压应用图标即可唤醒相应的操作视图。...无论你的APP在前台还是后台,用户都能够通过应用界面以外的东西去控制音频的播放。如果你的APP正在清晰的音频相关环境中主动播放音频,或连接到支持AirPlay的设备上,则可以对音频控件做出响应。...但是,你的APP不应该混淆其它应用的音频,因为它们可能会在控件被激活时播放。 请勿重新调整音频控件的用途。用户希望声音控件在所有APP中都能保持一致。永远不要重新定义声音控件。...在iPadOS 14和更高版本中,Scribble允许用户使用Apple Pencil手写识别功能在屏幕上快速、隐秘的在任何文本字段中输入文本。 ? 支持预期的行为。...拖动内容时,用户可以通过多任务处理,退出到主屏幕或从屏幕底部向上滑动以显示Dock来访问另一个应用程序。 支持拖放 使拖放可用于所有可选和可编辑的内容。 如果适用,允许将内容拖放到控件上。
运输层 因特网的运输层在应用程序断点之间传送应用程序报文,在这一层主要有两种传输协议 TCP和 UDP,利用这两者中的任何一个都能够传输报文,不过这两种协议有巨大的不同。...HTML HTML 称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。...HTTP 请求 URL HTTP 协议使用 URI 定位互联网上的资源。正是因为 URI 的特定功能,在互联网上任意位置的资源都能访问到。URL 带有请求对象的标识符。...Accept-Language: en-US,en;q=0.5 请求标头我们大概就介绍这几种,后面会有一篇文章详细深挖所有的响应头的,下面是一个响应头的汇总,基于 HTTP 1.1 ?...响应标头 响应标头是可以在 HTTP 响应种使用的 HTTP 标头,这听起来是像一句废话,不过确实是这样解释。并不是所有出现在响应中的标头都是响应标头。
运输层 因特网的运输层在应用程序断点之间传送应用程序报文,在这一层主要有两种传输协议 TCP和 UDP,利用这两者中的任何一个都能够传输报文,不过这两种协议有巨大的不同。...HTML HTML 称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。...Accept-Language: en-US,en;q=0.5 请求标头我们大概就介绍这几种,后面会有一篇文章详细深挖所有的响应头的,下面是一个响应头的汇总,基于 HTTP 1.1 响应标头 响应标头是可以在...并不是所有出现在响应中的标头都是响应标头。...404 该状态码表明服务器上无法找到请求的资源。 以 5xx 为开头的响应标头都表示服务器本身发生错误 状态码 含义 500 该状态码表明服务器端在执行请求时发生了错误。
Web服务器使用CRLF来了解新的HTTP标头何时开始以及另一个标头何时结束。CRLF还可以告诉Web应用程序或用户,新行以文件或文本块开头。...实际上,即使CRLF注入攻击从未在OWASP十大列表中未列出,它也会对Web应用程序产生非常严重的影响。例如,也可以按照以下示例中的说明在管理面板中操作日志文件。...page=home&restrictedaction=edit 因此,通过利用CRLF注入漏洞,攻击者可以伪造日志文件中的条目,以掩饰自己的恶意行为。攻击者实际上是在进行页面劫持并修改响应。...服务器通过在响应中注入CRLF字符来响应此请求,您将发现已在http响应中设置了“位置” http标头,并通过CRLF注入了值“http://www.evilzone.org”屏幕下方的有效载荷 ?...CRLF注入漏洞的影响 CRLF注入的影响各不相同,并且还包括跨站点脚本对信息披露的所有影响。它还可以在受害者的浏览器中停用某些安全限制,例如XSS筛选器和“相同来源策略”,使它们容易受到恶意攻击。
以下是在不同的屏幕尺寸上响应式地使用 NavigationRail 的一些最佳实践: 6.1 适应平板电脑、桌面和移动设备的最佳实践 使用媒体查询: 使用 MediaQuery 来检测当前设备的屏幕尺寸和方向...NavigationRailLabelType.selected: 只在选中的导航栏项上显示标签。 NavigationRailLabelType.all: 在所有导航栏项上都显示标签。...响应式设计: 应用程序可以根据不同设备的屏幕尺寸和方向来调整 NavigationRail 的布局和样式,以确保在各种设备上提供一致的用户体验。...响应式设计支持: NavigationRail 支持响应式设计,可以根据不同设备的屏幕尺寸和方向调整布局和样式,以确保在各种设备上提供一致的用户体验。...注意响应式设计: 在设计 NavigationRail 时,请务必考虑不同设备和屏幕尺寸的响应式布局,以确保在各种设备上都能提供良好的用户体验。
使环境中的文本最小化。仅显示人们对应用程序体验所需的最基本的信息。 如果需要其他信息或控件,请考虑在屏幕空间中固定显示。屏幕空间中的内容在虚拟世界中或在设备屏幕上显示为固定在一个一致的位置。...例如,将3D旋转指示器放置在对象周围比在2D叠加层中显示基于文本的指令更直观。除非人们不响应上下文提示,否则请避免在3D上下文中显示文本叠加提示。 ? 使重要的文本可读。...设计漂亮的小部件 在iOS 14及更高版本中,小部件使用丰富的粗体颜色,令人回味的图像以及清晰易读的文本,这些信息一目了然。独特,精美的小部件不仅提供有用的信息,还使人们有机会个性化主屏幕。...您无法预测人们在收到通知后会做什么,因此必须避免包含可能会在设备屏幕上显示的私人信息。 即使用户没有响应,也要避免为同一件事发送多个通知。...不要在标题或副标题中包含您的应用名称或任何其他信息,请使文本简短以免被截断,并在编写文本时将本地化考虑在内。 不要使用快速动作进行通知。人们期望以其他方式接收来自应用程序的通知。
拥有强大的视觉效果,支持屏幕录像功能,截图图片编辑、转换和分享功能,不需要任何设计技能,都能够轻松创建高质量的截图,截屏和视频。...全新的图像编辑功能可让您真正转换屏幕截图。文本捕获等熟悉的功能可以带来回报。更先进的屏幕录像机可为您提供更流畅,更专业的录音。2.明智之举切换以自动使屏幕中的对象捕获可移动。...从错误消息,弹出窗口或文件菜单中捕获屏幕文本。无需重新输入所有文本即可轻松复制信息。4.文字替换现在,Snagit可以识别屏幕截图中的文本以便快速编辑。...6.更新其他模糊选项(Mac)我们对Mac上的模糊选项进行了新的改进。您现在可以在平滑模糊或像素化之间进行选择。新移动应用我们最近发布了两个全新的iOS应用程序,可让您直接在iOS设备上创建内容。...TechSmith Motion通过视频效果和文本叠加突出显示您的产品或品牌,将您的移动设备上的静态图像变为现实。TechSmith Capture会记录您的屏幕,以进行完美的培训和应用演示。
,对应于英文大写字母表中的索引,在屏幕上显示输出对应的英文字母。...20的正整数,在屏幕上逐行递增显示从01到该正整数,数字显示的宽度为2,不足位置补0,后面追加一个空格,然后显示’>’号,‘>’号的个数等于行首数字。...,然后统计其中数字和字母的个数,显示在屏幕上。...列表里的姓名和成绩与已经定义好的模板拼成一段话,显示在屏幕上。...,在选择题和后面的编程题中都会经常涉及,下图仅仅针对部分在基础编程题中出现的内容进行部分总结,后面在下篇当中会根据另外两类型的编程题中的常见考点进一步补充。
无障碍 无障碍设计使任何人(无论什么能力)都能成功地浏览、理解和使用您的应用。 原则 一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。...样式 布局 Material Design 的触摸目标指南使那些无法看到屏幕、或者运动不灵活的用户能够点击应用中的元素。 触摸目标 触摸目标是屏幕中响应用户输入的部分。...重要操作:将重要操作放在屏幕的顶部或底部(使用快捷方式即可访问) 相关项目:将相似层级的相关项目放在彼此相邻的位置 正确示例 通过把重要的操作放在屏幕顶部,使它们在层次结构中显得更重要。...使 UI 元素的标签可视化 屏幕阅读器用户需要知道屏幕中哪些元素是可以点击的。...屏幕阅读器会大声朗读屏幕上所有的文本,包括可见和不可见的替代文本。 无障碍文本包括可见文本(包括 UI 元素中的标签、按钮中的文字、链接和表单)和不可见的描述(没有文本标签的按钮的替代文字)。
Bootstrap 是一款备受欢迎的前端开发框架,为开发者提供了丰富的组件、样式和布局工具,使他们能够快速搭建出美观、一致的界面。...响应式设计 Bootstrap专注于响应式设计,能够自动适应不同大小的屏幕,从而确保网站在各种设备上都能够提供良好的用户体验。...无论是在桌面电脑、平板电脑还是手机上访问,Bootstrap都能够呈现出优雅的界面布局和功能。 2....这种设计方式能够确保网站在移动设备上具有良好的性能和用户体验,同时也有助于提高网站的加载速度和性能表现。 3....卡片组件包含了卡片标题(card-title)、卡片文本(card-text)和按钮(btn)等子组件,展示了 Bootstrap 的组件化设计和响应式布局。
领取专属 10元无门槛券
手把手带您无忧上云