分享bootstrap学习笔记心得(组件及其属性)

1. 什么是bootstrap

Bootstrap是Twitter公司开发的一个前端框架，它基于HTML、CSS、JavaScript，通过预设的样式，可以使前端页面快速搭建和美化。现在已经成为全球最受欢迎的前端框架之一。

2. 常用组件及其属性

2.1 导航栏（Navbar）

Navgation Bar（导航栏）在Web开发中是一个重要的组件，特别是需要在页面上方或侧边展示菜单的时候。Bootstrap的导航栏非常实用，可以轻松创建水平或垂直的菜单。以下是一些常用属性：

属性	描述
bg（背景颜色）	设置导航栏背景颜色
text-color	设置导航栏字体颜色
expand（滚动）	响应式导航栏滚动或合并

示例：

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor03">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</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>
      </ul>
    </div>
  </div>
</nav>

2.2 标志（Badge）

徽章（Badge）可以在很多场景中使用，比如：显示通知数量、显示产品的特性、提醒用户等。以下是一些常用属性：

属性	描述
type	设置徽章样式
pill	设置为圆形
position	设置显示位置

示例：

<h1>标题 <span class="badge bg-secondary">New</span></h1>

2.3 按钮（Button）

按钮只是网站开发中最常使用的元素之一。Bootstrap使其变得更加有表现力和美观，其中一些属性如下：

属性	描述
type	编辑按钮的颜色
size	编辑按钮的大小
shape	编辑按钮的形状
block	编辑按钮的尺寸和显示格式
disabled	禁用按钮
animation	按钮上的动画类名称，例如“animated”和“bounce”

示例：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-info">Info</button>

3. 总结

这里介绍的只是Bootstrap的一小部分。使用Bootstrap的开发者可以使用这些组件之外的更多功能来帮助构建具有吸引力和易于操作的用户界面。相信随着时间的推移，我们会越来越多地使用这些组件。