Question

看起来我错过了一些愚蠢的错误，但是我多次检查了代码：看起来像根据文档完成的所有操作。我再次下载了最新的（3.0.3）引导版本......但页面看起来很简单（没有Bootstrap样式）：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="templates/bootstrap/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="templates/bootstrap/js/bootstrap.min.js"></script>
    <title>Page title</title>
  </head>
  <body>

    <a href='#' class='btn'>Скачать</a><br />
    <div class="pagination">
      <ul>
        <li><a href='#'>1</a></li>
        <li><a href='#'>2</a></li>
        <li><a href='#'>3</a></li>
        <li><a href='#'>4</a></li>
        <li><a href='#'>5</a></li>
        <li><a href='#'>6</a></li>
        <li><a href='#'>7</a></li>
        <li><a href='#'>8</a></li>
      </ul>
    </div>

  </body>
</html>

有人能指出我的错误吗？

Answer 1

根据Bootstrap 3的文档，您必须将btn-default与btn类放在一起。

http://getbootstrap.com/getting-started/

所以你的代码宁愿是<a href='#' class='btn btn-default'>Скачать</a>

关于分页，您必须将class="pagination"放到ul而不是其父div。

<ul class="pagination">
    <li><a href='#'>1</a></li>
    <li><a href='#'>2</a></li>
    <li><a href='#'>3</a></li>
    <li><a href='#'>4</a></li>
    <li><a href='#'>5</a></li>
    <li><a href='#'>6</a></li>
    <li><a href='#'>7</a></li>
    <li><a href='#'>8</a></li>
  </ul>

Answer 2

如果您需要响应式布局，则需要包含视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

此外，如果您使用的是默认下载，则还需要包含主题CSS文件。

<link rel="stylesheet" href="path/to/the/bootstrap-theme.min.css" />

Answer 3

<ul class="pagination">
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>5</a></li>
<li><a href='#'>6</a></li>
<li><a href='#'>7</a></li>
<li><a href='#'>8</a></li>

错了

一定是

<ul class="pagination">

«

1

2

3

4

5

»

href必须是“”而不是''

Bootstrap不能处理我的代码

3 个答案: