javascript - 如何更改 Bootstrap 响应式？

Question

我们计划以其他方式改变 bootstrap 的响应特性。请看当前的html

$(function () {
	$('.panel-title a').on('click', function () {
  	$(this).closest('.panel').siblings().toggle();
   });
 });

.panel-title a {
  display: block;
  text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
  text-decoration: none;
}
.panel-title a:before {
  content: "<";
  position: absolute;
  left: 30px;
}
.panel-title a.collapsed {
  text-align: left;
}
.panel-title a.collapsed:before {
  content: "";
}
.panel-title a.collapsed:after {
  content: ">";
  position: absolute; 
  right: 30px;
}

.panel-body {
  animation: shake;
  animation-duration: 1s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div>
        
        
        <div class="col-md-6   col-sm-6 col-xs-12">
        
                   <div class="panel-group" id="accordion">
                    <div class="panel panel-default  panel1">
                      <div class="panel-heading">
                        <h4 class="panel-title wobble">
                          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a>
                        </h4>
                      </div>
                      <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>
                        </h4>
                      </div>
                      <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a>
                        </h4>
                      </div>
                      <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                       
                       <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a>
                        </h4>
                      </div>
                      <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                  </div>
        
        </div>

此处当调整窗口大小时或在移动设备中查看时，列表组显示如下。请看图

但我们需要改变这一点。当窗口被调整大小时，它的宽度小于某个数量，那么我们想在窗口的右侧部分(图像的右侧)显示一个箭头或设置图标。

请查看所需的输出

当我们点击设置图标时，图像被替换为 列表组中带有关闭图标的内容。这样用户就可以在没有图像的情况下在全窗口中看到列表组，并且他可以操作所有操作。在此之后，他可以通过单击关闭按钮来关闭该列表组。请帮助解决这个问题。

Answer 1

When window is resized and it's width is less than some amount then we want to show a arrow or settings icon on the right side part of the window (right side of the image).

这可以通过添加带有所需图标的元素并使用 Bootstrap 的辅助类 visible-xs 来实现。喜欢:

<span id="toggle" class="visible-xs"><i class="fa fa-cog fa-2x"></i></span>

并添加hidden-xs到右栏，这样标签 Accordion 就不会同时显示 xs屏幕分辨率。

然后您需要使用 $(window).width()检测窗口大小，如果窗口大小为特定大小或更小，它将允许触发(单击)齿轮图标以隐藏图像并显示选项卡内容。

如果您增加尺寸，图像会重新出现，标签位于右侧。

编辑

After this he can close that list group by clicking close button.

我明白你现在想做什么了。

所以，首先我将字体图标更改为与您的图像匹配的图标。

<span id="toggle" class="visible-xs"><i class="fa fa-plus-square fa-2x">

点击触发器最初只有在您调整了窗口大小时才会起作用。您可以添加相同的 click .resize() 之外的事件功能来纠正这一点。 (请参阅更新后的 JS 中的注释)

以便用户可以在选项卡和图像之间隐藏和显示(切换)，您将使用 .toggle()并更改图标图像使用 .toggleClass()

$(this).children().toggleClass('fa-plus-square fa-minus-square');

注意:保留.resize()在那里的功能，以便在大屏幕上调整窗口大小时它仍然有效。正如 Ron 指出的那样，我还修复了 .resize()函数表现相同。

instead of shake how can i change animation to Slide toggle from right to left

TLDR；

@keyframes 允许您通过在动画 (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) 上建立路径点来控制 CSS 动画序列中的中间步骤。我添加了 slideInRight关键帧规则让你看到它和抖动之间的区别。如果您希望将此类内容实现到您的元素中，我建议您阅读@keyframes，以便您将来可以创建自己的内容。

$(function() {
  $('.panel-title a').on('click', function() {
    $(this).closest('.panel').siblings().toggle();
  });

  // this takes care of screensizes that start off at small sizes
  // like tablets or mobile devices
  $('#toggle').on('click', function() {
    $(this).children().toggleClass('fa-plus-square fa-minus-square');
    $(this).prev().toggle();
    $(this).closest('div').siblings().toggleClass('hidden-xs');
  });

  // provide the same size affect and fall back on desktop sizes
  // when resizing window.
  $(window).resize(function() {
    var windowSize = $(window).width();
    if (windowSize < 768) { // BS breaking point for -xs
      $('#toggle').on('click', function() {
        $(this).children().toggleClass('fa-plus-square fa-minus-square');
        $(this).prev().toggle();
        $(this).closest('div').siblings().toggleClass('hidden-xs');
      });
    } else {
      $('#toggle').prev().show();
      $('#toggle').closest('div').siblings().addClass('hidden-xs');
    }
  });

});

.panel-title a {
  display: block;
  text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
  text-decoration: none;
}
.panel-title a:before {
  content: "\f177";
  font-family: "FontAwesome";
  position: absolute;
  left: 30px;
}
.panel-title a.collapsed {
  text-align: left;
}
.panel-title a.collapsed:before {
  content: "";
}
.panel-title a.collapsed:after {
  content: "\f054";
  font-family: "FontAwesome";
  position: absolute; 
  right: 30px;
}

.panel-body {
  animation: slideInRight;
  animation-duration: 1s;
}
.img-container {
  margin-bottom: 50px;  
}
#toggle {
  position: fixed;
  top: 10px;
  right: 20px;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12 col-sm-6 col-md-6 img-container" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> 
   <span id="toggle" class="visible-xs"><i class="fa fa-plus-square fa-2x"></i></span>
   </div>
        
        <div class="col-xs-12 col-sm-6 col-md-6 hidden-xs">
        
                   <div class="panel-group" id="accordion">
                    <div class="panel panel-default  panel1">
                      <div class="panel-heading">
                        <h4 class="panel-title wobble">
                          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a>
                        </h4>
                      </div>
                      <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>
                        </h4>
                      </div>
                      <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a>
                        </h4>
                      </div>
                      <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                       
                       <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a>
                        </h4>
                      </div>
                      <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                    </div>
                  </div>
        
        </div>