Bootstrap3.0页面布局详解与HTML标题复习

在Bootstrap 3.0的学习笔记中，我们着重探讨了如何实现页面布局。Bootstrap利用HTML基础标签的基础上，提供了更为直观且响应式的样式，使得布局设计更加方便。以下是主要内容的详细讲解： 1. **标题**: Bootstrap的标题标签包括从<h1>到<h6>，以及对应的类名如.h1到.h6。这些标签不仅用于定义文档结构，还提供了预设的样式。例如，`.page-header`类可用于创建页面的主标题，而`.small`或`.small`元素则用于添加副标题，如`<h1 class="page-header">标题</h1><small>Secondary text</small>`，便于区分主次信息。 2. **页面主体**: 页面主体通常由<div class="container">包裹，Bootstrap容器是页面布局的基础，它提供了12列的网格系统，帮助开发者轻松地创建响应式布局。通过合理划分12列，可以适应不同屏幕尺寸，确保内容在各种设备上表现良好。 3. **强调与缩略语**: 文本强调可以通过CSS类如`.text-primary`, `.text-warning`, 等实现，而使用`<strong>`和`<em>`标签则提供内联样式。缩略语则可以使用`<abbr>`标签，配合`title`属性提供解释。 4. **地址与引用**: 地址信息可以使用`<address>`标签，而引用部分通常用`<blockquote>`配合`<cite>`引用来源。Bootstrap并未直接改变这些标签的样式，但它们的外观可能受到全局样式的影响。 5. **列表**: Bootstrap提供了多种列表类型，如无序列表`<ul>`、有序列表`<ol>`、定义列表`<dl>`等，以及自定义的列表项样式，如`.list-unstyled`和`.list-inline`。 6. **总结**: 在Bootstrap 3.0中，页面布局的构建基于清晰的层次结构和响应式设计原则。通过理解和熟练运用这些基础HTML标签及其Bootstrap扩展，可以快速构建出美观且功能丰富的网页界面。 学习Bootstrap 3.0的页面布局意味着掌握HTML结构的增强版，能够更高效地创建适应不同设备的响应式设计。通过组合和调整这些基础组件，开发者可以轻松地构建出现代且易于维护的网站布局。