Week 3 Pre-class: CSS and Bootstrap
本页目录· 13 条
What is CSS
层叠样式表 (CSS) 是一种样式表语言，用于描述 HTML 文档的外观和格式。它对于网页设计至关重要，因为它允许开发人员控制网页的排版特征、颜色属性和整体布局。CSS 可以在样式元素内部使用，也可以在 HTML 元素内内联使用，还可以通过链接的 CSS 文件在外部使用。自 1996 年开发以来，CSS 不断改进，以满足不断发展的网络需求，确保在不同浏览器和设备上保持一致的外观。尽管 CSS 的一些功能比较复杂，但其核心功能是将内容与呈现分离，使网站更易于访问且更美观。
Why CSS
- 节省时间： 只需编写一次 CSS 即可在多个 HTML 页面上重复使用
- 易于维护： 只需进行一次修改即可全局更改样式
- 搜索引擎友好： 干净的编码技术可提高搜索引擎的可读性
- 高级样式： 与 HTML 相比，提供更广泛的属性
- 离线浏览： CSS 可以使用离线缓存将 Web 应用程序存储在本地，从而允许离线查看
How CSS Works?
CSS 的工作原理是将样式应用于网页上的元素。这些样式编写在 CSS 文件中，然后链接到 HTML 文件。这种样式和结构的分离使开发者能够在多个页面上应用一致的样式，从而使外观适应不同的屏幕尺寸和设备类型。
CSS Syntax
CSS 的基础在于其语法，它由两部分组成： 选择器和声明 。 选择器指示要设置样式的 HTML 元素，而声明指定要应用的样式。 声明进一步分为属性（要设置什么样式）和值（如何设置样式）
| Component | Description |
|---|---|
| Selector | Targets the HTML element to be styled |
| Property | Indicates the aspect of the element to be changed |
| Value | Specifies the style applied to the property |
CSS Selectors
选择器在 CSS 中起着关键作用，它决定了一组样式规则应该应用于哪些元素。CSS 提供了一系列选择器，允许设计人员根据标签名称、类、ID、属性等来定位元素
| Selector Type | Description | Example |
|---|---|---|
| Element | Selects all elements of a given type | p {…} |
| Class | Selects all elements with a specific class attribute | .class {…} |
| ID | Selects a single element with a specific id attribute | #id {…} |
| Attribute | Selects elements based on their attributes | a[href] {…} |
What is bootstrap
Bootstrap 是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。它是开发响应式 、移动优先网站最流行的 HTML 、 CSS 和 JavaScript 框架。如今，使用 Bootstrap 创建的网站兼容所有浏览器（ IE 、 Firefox 和 Chrome ）以及所有屏幕尺寸（ 台式机 、 平板电脑 、 平板手机和手机 ）。Bootstrap 最初由 Twitter 的 Mark Otto 和 Jacob Thornton 开发，但后来被宣布为一个开源项目
Features of Bootstrap
Bootstrap 拥有大量预构建的组件，其中包括：
- Grid System: Construct layouts with ease using a flexible grid system that adapts seamlessly to various screen sizes.
网格系统： 使用灵活的网格系统轻松构建布局，无缝适应各种屏幕尺寸。
- Forms: Craft user-friendly forms with a variety of styles and functionalities like validation.
表格： 制作具有多种样式和功能（如验证）的用户友好型表格。
- Buttons: Spice up your website with customizable buttons in all shapes and sizes.
按钮： 使用各种形状和大小的可定制按钮为您的网站增添趣味。
- Navigation: Implement user-friendly navigation menus, from simple dropdowns to complex mega menus.
导航： 实现用户友好的导航菜单，从简单的下拉菜单到复杂的大型菜单。
- Alerts: Convey messages effectively through dismissible alerts, warnings, and success notifications.
警报： 通过可关闭的警报、警告和成功通知有效地传达信息。
- Images: Enhance your website’s visual appeal with responsive image management.
图像： 通过响应式图像管理增强您网站的视觉吸引力。
- JavaScript Plugins: Incorporate interactive elements like modals, tooltips, and carousels with Bootstrap’s JavaScript plugins.
JavaScript 插件： 使用 Bootstrap 的 JavaScript 插件整合模态框、工具提示和轮播等交互元素。
Bootstrap Grid System
Bootstrap 网格系统允许页面最多包含 12 列。您可以单独使用每列，也可以将它们合并在一起以增加列宽。您可以使用所有值总和不超过 12 的组合。您可以使用宽度为 1 的 12 列，或者宽度为 3 的 4 列，或者任何其他组合
Example
Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它采用弹性盒子 (Flexbox) 构建，并完全响应式设计。以下是一个示例，并深入讲解了网格系统的工作原理
How it works
- 响应式断点（Breakpoints）
- 网格支持 6 个响应式断点，基于
min-width媒体查询。 - 某个断点类会作用于该断点及所有更大的断点，例如
.col-sm-4适用于 sm、md、lg、xl、xxl。 - 这样可以针对不同断点分别控制 容器和列的大小与行为。
- 容器（Containers）
- 用于居中并水平留白内容。
.container：响应式固定像素宽度。.container-fluid：width: 100%，适用于所有设备和视口。.container-md等响应式容器：结合流式与固定宽度。
- 行（Rows）
- 行是列的包裹容器。
- 每列有水平内边距（gutter）控制列间距，行会用负外边距抵消，保证内容左对齐。
- 行支持修改器类，可以统一列宽和调整间距（gutter classes）。
- 列（Columns）
Grid Classes
Bootstrap 网格系统有四个类，可以组合起来实现更灵活的布局：
- xs（<576px）：用于竖屏手机
- sm（≥576px）：用于横屏手机
- md（≥768px）：用于平板电脑/大屏手机（Phablet）
- lg（≥992px）：用于小尺寸台式机/笔记本电脑
- xl（≥1200px）：用于大尺寸台式机/笔记本电脑
如上所述，每个断点都有其容器、唯一的类前缀和修饰符。以下是网格在这些断点之间的变化方式：