在前端开发中，隐藏和显示元素是非常常见的需求。而 Twitter Bootstrap 3 是一个流行的前端框架，提供了一些方便易用的 CSS 类来实现这个需求。
本文将介绍如何在 Twitter Bootstrap 3 中使用 .hidden 和 .visible-* 类隐藏和显示元素，并使用 jQuery 来在需要时切换它们的状态。
隐藏元素
Twitter Bootstrap 3 提供了一个 .hidden 类来隐藏元素。当应用这个类时，元素会被设置为 display: none;，并且不会占据页面上的任何空间。下面是一个示例：
---- -----------------------------
如果你想针对不同的设备或屏幕尺寸隐藏元素，Bootstrap 3 还提供了一些 .visible-* 类。例如，.visible-xs 类可以让元素在手机屏幕上可见，但在较大的屏幕上隐藏。下面是一个示例：
---- --------------------------------------
显示元素
要在需要的时候显示一个被隐藏的元素，我们可以使用 jQuery 来操作元素的 CSS 属性。
首先，我们需要给需要显示的元素一个 ID 或类名。例如，假设我们有一个被隐藏的元素：
---- -------------- -----------------------------
然后，我们可以使用 jQuery 的 show() 方法来显示这个元素：
-----------------------
如果你想在显示元素时添加一些动画效果，可以使用 fadeIn() 方法。例如，下面的代码将以淡入的方式显示元素：
-------------------------
切换元素状态
最后，我们可以使用 jQuery 的 toggle() 方法来切换一个元素的状态，从而实现“点击按钮显示/隐藏元素”的效果。
例如，假设我们有一个按钮和一个需要显示/隐藏的元素：
------- -------------------------------- ---- -------------- -----------------------------
我们可以使用以下 JavaScript 代码来实现该功能：
------------------------------- - ------------------------- ---
上面的代码将绑定一个点击事件到按钮上，并在每次点击时切换元素的状态。
总结
在本文中，我们介绍了如何在 Twitter Bootstrap 3 中使用 .hidden 和 .visible-* 类来隐藏和显示元素，并使用 jQuery 来在需要时切换它们的状态。这些技术对于前端开发非常实用，可以帮助我们轻松地控制页面上的元素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9308