当我将Twitter.Bootstrap版本从2.3改为3.0时,为什么按钮会失去他们的3D风格?

时间:2013-08-25 12:31:09

标签: twitter-bootstrap-3

我正在努力将Twitter.Bootstrap集成到我正在创建的新网站中,我的按钮看起来很扁平,而不像示例。在玩了一下后,通过更改样式表和javascript引用以使用旧版本,我能够获得3d外观按钮。

这是2.3.1的工作代码

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
      <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"/>
  </head>
  <body>
      <h1>Hello, world!</h1>
      <button class="btn">hello</button>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

显示如下所示

enter image description here

以下是仅更新版本号的相同代码

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <h1>Hello, world!</h1>
      <button class="btn">hello</button>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

以平面样式显示,如下所示。在这里看着它我也意识到还有其他一些风格问题。就像边距看起来不对而且字体看起来很糟糕。

enter image description here

1 个答案:

答案 0 :(得分:5)

您会找到名为bootstrap-theme{.min}.css的资产,其中包含光学改进的样式:

<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">

getbootstrap上查看新模板theme