搜索
创作
提问
登录注册
展开

关键词

实现一个带浮动标签的输入框

现在带浮动标签的输入框也是一个很常见的东西了，在材料设计里面有一个 TextInputLayout 的控件，我们可以用它实现这个效果。但是材料设计控件的样式比较固定，并不能满足我们产品设计的脑洞。 这里提供一个用属性动画实现的方法。 还是先看看效果吧： image.png 大概的思路是这样的： 控件有两层，一层是浮动的标签，一层是输入框。 当点击控件后，标签同时执行一个横向和纵向的缩放动画，还有一个向上移动的动画，让输入框获取到焦点并弹出键盘。 当输入框失去焦点时，判断是否有内容，如果没有则让标签执行一个复原的动画。 animatorSet.start(); } 复制代码 为了实现失去焦点，标签复原，我们需要监听输入框是否有焦点： etContent.setOnFocusChangeListener(new TextUtils.isEmpty(etContent.getText())) { animationDown(); } } }); 复制代码 这样就已经完成了一个带浮动标签的输入框

43710

【原创】bootstrap框架的学习 第八课 -

把标签和控件放在一个带有 class .form-group 的

  • 广告
    关闭

    腾讯云+社区系列公开课上线啦！

    Vite学习指南，基于腾讯云Webify部署项目。

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

    Bootstrap 表单

    表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。 下面列出了创建基本表单的步骤： 向父 <form> 元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的

    BootStrap应用开发学习入门

    <form role="form"> #垂直表单 是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式 .form-inline #内联表单 它的所有元素是内联的，向左对齐的，标签是并排的 .sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式 （常用输入框焦点 ） .checkbox #默认复选框样式 div标签 .radio #默认单选按钮样式 dic标签 .checkbox-inline #内联的复选框 .radio-inline #内联的单选按钮的 ---使用 class .sr-only，您可以隐藏内联表单的标签。 .bs-example #form标签输入组表单样式 .bs-example-form #form标签 .input-group #div 输入组 .input-group-addon

    21220

    前端|BootStrap 布局组件

    部分组件的使用 1.Bootstrap 图标(Glyphicons) 使用图标的方法非常简单，只需要在任何内联元素上应用对应的样式即可。 3.Bootstrap 输入框组 向 .form-control 添加前缀或后缀元素的步骤如下：把前缀或后缀元素放在一个带有 class .input-group 的

    BootStrap干货篇之表单

    是对所有的输入控件而言的,源码中将width设置为100%，表示会将这个输入控件占满一整行，form-group是用来对label和input更好的排版的，其中还有form-group-sm,form-group-lg ，源码中分别利用这个对带有form-control的控件设置了不同的高度，具体看源码，不过正常情况下还是使用form-group 内联表单 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 一定要有label标签，如果不想要label标签可以设置.sr-only将其隐藏如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。 --label中的for标签是用于绑定组件的，如果指定了for标签，input中的id也和for标签的内容相同，那么就会当鼠标点击<label>内容时会自动聚焦在input上--> <label 文本的Checkbox 和 radio 如果需要 <label> 内没有文字，输入框（input）正是你所期望的。

    36210

    第12-13课 创建表的联结创建联结内联结联结多个表外联结自联结使用带聚集函数的联结小结

    sql中最强大的功能之一就是表的联结。 为什么使用联结？ 因为在关系表中，数据是存储在各个表中的。如何一次检索出各个表中的数据，答案就是使用联结啦。 内联结 就是上一段代码中的等值联结，基于两个表之间的相等测试。 外联结用来处理那些需要包括没有关联的那些行的查询 比如： 对每个顾客下的订单进行计数，包括哪些至今尚未下订单的顾客 select customers.cust_id, orders.order_num c1.cust_name = c2.cust_name and c2.cust_contact = 'Jim Jones'; 使用带聚集函数的联结 select customers.cust_id, ，大多数情况都是内联结，偶尔用到外联结 必须提供联结条件，不然得出的是笛卡尔积，里面包含了不正确的数据 在一个联结中可以包含多个表

    11510

    Bootstrap 排版上机实例演示流程展示

    使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 ---- 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

    我是标题6 h6
    结果如下所示： 内联子标题 如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本 Bootstrap 提供了一些用于强调文本的类，如下面实例所示： 实例 本行内容是在标签内
    本行内容是在标签内
    本行内容是在标签内

    本行内容带有一个 primary class

    本行内容带有一个 success class

    本行内容带有一个 info class

    本行内容带有一个 warning class

    10910

    Jump Start Bootstrap 第3章

    容器内页眉 这里有一个小问题，我们看见页眉卡在了浏览器的左边，这是因为我们没有定义一个容器去包裹我们页面上的所有的内容。 现在，我们把页眉标签放入一个包含“container”的

    对于每个标签和输入字段，我们需要一个包含类”form-group”的

    bootstrap快速入门笔记（七）-表格,表单

    标识危险或潜在的带来负面影响的动作 7，响应式表格：将.table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。 .form-group也可以； 2，内联表单： <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。 在内联表单，我　　　　们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需　　　　　　求，可能需要一些额外的定制化组件。 　　 b,一定要添加 label 标签: 3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。 2），输入控件组：如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考输入控件组。 　　3），文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。

    50530

    一步一步学习Bootstrap系列--表单布局

    前言：Bootstrap 属于前端 ui 库，通过现成的ui组件能够迅速搭建前端页面，简直是我们后端开发的福音，通过几个项目的锻炼有必要总结些常用的知识，本篇把常用的Bootstrap表单布局进行归纳 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。 下面列出了创建基本表单的步骤： 向父 <form> 元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的

    Bootstrap学习文档（二）

    Bootstrap 标签和样式 Bootstrap 中把一些标签的样式重置了，也即是为一些标签设置了带有 Bootstrap 风格的样式，如 h 标签，p 标签等等，这其中包含了 HTML5 标签。 如果你想用Bootstrap h 标签的六级标题样式，还可以直接在标签中加上 h1~h6 的类名，如： 标题样式 表格 Bootstrap 也重置了表格这个标签，加入了表格常用的样式，比如隔行换色，加边框等，下面是 Bootstrap 的表格类名，它们可以组合使用。 按钮的尺寸 btn-lg btn-md btn-sm btn-xs btn-block 让按钮从内联块级元素变为块级元素，可以撑满整个父级元素，也即是把按钮的宽度置为100%； 按钮的状态 active 在span标签里面加上caret的类名，就可以变成一个下三角的符号。在button里面加上close的类名，并在button中加上×的转义符号就可以出现一个关闭的按钮。

    34950

    【原创】bootstrap框架的学习 第五课

    一.Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。 <! 二.内联子标题

    我是标题1 h1. 我是副标题1 h1

    我是标题2 h2. 四、默认强调标签粗体文本、斜体文本 本行内容是在标签内
    本行内容是在标签内
    本行内容是在标签内

    本行内容带有一个 info class

    本行内容带有一个 warning class

    这是一个带有源标题的引用。

    20430

    BootStrap

    --页面宽度自适应设备的屏幕宽度--> <! --内联标签应用标题样式--> 一级标题36px 二级标题30px 三级标题 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 表单 　　　　内联表单 　　　　表单状态 　　　　 常用Bootstrap组件（就是一些搭配起来的效果，也涉及到一些动作相关的，所以需要引入js文件了） 字体图标(fontawesome里面比较全) 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章

    6230

    分层 Blazor 组件

    它将模式对话框的临时非 HTML 标记转换为 Bootstrap 专用标记（请访问 bit.ly/2RxmWJS）。 输入标记和相应输出之间的任何转换都是通过 C# 代码执行的。 图 1 展示了熟悉的 HTML5 标记树，这是为 Bootstrap（3.x 和 4.x 版本）正常运行所必需。 此标记包含包装器 Modal 元素及其两个子级子树：一个用于切换按钮，一个用于实际内容。 根据模式的 Bootstrap 语法，任何对话框都需要显示触发器。 如图 4 所示，在呈现模式对话框的预期 Bootstrap 标记方面，Content 组件承担了大部分工作。 它定义总体 HTML 布局，并使用模板属性导入标记的详细信息（页眉、页脚和正文标记），这些信息可确保给定对话框是唯一的。由于有了 Blazor 模板，任何实际标记都可以指定为调用方页中的内联内容。

    84310

    前端基础：Boostrap

    也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。 浏览器支持：所有的主流浏览器都支持 Bootstrap。 <button class="btn btn-success">极速入职</button> </body> </html> Usage of Bootstrap 表格 标签更丰富更加语义化， 效果更佳美观 丰富的标签

    为表格添加基础样式 表格标题行的容器元素 表格主体中的表格行的容器元素 表格行 内添加斑马线形式的条纹 (IE8 不支持) ，隔行变色 .table-bordered 为所有表格的单元格添加边框 .table-hover 在 内的任一行启用鼠标悬停状态 <form class="form-inline"> 表单控件 输入框 <form>

    对bootstrap框架的一些测试（1）

    bootstrap的栅格系统，默认将整个屏幕放在一个“container”容器中，然后以row为子元素，将‘col‘作为直接子元素，把整个屏幕分成12份，然后对每一份进行操作。 对文本进行操作 <! 栅格系统只会对屏幕比像素切割点更大的屏幕起作用，在比切割点更小的地方并不会起作用，二是占满整个屏幕。 在bootstrap中，对文本一共可以设置到六级标题：

    ....
    可以使用small内联标签，对文本进行缩小（可以设置为副标题），使用em标签进行斜体标记，使用html内置的strong标签，进行文本强调；使用class=“lead”进行强调，使用 u标签进行下划线标记（或者使用ins标签），使用class=“text-center”进行文本居中。 中，如果需要内联input元素class的话，请将input放在form的里面，比如： <form>

    28930

    Web前端学习笔记之BootStrap

    --除了使用h标签，Bootstrap内置了相应的全局样式--> <! --内联标签应用标题样式--> 一级标题36px 二级标题30px 三级标题 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 表单 内联表单 表单状态 带图标的表单 按钮 <a class="btn btn-default" href

    常用Bootstrap组件 字体图标 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章 页头 缩率图 进度条 模拟滚动的进度条： var $d1 = $("#d1"); var width 设置viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content=”width=device-width

    42920

    【BootStrap】栅格系统、表单样式与按钮样式-附有源码

    Bootstrap的栅格系统，由一个行(.row)和多个列构成。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的网页布局中。 反馈图标只处理带 <input class="form-control"> 这个class的input 图标、label 和输入控件组 对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组 为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 sr-only 类来实现。 如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。 在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理）） <a href

    12610
    点击加载更多

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。 腾讯云服务器（CVM）为您提供安全可靠的弹性云计算服务。只需几分钟，您就可以在云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费，可以为您节约计算成本。

    HOT100%CPU性能，云服务器1核2G首年60元，还有多款热门云产品满足您的上云需求！

    相关资讯

    热门标签

    更多标签

    云+社区

    扫码关注云+社区

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2022 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 京公网安备 11010802017518 粤B2-20090059-1

    扫码关注云+社区

    领取腾讯云代金券

    默认的表格单元格