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 及以上）隐藏

 

---

• 版权声明：本站原创文章，于2018年8月8日14:53:27，由 译生不轻松 发表，共 1026字。
• 转载请注明：Bootstrap 响应式实用工具 - 译生不轻松

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