Bootstrap CSS编码规范学习笔记

前言

Bootstrap 是一个流行的开源前端框架，它提供了许多 CSS、JavaScript 和 HTML 的预定义组件和样式，可以帮助我们快速地构建 responsvie web 应用。 然而，使用 Bootstrap 对于初学者来说可能会有些困难，因此，在这篇文章中，我们将介绍如何遵循 Bootstrap 的编码规范，以及如何使用 Bootstrap 创建漂亮的 Web 页面。

编码规范

命名约定

在编写 Bootstrap 样式时，我们需要使用一些命名约定。首先，对于类名，建议使用小写字母和短横线（例如，navbar-brand）。这样做可以增加代码的可读性，并且不同的单词之间更容易区分开来。其次，建议使用语义化的类名，这样可以使代码更具有可读性和可维护性。

样式文件顺序

在编写样式文件时，建议按照以下顺序组织 CSS 规则：

1. 布局属性（display、position、float、clear、等）
2. 盒模型（width、height、padding、border、margin 等）
3. 字体排列（font-size、line-height、text-align、text-indent 等）
4. 背景（background、opacity、颜色等）
5. 其他（cursor、overflow、z-index 等）

样式文件结构

在编写样式文件时，建议按照以下结构组织 CSS 规则：

1. 重置、通用规则和全局样式
2. 组件样式
3. 布局样式

注释

在编写代码时，应该添加注释来使代码更具可读性。对于组件类别，应该始终在样式文件中添加一个注释块。

cssCopy Code
/* Button */
.btn { ... }
.btn-primary { ... }
.btn-secondary { ... }

/* Card */
.card { ... }
.card-header { ... }
.card-body { ... }
.card-footer { ... }

实例演示

使用 Jumbotron 创建页面首部

htmlCopy Code
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

创建导航栏

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

创建响应式网格

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

结论

本文介绍了 Bootstrap CSS 编码规范，包括命名约定、样式文件顺序、样式文件结构和注释。此外，我们还提供了几个使用 Bootstrap 的示例，包括 Jumbotron、NavBar 和响应式网格。希望这篇文章可以帮助您更好地理解 Bootstrap 并加快网页开发速度。