Bootstrap根据不同访问设备显示和隐藏特定内容
taotaoit Bootstrap 2017-05-27 2837 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6869076 2631 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
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> 


版权声明:本站原创文章,允许自由转载。

相关推荐
AdminLTE管理后台提示框,Bootstrap框架提示框Tooltip
Bootstrap | 2018-08-16 11335
AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法: html代码: <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...
bootstrap修改col的间距
Bootstrap | 2019-09-11 8741
用bootstrap布局时会产生一些问题,比如col水平间距过大 修改方法: 重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现,col每列之间之所以有间距,是因为col里面的左右内边距都是15px形成的,这样...
评论:0条
评论加载中...
发表评论