Bootstrap根据不同访问设备显示和隐藏特定内容

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

visible-xs visible-sm visible-md visible-lg hidden-xs hidden-sm hidden-md hidden-lg

打开边栏(ESC) 关闭边栏(ESC)

Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

Class	设备
.visible-xs	额外的小设备（小于 768px）可见
.visible-sm	小型设备（768 px 到 991 px）可见
.visible-md	中型设备（992 px 到 1199 px）可见
.visible-lg	大型设备（1200 px 及以上）可见
.hidden-xs	额外的小设备（小于 768px）隐藏
.hidden-sm	小型设备（768 px 到 991 px）隐藏
.hidden-md	中型设备（992 px 到 1199 px）隐藏
.hidden-lg	大型设备（1200 px 及以上）隐藏

应用实例：

根据不同设备访问，图片列表显示不同的列数，这样就需要根据列数不同，添加清除浮动标签，避免因图片大小不一样，出现排版错位

代码如下：

<volist name="rsrelatedlist" key="key" id="v" mod="2">
<div class="col-xs-6 col-md-3">
<a target="_blank" href="{:U('Home/Articles/getArticlesDetails/',array('articleId'=>$v['articleId']))}"><img src="<notempty name="v['articleImg']">__ROOT__/{$v['articleImg']}<else/>__ROOT__/Apps/Home/View/default/images/nopic.gif</notempty>"><h4>{$v['articleTitle']}</h4></a>
</div>
<!--列表每两条记录添加一个清除浮动，清除浮动在中型设备及以上显示，小型设备以下隐藏-->
<eq name="mod" value="1">
<div class="clearfix hidden-sm"></div>
</eq>
</volist>

赏

前一篇

bootstrap 中的data-toggle="...

后一篇

解决Bootstrap下拉菜单不可点击

相关推荐

AdminLTE管理后台提示框，Bootstrap框架提示框Tooltip

Bootstrap | 2018-08-16 11724

AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法： html代码： <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...

bootstrap修改col的间距

Bootstrap | 2019-09-11 9179

用bootstrap布局时会产生一些问题，比如col水平间距过大修改方法：重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现，col每列之间之所以有间距，是因为col里面的左右内边距都是15px形成的，这样...