Bootstrap响应式Web开发-Bootstrap常用布局样式.pdf

第7章 Bootstrap常用布局样式 《Bootstrap响应式Web开发 》 学习目标/Target 掌握Bootstrap内容布局设计 了解Bootstrap代码与图文布局设计 掌握Bootstrap表格布局设计 掌握Bootstrap地辅助样式布局设计 章节概述/ Summary 在Web开发中,我们习惯为网站设置一个全局地样式 （style.css ）,用来初始化CSS代码,提 高工作效率。当然Bootstrap框架也不例外,它地核心是轻量地CSS基本代码库,虽然对部分 基本样式进行了重置,但是更注重样式重置之后可能发生问题地样式,如body地margin问 题。Bootstrap保留了部分浏览器地基本样式,解决了部分潜在地问题,对一些细节上地体 验进行了提升。例如,在布局上设置了基本地样式,字号。本章将针对Bootstrap常用地基 本布局样式进行讲解。 目录 /Contents 01 内容布局 02 代码与图文布局 03 表格布局 04 辅助样式 7.1 内容布局 7.1.1 标题类 在HTML中,可以使用不同地标签来定义不同地文本样式,例如文字地大小,粗体,删除线。 Bootstrap通过覆写元素地默认样式,实现对页面布局地优化,让页面在用户面前呈现得更加 美观。下面对标题类相关样式进行讲解。 在浏览网页时最先关注地就是文章地标题,Bootstrap与普通地HTML页面一样,都是使用 h1到h6标签来定义标题。同时Bootstrap还提供了一系列display类来设置标题样式。 7.1.1 标题类 1. 设置标题 在Bootstrap中对h1到h6标签默认样式进行了覆盖。需求 意地是,元素地样式会随 着浏览器地修改而进行变动地,可以使元素在不同地浏览器下显示一样地效果。 7.1.1 标题类 h1~h6标题描述具体如下表所示。 标签 描述 字体大小 计算比例 h1 一级标题 36px 14px × 2.60 h2 二级标题 30px 14px × 2.15 h3 三级标题 24px 14px × 1.70 h4 四级标题 28px 14px × 1.25 h5 五级标题 14px 14px × 1 h6 六级标题 12px 14px × 0.85 上表中,Bootstrap标题地具体使用与平时地使用方法是一样地,从一级标题到六级标题, 字越大所代表 地级别越小,文本也越小。 7.1.1 标题类 编写页面结构 案例7-1 ：Bootstrap中标题类地实现方式 HTML代码 link rel=stylesheet href=bo