如何修改Django中Bootstrap模板的CSS样式？

Hey there! Let's walk through how you can customize the CSS of your Bootstrap template in Django—here are the most practical approaches:

1. 用自定义CSS覆盖Bootstrap样式（推荐） #

这是最安全且易维护的方式，不会破坏原Bootstrap文件，后续更新Bootstrap也不会丢失你的修改：

• 首先在你的Django项目的static/css目录下创建一个新的CSS文件，比如custom.css
• 在你的index.html中，把这个自定义CSS文件的引用放在Bootstrap CSS的后面（这样自定义样式优先级更高）：

  {% load staticfiles %}
  <!-- Bootstrap Core CSS -->
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  <!-- 自定义CSS - 必须放在Bootstrap之后 -->
  <link href="{% static 'css/custom.css' %}" rel="stylesheet">
  

• 打开custom.css，写入你想要修改的样式。比如要修改页面标题的颜色和导航栏背景：

  /* 修改页面标题样式 */
  .page-header h1 {
      color: #2c3e50;
      font-weight: 700;
  }
  
  /* 修改导航栏背景色 */
  .navbar-default {
      background-color: #3498db;
      border-color: #2980b9;
  }
  

• 小技巧：用浏览器开发者工具（按F12）选中要修改的元素，查看它的Bootstrap类名，然后写更具体的选择器来确保样式生效（比如用父元素类名+目标类名，提高优先级）

2. 直接修改Bootstrap源文件（不推荐） #

虽然可行，但不建议这么做：

• 如果你直接编辑bootstrap.min.css，下次更新Bootstrap版本时，你的所有修改都会被覆盖
• 如果你一定要临时修改，找到对应的样式规则修改即可，但记得备份原文件

3. 本地编译定制版Bootstrap（适合大规模定制） #

如果需要全面修改Bootstrap的主题色、间距等基础变量，推荐这种方式：

• 下载Bootstrap的Sass/Less源码版本
• 找到变量文件（比如Sass版的_variables.scss），修改你需要的变量：

  // 修改主色调
  $primary: #e74c3c;
  // 修改默认字体大小
  $font-size-base: 16px;
  

• 用编译工具（比如Node-sass）将修改后的源码编译成CSS文件，替换项目中原来的bootstrap.min.css
• 这种方式能保持Bootstrap的设计结构，避免大量的样式覆盖冲突

小提示 #

• 如果自定义样式没生效，检查：
  • 自定义CSS是否放在Bootstrap CSS之后
  • 选择器的优先级是否足够（可以临时用!important测试，但尽量少用，避免样式混乱）
  • Django的STATIC_URL配置是否正确，静态文件是否能正常加载

内容的提问来源于stack exchange，提问作者houwaida yahyaoui