- 1、本文档共81页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第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
文档评论(0)