如何使用jQuery Terminal和Bootstrap/CSS更改样式并创建左上角的终端？

iezvtpos 于 2023-04-18 发布在 Bootstrap

关注(0)|答案(1)|浏览(169)

我希望jQuery终端的输入和输出完全在Bootstrap分割的屏幕的左上角，尽管我不确定如何做到这一点。理想情况下，它应该类似于Codecademy页面（类似于this，除了终端在左上角）。
我原以为在div的左侧块中添加以下终端代码就可以了。但是，这样做，终端盒反而在左侧类的外部和下方。
有什么建议吗？一般来说，我只是不知道如何使用Bootstrap/CSS来操作jQuery终端。

var body = $('body').terminal(
  function(command) {
    this.echo(command);
  }, {
    greetings: 'Test',
    name: 'Test',
  }
);

terminal_print = function(str) {
  body.echo(str);
};

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width:768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background: black;
}

.rightside {
  background: white;
}

<head>
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="row g-0">
    <div class="col-md-6 g-0">
      <div class="leftside"></div>
    </div>

    <div class="col-md-6 g-0">
      <div class="rightside d-flex justify-content-center align-items-center">
        This page is intentionally blank
      </div>
    </div>
  </div>
</body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/70934556/how-can-i-use-jquery-terminal-and-bootstrap-css-to-change-the-style-and-create-a

1条答案

按热度按时间

voase2hg1#

您已经将body元素指定为目标，为什么不使用您的元素呢？（代码位于何处并不重要--您将在第一行指定目标元素。）
为了清楚起见，我已经将您的标识类转换为ID，并更新了您的终端函数名。

var terminal = $('#leftside').terminal(
  function(command) {
    this.echo(command);
  }, {
    greetings: 'Test',
    name: 'Test',
  }
);

terminal_print = function(str) {
  terminal.echo(str);
};

#leftside,
#rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width:768px) {
  #leftside,
  #rightside {
    height: 100vh;
  }
}

#leftside {
  background: black;
  color: #ddd;
}

#rightside {
  background: white;
}

<head>
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="row g-0">
    <div class="col-md-6 g-0">
      <div id="leftside"></div>
    </div>

    <div class="col-md-6 g-0">
      <div id="rightside" class="d-flex justify-content-center align-items-center">
        This page is intentionally blank
      </div>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-04-18

我来回答

如何使用jQuery Terminal和Bootstrap/CSS更改样式并创建左上角的终端？

1条答案

相关问题

热门标签

最新问答