twitter-bootstrap-3 - 当我将 Twitter.Bootstrap 版本从 2.3 更改为 3.0 时,为什么按钮会失去其 3d 样式?

标签 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

最佳答案

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

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

getbootstrap 上查看新模板 theme .

关于twitter-bootstrap-3 - 当我将 Twitter.Bootstrap 版本从 2.3 更改为 3.0 时,为什么按钮会失去其 3d 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18429007/

相关文章:

jquery - Bootstrap 选择 - 单击时添加数据样式属性

css - 关闭引导模式后 img 无法正确显示

jquery - bootstrap 是否支持列宽等于零以便在超小屏幕中隐藏网格列?

css - col- 在移动设备上的全宽垂直导航栏

jquery - Bootstrap Image Gallery - 根据相册显示图片

css - 无法弄清楚是什么导致我的视​​口向右滚动

jquery - Bootstrap 3 : Responsive Table with Floating Header

ruby-on-rails - 将动态变量传递给部分以在模态中呈现

jquery - 使用向上滑动内容制作 bootstrap 3 固定页脚?

javascript - 手动自动生成href