Bootstrap基础知识整理：布局、样式与表格

"Bootstrap笔记总结" Bootstrap是一个流行的前端开发框架，用于快速构建响应式和移动设备优先的网页。这篇笔记主要涵盖了Bootstrap的基础CSS组件，包括布局、样式、表格和其他实用元素。 1. **布局（栅格系统）** Bootstrap的栅格系统是其核心功能之一，用于创建响应式的网页布局。通过使用`.container`类，可以实现内容的居中对齐，其默认宽度为940px。若希望创建全宽布局，可以使用`.container-fluid`类。栅格系统基于12列的网格，通过调整列(`col-*`)的组合，可以灵活地控制内容的排列方式。 2. **默认设置** - **全局样式**：整个文档的默认字体大小为14px，行高为20px，段落(`p`)的底部间距为10px，用于提供良好的视觉对齐。 - **醒目文本**：使用`.lead`类可以使文本更显眼，`<small>`标签用于展示小号字，`<strong>`用于加粗，`<em>`用于斜体。 - **字体颜色**：Bootstrap提供了多种预定义的颜色类，如`.muted`（淡色）、`.text-warning`（警告）、`.text-error`（错误）、`.text-info`（信息）和`.text-success`（成功）。 - **提示信息**：`<abbr>`标签配合`title`属性可以创建带有提示信息的缩写，加上`.initialism`类可以让字体略小。 - **引用**：`<blockquote>`用于创建引用，`<cite>`定义引用来源，`.pull-left`和`.pull-right`分别用于左浮动和右浮动，`.muted`用于改变字体颜色，`.clearfix`用于清除浮动。 - **列表**：无样式列表可以使用`.unstyled`类，水平描述列表使用`.dl-horizontal`。 3. **表格** - **基本表格**：使用`.table`类创建基本表格，`.table-striped`添加斑马线效果，`.table-bordered`添加边框。 - **预格式化文本**：`<pre>`标签用于保留代码或其他预格式化的文本，`.pre-scrollable`类可以限制预格式化文本区域的高度，当内容超出时显示滚动条。 这些只是Bootstrap基础CSS组件的一部分，Bootstrap还包括按钮、表单、图像、导航、组件等更多功能。通过这些工具，开发者可以快速创建美观且响应式的网页，无需从零开始编写复杂的CSS代码。了解并熟练运用Bootstrap，能显著提高开发效率，使得网站设计更具一致性且易于维护。