Question

如果我放置一个带有标准Bootstrap CSS的按钮而不是在它上面应用自定义css，这是不是很糟糕吗？

我应该完全废弃Bootstrap并仅使用自定义吗？如果是这样，节省的成本是多少？我有另一个 Web开发人员告诉我这些额外的类在编译网页时会产生开销。我怎样才能衡量我个人认为无关紧要的速度？

以下是一个使用bootstrap css类的链接看起来像按钮的示例：

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
      .custom-btn-css{
        font-size: 16px;
        font-weight: bold;
        border-radius: 30px;
        border-width: 0;
        margin-top: 15px;
        padding: 10px 32px;
        color: white;
    }
</style>

<div class="container">
  <a  class="btn btn-primary btn-large custom-btn-css" href="#">Button Example</a>
</div>

＆＃13;

Answer 1

没有问题，首先你需要看看这个linik

https://stackoverflow.com/a/26640525/6572922

然后你需要考虑如何使用示例轻松地将自定义CSS添加到Bootstrap

http://www.kodingmadesimple.com/2015/01/add-custom-css-to-bootstrap-examples.html

此链接可以消除您的疑虑

Answer 2

将您的css放入 custom.css 文件中，您应按照此顺序覆盖bootstrap css。

</head>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/custom.css" />
    <script src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>


<body>
     <div class="container">
         <a  class="btn btn-primary btn-large custom-btn-css" href="#">Button Example</a>
     </div>
</body>

或使用内联css :(不推荐）

http://codepen.io/shivk/pen/QdyoRa

使用Bootstrap CSS结合自定义CSS - 这种做法不好吗？

2 个答案: