html - CSS 模板不适用于我的页面

Question

我正在制作一个博客类型的页面来练习一些web.py。我制作了一个粗略的 html 文件，并尝试应用 CSS Bootstrap /模板，但它不再适合我了。本质上，这是主页的 HTML。

` 主页动态

个人资料

消息

friend

社区

                <li><a href="#"><span class="mdi mdi-bell"> </span> Notifications</a></li>
                <li class="seperator"></li>
                <li><a href="#"><span class="mdi mdi-settings"> </span> Settings</a></li>

                <li><a href="#"><span class="mdi mdi-help-circle"> </span> Help</a></li>

            </ul>
        <div class="col-md-6">

        <div class="post-box">
            <form id="post-activity">
                <textarea name="content" class="post-input" placeholder="What's new, $session['user']['name']?"></textarea>
                <button id="post-button" class="btn btn-info btn-raised waves-effect" type="submit"><span class="mdi mdi-send"></span> Post</button>
            </form>
        </div>

            <div class="post-card">
                <div class="header">
                    <div class="avatar"></div>
                    <a href="/profile">Adrian Bernat</a>
                </div>
                <div class="content">
                    Test Content
                </div>
                <div class="footer">

                    <button class="btn btn-round waves-effect btn-default btn-raised btn-like"><span class="mdi mdi-thumb-up-outline"></span> Like</button>
                    <button class="btn btn-round waves-effect btn-default btn-raised btn-comment"><span class="mdi mdi-comment-text-outline"></span> Comment</button>

                </div>

            </div>
        </div>
    </div>`

我不确定粘贴是否正确，但应该应用我拥有的那些 CSS 配置文件，但是当我运行 cope 时，HTML 显示为原始且未设置样式。有谁知道为什么吗？

编辑:here是我得到的，here它应该是这样的。

Answer 1

您是否确保包含 Bootstrap 的 CSS 文件？

即使您为 html 元素提供 Bootstrap 类，您仍然需要加载 Bootstrap 以使样式生效。

在下面的示例中，我使用这个加载了 Bootstrap :

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

您可能想也可能不想这样做。 有很多方法可以include bootstrap files with your html .

我没有编辑您的 html。我只在顶部加载了 Bootstrap 。

这是你想要的吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<ul>
  <li><a href="#"><span class="mdi mdi-bell"></span> Notifications</a></li>
  <li class="seperator"></li>
  <li><a href="#"><span class="mdi mdi-settings"></span> Settings</a></li>
  <li><a href="#"><span class="mdi mdi-help-circle"></span> Help</a></li>
</ul>

<div class="col-md-6">
  <div class="post-box">
    <form id="post-activity">
      <textarea name="content" class="post-input" placeholder="What's new, $session['user']['name']?"></textarea>
      <button id="post-button" class="btn btn-info btn-raised waves-effect" type="submit"><span class="mdi mdi-send"></span> Post</button>
    </form>
  </div>

  <div class="post-card">
    <div class="header">
      <div class="avatar"></div>
      <a href="/profile">Adrian Bernat</a>
    </div>
    <div class="content">
      Test Content
    </div>
    <div class="footer">
      <button class="btn btn-round waves-effect btn-default btn-raised btn-like"><span class="mdi mdi-thumb-up-outline"></span> Like
      </button>
      <button class="btn btn-round waves-effect btn-default btn-raised btn-comment"><span class="mdi mdi-comment-text-outline"></span> Comment
      </button>
    </div>
  </div>