如何修改Bootstrap网站指定section背景色（以teachyourselfpython.com为例）

1. 让section背景铺满全屏并改成浅灰色 #

你之前把背景样式加在container上，肯定只能覆盖内容区呀——毕竟Bootstrap的container本身就是带左右内边距的居中容器。要铺满整个页面宽度，直接把样式加到外层的section标签上就行：

快速内联样式写法（适合测试）：

<section id="about" style="background-color: #f0f0f0;">
  <div class="container">
    <!-- 你原来的内容都不动 -->
  </div>
</section>

更推荐的外部CSS写法（方便后续维护）：

在你的网站CSS文件里加这段代码：

#about {
  background-color: #f0f0f0; /* 这个浅灰色可以换成你喜欢的色值，比如#f5f5f5更浅 */
}

欢迎区的修改逻辑一模一样，找到欢迎区对应的section标签（比如带id="welcome"或者类似标识的），用同样的方法给它加背景样式就行。

2. 修改“Our Resources”标题的颜色 #

这个标题用的是section-heading类，直接针对这个选择器改颜色就好：

快速测试用内联样式：

<h2 class="section-heading" style="color: #666;">Our Resources</h2>

规范的外部CSS写法：

/* 只改这个#about区域里的标题，不影响其他页面的同类型标题 */
#about .section-heading {
  color: #666; /* 换成你想要的颜色，比如深灰、蓝色都可以 */
}

要是你想全站所有section-heading都改颜色，去掉前面的#about就行。

额外小技巧 #

要是你用Bootstrap的内置类会更省心，比如直接给section加bg-light类，它自带浅灰色背景，不用自己写色值：

<section id="about" class="bg-light">

这样和Bootstrap的设计风格更统一哦～

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