如果您计划进行任何较大的更改，那么直接在bootstrap中进行更改并重新构建可能是一个好主意。然后，可以减少加载的数据量。

请参考GitHub上的Bootstrap以获得构建指南。

链接custom.css文件作为bootstrap.css下面的最后一个条目。Custom.css样式定义将覆盖bootstrap.css

Html

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

复制custom.css中图例的所有样式定义并对其进行更改(如margin-bottom:5px;-这将覆盖margin-bottom:20px;)

检查控制台上的目标按钮。 转到元素选项卡，然后将鼠标悬停在代码上，确保找到默认id 或引导程序使用的类。 使用jQuery/javascript调用函数来覆盖样式/文本。

请看这个例子:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

对于ruby on rails用户——

在应用程序CSS文件中，确保首先提到引导文件，然后是自定义CSS样式表。这样，您编写的后一个CSS代码就会覆盖前一个CSS代码。如果需要，也使用!important

 *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'

这应该不会对加载时间造成太大影响，因为您覆盖了基本样式表的部分内容。

以下是我个人遵循的一些最佳实践:

总是在基本CSS文件之后加载自定义CSS(没有响应)。 尽可能避免使用!important。这可以覆盖基本CSS文件中的一些重要样式。 如果你不想丢失媒体查询，总是在custom.css之后加载bootstrap-responsive.css。-必须遵循 更喜欢修改所需的属性(不是全部)。

在html的头部部分，将custom.css放在bootstrap.css下面。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

然后在custom.css中，你必须对你想覆盖的元素使用完全相同的选择器。在legend的情况下，它只是在custom.css中保持legend，因为bootstrap没有任何更具体的选择器。

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

但以h1为例，你需要注意更具体的选择器比如。jumbotron h1，因为

h1 {
  line-height: 2;
  color: #f00;
}

不会覆盖

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

这里有一个css选择器的特异性的帮助解释，你需要了解确切地知道哪种样式规则将应用于一个元素。 http://css-tricks.com/specifics-on-css-specificity/

其他一切只是复制/粘贴和编辑样式的问题。