Question

我想使用Bootstrap 4卡创建网格/列表视图。

<div class="well well-sm">
    <strong>Display:</strong>
    <div class="btn-group">
        <a href="#" id="list" class="btn btn-default btn-sm"><span class="fas fa-list-ul"></span>List</a> 
        <a href="#" id="grid" class="btn btn-default btn-sm"><span class="fas fa-th-large"></span>Grid</a>
    </div>
</div>

jquery：

$('#list').click(function(event){
  event.preventDefault();
  $('.card-deck').addClass('list-group-item');
  $('.card-deck').removeClass('grid-group-item');
  $(this).addClass('active');
  $('#grid').removeClass('active');
});

$('#grid').click(function(event){
  event.preventDefault();
  $('.card-deck').removeClass('list-group-item');
  $('#list').removeClass('active');
  $(this).addClass('active');
  $('.card-deck').addClass('grid-group-item');

});

我从另一篇文章中获得了代码：Bootstrap 4 card/panel with image left of header and title

<div class="card">
    <div class="row no-gutters">
        <div class="col-auto">
            <img src="//placehold.it/200" class="img-fluid" alt="">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Description</p>
                <a href="#" class="btn btn-primary">BUTTON</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">

    </div>
</div>

但是我想要的是，当单击网格时，视图变为像这样的堆叠式卡块：

<div class="card-deck>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>

这怎么办？ 与引导程序4配合使用对它很重要。

感谢您的帮助。

纳比

Answer 1

首先，我要向您的每个容器中添加一个import java.awt.*; import java.awt.im.InputContext; import java.util.Locale; import java.util.concurrent.Callable; import javax.swing.*; import org.assertj.swing.edt.GuiActionRunner; import org.assertj.swing.fixture.FrameFixture; import org.assertj.swing.junit.testcase.AssertJSwingJUnitTestCase; import org.junit.*; public class SimplePanelTest extends AssertJSwingJUnitTestCase { private FrameFixture frame; @BeforeClass public static void classInit() { Locale.setDefault(Locale.GERMAN); System.setProperty("assertj.swing.keyboard.locale", "de"); InputContext.getInstance().selectInputMethod(Locale.GERMAN); } @Override protected void onSetUp() { JFrame testFrame = GuiActionRunner.execute(new Callable<JFrame>() { @Override public JFrame call() throws Exception { JFrame f = new JFrame(); f.setLayout(new BorderLayout()); f.setTitle("Test"); f.setLocationRelativeTo(null); f.add(new MyPanel()); return f; } }); frame = new FrameFixture(robot(), testFrame); frame.show(new Dimension(720, 480)); } public static class MyPanel extends JPanel { public MyPanel() { setLayout(new BorderLayout()); JTextArea area = new JTextArea(); area.setName("my-field"); add(area); } } @Test public void testSimpleTextEntry() { frame.textBox("my-field").enterText("\"{<"); } }，例如一个类或一个id“ grid-view”和“ list-view”：

id

和

<div class="card" id="grid-view">
    <div class="row no-gutters">
        <div class="col-auto">
            <img src="//placehold.it/200" class="img-fluid" alt="">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Description</p>
                <a href="#" class="btn btn-primary">BUTTON</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">

    </div>
</div>

然后，我将在Js文件中使用<div class="card-deck" id="list-view"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>和hide()函数：

show()

确保在页面初始化时隐藏其中一个视图。

带有Bootstrap 4卡的网格/列表切换视图

1 个答案: