显示或隐藏内容

Bootstrap3 中，.show和.hidden类可以强制任意元素显示或隐藏（对于屏幕阅读器也能起效），但是，这些类只对块级元素起作用，对行内级元素不起作用。如：

  1. <div class="show">...</div>
  2. <div class="hidden">...</div>

跟快速浮动的做法一样，.show和.hidden类也是通过!important来避免 CSS 样式优先级问题。并且，它们还可以作为 mixin 使用。如：

  1. // 类定义
  2. .show {
  3.   display: block !important;
  4. }
  5. .hidden {
  6.   display: none !important;
  7. }
  8. .invisible {
  9.   visibility: hidden;
  10. }
  11.  
  12. // 作为 mixin 使用
  13. .element {
  14.   .show();
  15. }
  16. .another-element {
  17.   .hidden();
  18. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

更多推荐

Bootstrap显示或隐藏内容