Question

嗨，大家一直在玩引导板，并试图理解这一切。我试图在其他面板中重新创建一些面板。

例如，这个网站：Website

使用bootstrap pannel进行重新复制。这是我试图用面板重新创建，但我不知道2如何做到这一点。到目前为止，我已经做到了这一点，但它看起来并不像网站上的那个

代码：

<div id="mainContainer" class="container">
  <div class = "pannels">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Title</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
              <div class="panel-body">
              </div>
            </div>
            <div class="panel panel-default">
              <button type="button" class="btn btn-success">Success</button>
            </div>
          </div>
          <div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
            <h4>
            List Title
            </h4>
            <ul class="list-group">
              <li class="list-group-item">Item One</li>
              <li class="list-group-item">Item Two</li>
              <li class="list-group-item">Item One</li>
              <li class="list-group-item">Item Two</li>
              <li class="list-group-item">Item One</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="panel-footer">
      Here comes some text
      </div>
    </div>
  </div>
</div>

我正在努力让一切都达到合适的尺寸。因此，例如我的图片选项卡与网站相比尺寸不正确，我在重新创建时遇到问题。我也在努力缩小整个窗口的面板。我不确定我是否应该使用CSS来执行此操作或引导程序等。

无论如何，对此的任何帮助都会很棒。

谢谢

Answer 1

使用CSS。因此，在您的head标签中添加一个指向您自己的CSS文件的链接，该文件会添加您想要的样式。但请确保在链接Bootstrap CSS文件后列出。

实施例

<link rel="stylesheet" type="text/css" href="--Bootstrap URL Here--"/> <link rel="stylesheet" type="text/css" href="myCustomCSSFile.css"/>

然后在myCustomCSSFile.css内放置如下内容：

panel > panel { height: 50%; background-color: orange; }

或任何你想要的风格。

这是一个CSS教程：W3Schools CSS Tutorial

创建Bootstrap面板和样式

1 个答案: