bootstrap基础知识学习笔记

下面我将详细讲解 bootstrap 基础知识的学习笔记。

1. 基础概念

1.1 什么是Bootstrap？

Bootstrap 是 Twitter 公司开发的一个用于开发响应式布局、移动设备优先的前端框架，它基于 HTML、CSS 和 JavaScript。Bootstrap 提供了一个全面、强大的基础样式和组件，使得开发者能够快速搭建漂亮、直观的 Web 页面和 Web 应用程序。

1.2 Bootstrap 中的网格系统

Bootstrap 中的网格系统由行（rows）和列（columns）组成。每一行都是水平分割为 12 个等宽的列，开发人员可以根据自己的需要来选择使用这些列。

1.3 响应式布局

Bootstrap 支持响应式布局，即使在不同大小的屏幕上，也可以自动适应不同的布局，以确保用户提供最好的体验。

1.4 组件

Bootstrap 中提供了多种常用的组件，如导航、弹出框、警告框、按钮等，这些组件可以帮助开发人员快速开发出漂亮、交互性强的 Web 页面。

2. Bootstrap的使用

2.1 下载并引入Bootstrap

首先我们需要下载 Bootstrap，可以到官网 http://getbootstrap.com 上下载或者使用 cdn 引入。引入 Bootstrap 只需要在 head 标签里加入如下的代码：

<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

2.2 网格系统的使用

网格系统是 Bootstrap 最重要的特性之一，使用网格系统可以帮助我们快速构建响应式的布局。每个 row 标签定义一行，row 内包含的 col 标签定义列：

<div class="container">
  <div class="row">
    <div class="col-sm">
      <p>我是第一列</p>
    </div>
    <div class="col-sm">
      <p>我是第二列</p>
    </div>
    <div class="col-sm">
      <p>我是第三列</p>
    </div>
  </div>
</div>

这段代码将会生成一个具有三列布局的网页，每一列宽度相等。

2.3 组件的使用

Bootstrap 还提供了很多常用的组件，下面我们来看一下如何使用模态框组件：

<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  点我显示模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这是模态框的内容。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

这段代码将会生成一个拥有按钮和模态框的网页，点击按钮将会打开模态框。

3. 总结

Bootstrap 是一个功能强大的前端框架，内置了很多常用的组件和布局，使用非常方便。通过学习本篇笔记，你应该明白了 Bootstrap 的基础知识和基本使用方法。如果你想深入学习 Bootstrap，可以查看官网提供的文档和示例。