按钮自适应，BTN自适应下载

weixin_39821620 2019-05-16 12:30:17

按钮自适应，BTN自适应，方便大家以后不需要写btn样式，Lesktop开源JS控件库， lhgcore.J
相关下载链接：//download.csdn.net/download/lwflt/2233602?utm_source=bbsseo

...全文

6 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

按钮自适应，BTN自适应，方便大家以后不需要写btn样式，Lesktop开源JS控件库， lhgcore.J

呵呵很好哦 css自适应宽度的按钮！

原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <style type=”text/css”> .btn a{text-decoration:none;} .btn{display: inline-block; background: url(s_btn.png) no-repeat 0 0; height: 22px; line-height: 22px; color: #666; vertical-align:top;} .btn i{displa

日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往右排列。这里提供一个解决方法，示例如下：有如下代码：

<button class=btn>1</button> <button class=btn>2</button> <button class=btn>3</button> <button class=btn>4</button> <button class=btn>

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。使用方法一：使用bower进行安装bower install --save weui方法二：使用npm进行安装npm install --save weui开发git clone https://github.com/weui/weui.git cd weui npm install -g gulp npm install gulp -ws运行gulp -ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开 http://localhost:8080/example。手机预览请用微信扫码 http://weui.github.io/weui/Button按钮可以使用a或者button标签。wap上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=""全局触发。按钮常见的操作场景：确定、取消、警示，分别对应class：weui_btn_primary、weui_btn_default、weui_btn_warn，每种场景都有自己的置灰态weui_btn_disabled，除此外还有一种镂空按钮weui_btn_plain_xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：按钮按钮确认确认按钮按钮按钮按钮按钮按钮 CellCell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section headerweui_cells_title以及cellsweui_cells。cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成，cell采用自适应布局，在需要自适应的部分加上classweui_cell_primary即可：带说明的列表项带说明的列表项标题文字说明文字 Cel

下载资源悬赏专区

12,795

社区成员

12,332,190

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章