BootStrap CSS全局与表格样式详解

74 浏览量更新于2024-08-31 收藏 221KB PDF 举报

"BootStrap CSS全局样式和表格样式的源码解析" Bootstrap 是一个流行的前端框架，它提供了丰富的预定义样式，使得网页设计更加高效。本篇内容将深入解析BootStrap的CSS全局样式和表格样式，帮助你更好地理解和应用这些元素。 1. **全局样式** - **布局容器类样式** - `.container` 类用于创建一个具有固定宽度的布局容器，并且具有响应式设计，意味着在不同设备上会根据屏幕尺寸调整宽度。它的宽度在不同断点（例如，xs, sm, md, lg）下有所不同，以适应不同分辨率的设备。 - `.container-fluid` 类则提供了一个全宽的容器，它的宽度始终是100%，适合创建无边距的、满屏的布局。在HTML中，通常在`<body>`标签下创建一个`<div>`元素，并赋予`.container`或`.container-fluid`类，然后将所有内容包含在这个`<div>`内。示例代码： ```html <body> <div class="container">  </div> </body> ``` - **标题样式**：Bootstrap 提供了 `<h1>` 到 `<h6>` 的标题标签，同时提供了对应的类 `.h1` 到 `.h6`，可以应用于任何元素，以保持一致的视觉样式。这些样式确保了在不同浏览器间的兼容性。 - **行内文本样式** - `<b>` 和 `<strong>` 用于加粗文本，两者功能相似，但在语义上，`<strong>` 表示强调，优先级更高。 - `<i>` 和 `<em>` 用于斜体，`<em>` 在HTML5中是新的语义化标签，表示强调。 - `<del>` 和 `<s>` 用于表示删除线，`<del>` 在HTML5中是新标记，有更明确的语义。 2. **表格样式** - Bootstrap 对 HTML 的 `<table>` 元素进行了美化，提供了简洁、干净的表格样式。默认情况下，表格会自动对齐，行高适中，易于阅读。 - `<tr>` 代表表格行，`<td>` 代表表格单元格，而 `<th>` 用于创建表头单元格。 - 你可以通过添加类如 `.table-striped` 来创建斑马纹效果的表格，`.table-bordered` 添加边框，`.table-hover` 实现鼠标悬停时改变行背景色。 - 如果希望表格数据对齐，可以使用 `.text-left`, `.text-center`, 或 `.text-right` 类来控制文本对齐方式。例如，创建一个简单的Bootstrap表格： ```html <table class="table table-striped table-bordered"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr>  </tbody> </table> ``` 通过理解并运用上述Bootstrap的全局样式和表格样式，你可以快速构建出美观且响应式的网页。记得在实际项目中引入Bootstrap的CSS和JS文件，以确保样式和交互效果正常工作。同时，Bootstrap还提供了许多其他组件，如按钮、导航、表单等，都具有类似的预设样式，可以根据需要进行选择和自定义。

BootStrap CSS全局样式和表格样式源码解析全局样式和表格样式源码解析

CSS全局样式全局样式

1、布局容器类样式：、布局容器类样式：.container 和 .container-fluid

.container 固定宽度并且具有响应式。

.container-fluid 自由宽度(100%宽度)。

这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。

然后其他内容全部写在这个div标签中即可！

例如:

<!DOCTYPE html>

<html>

<head>

<title>BootStrap基础入门</title>

</head>

<body>

<p>正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</p>

</div>

</body>

</html>

再看.container-fluid：

只修改了这里，其他地方不变

也就是说，container-fluid这个是和页面两边是没有间隔的。

而container是有一定间隔的，而且左右两边的间隔相等。

2、标题样式：、标题样式： <h1>到<h6>、.h1 ~ .h6

<h1>~<h6>样式重写了，基本上做到了兼容性。

（如未加说明，则新代码是接在上面的代码后面）

下面的代码在上面代码的p标签后

3、行内文本样式：、行内文本样式：

<b>：加粗

<strong>加粗

<i>：斜体

<em>斜体，HTML5新标记

<del>删除线，HTML5新标记。

<s>删除线

这几个就不演示了，你自己简单的用一个就懂了。

4、文本对齐样式：、文本对齐样式：.text-left、.text-center、.text-right、.text-justify

.text-left：文本左对齐

.text-right：右对齐

.text-center：居中对齐

.text-justify：两端对齐

<div class="text-left">左对齐:正文正正文正文正文正文正</div>

<div class="text-right">右对齐:正文正正文正文正文正文正</div>

<div class="text-center">居中对齐:正文正文正文正文正</div>

<div class="text-justify">两端对齐:正正文正文正文正正</div>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38594266

粉丝: 4

BootStrap CSS全局与表格样式详解

Bootstrap（CSS库）

bootstrap3全局css样式中文文档

Bootstrap全局与表格样式源码详解：布局与标题设计

Bootstrap中文文档

基于PHP的excel多用途查询系统手机网页版源码.zip

BootStrap前端框架入门教程：基础布局解析

深入解析ExtJS5前端项目源码结构与特性

探索FastAdmin后台：Bootstrap样式文件结构与替换的深度解析

Bootstrap样式库在FastAdmin中的应用指南：最佳实践分享

自适应网站整站模板源码解析

最新资源