Bootstrap

Bootstrap 基础教程

一、容器

在Bootstrap中，容器是构建页面布局的基础，它用于包裹和组织页面内容。

1. container 类

• 具有固定宽度的响应式容器
• 屏幕尺寸变化时自动调整宽度
• 两侧保留内边距（padding）
• 使用示例：

  <div class="container">页面内容</div>
  

2. container-fluid 类

• 占据全部视口宽度的容器
• 适合全屏布局场景
• 使用示例：

  <div class="container-fluid">全屏内容</div>
  

---

二、栅格网格系统

基于12列的响应式布局系统

1. 列数规则

• 总列数必须为12
• 超出部分自动换行
• 示例：

  <div class="row">
    <div class="col-md-6">左栏</div>
    <div class="col-md-6">右栏</div>
  </div>
  

2. 列偏移

• 使用 offset 类实现间距
• 示例：

  <div class="col-md-4 col-md-offset-4">居中内容</div>
  

---

三、文本样式

1. 标题

• 直接使用 <h1> 到 <h6> 标签
• 示例：

  <h1>一级标题</h1>
  <h3>三级标题</h3>
  

2. 突出强调

• 使用 lead 类
• 示例：

  <p class="lead">强调段落内容</p>
  

---

四、表单

1. inline 表单

• 使用 .form-inline 类
• 示例：

  <form class="form-inline">
    <input type="text" class="form-control" placeholder="输入内容">
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
  

---

五、导航栏

1. 固定位置

<!-- 顶部固定 -->
<nav class="navbar navbar-fixed-top">
  <div class="container">...</div>
</nav>

<!-- 底部固定 -->
<nav class="navbar navbar-fixed-bottom">
  <div class="container">...</div>
</nav>

2. 深色主题

<nav class="navbar navbar-inverse">
  <div class="container">...</div>
</nav>

---

六、分页与徽章

1. 分页组件

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

2. 徽章

<a href="#">
  通知 <span class="badge">5</span>
</a>

---

七、模态框

基础模态框

<!-- 触发按钮 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开弹窗
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
      </div>
      <div class="modal-body">
        <p>弹窗内容...</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

---