Bootstrap

Bootstrap 是一个流行的前端开发框架，由 Twitter 开发。它基于 HTML、CSS 和 JavaScript，旨在简化 Web 开发并使其更加快捷和灵活。

1. 框架：

   • 框架是一种半成品软件，开发人员可以在其基础上进行开发，从而简化编码过程。
   • Bootstrap 提供了丰富的 CSS 样式和 JavaScript 插件，使开发人员能够轻松地创建具有各种页面效果的网站。
   • 它还支持响应式布局，使同一套页面能够适应不同分辨率的设备。

2. 响应式布局：

   • 响应式布局允许同一套页面在不同设备上自适应，以便在不同分辨率的屏幕上呈现良好的效果。
   • Bootstrap 的响应式布局依赖于栅格系统，将一行平均分成 12 个格子，并允许指定元素占用其中的几个格子。

3. 栅格系统：

   • 栅格系统是 Bootstrap 中实现响应式布局的关键。
   • 步骤：
     • 定义容器：使用 .container 或 .container-fluid 类来创建容器，两者之间的区别在于是否占满整个屏幕宽度。
     • 定义行：使用 .row 类来定义行。
     • 定义元素：使用 .col-设备代号-格子数目 类来指定元素在不同设备上所占的格子数目。
       • 设备代号包括：xs（超小屏幕，手机）、sm（小屏幕，平板）、md（中等屏幕，桌面显示器）、lg（大屏幕，大桌面显示器）。
       • 如果一行中的格子数目超过 12，则超出部分会自动换行。
       • 栅格类属性可以向上兼容，适用于屏幕宽度大于或等于分界点大小的设备。

4. 全局 CSS 样式和组件：

   • Bootstrap 提供了许多全局 CSS 样式和组件，可以直接在项目中使用。
   • 例如，按钮样式为 class="btn btn-default"，图片可以使用 class="img-responsive" 来在任意尺寸下占满宽度。
   • 表格和表单也有相应的样式类，例如 table-bordered 和 form-control。