Bootstrap 响应式实用工具

在编写网站程序时,常常需要考虑到客户使用体验。因此,电脑端和移动端常常要进行区分,有些可内容以显示,有些不用显 […]

在编写网站程序时,常常需要考虑到客户使用体验。因此,电脑端和移动端常常要进行区分,有些可内容以显示,有些不用显示。根据设备屏幕显示大小,我们可以选择显示内容,这样我们网站在不同的设备上都能给用户呈现最佳的视觉效果。
例如,在电脑端,我的网站侧边栏有一个搜索功能,但是,在移动端,这个功能同样很重要,而我的网站版面有限,侧边栏在手机端不显示。我只想调用其搜索功能。因此,这时我们可以通过bootstrap来实现只在手机端某区域显示所需功能。
以我网站为例,我在自己网站index.php中写入了以下代码:

<div class="footer_search visible-xs visible-sm">
<aside class="widget clearfix">
<form id="searchform" action="https://krisshang.com">
<div class="input-group">
<input type="search" class="form-control" placeholder="搜索…" value="<?php the_search_query(); ?>" name="s">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</span> </div>
</form>
</div>

这样,我们就实现了搜索功能电脑端隐藏,移动端显示。同样的,我们也可以专门隐藏移动端某些功能。只要将标红代码换成以下hidden-xs hidden-sm即可。

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

 


本文由 语料库 作者:Tmxchina 发表,其版权均为 语料库 所有,文章内容系作者个人观点,不代表 语料库 对观点赞同或支持。如需转载,请注明文章来源。
2

评论:

2 条评论,访客:0 条,站长:0 条

发表评论