章节
问答
课签
笔记
评论
占位
占位

标题(一)

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:

通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置:

1、重新设置了margin-topmargin-bottom的值,  h1~h3重置后的值都是20pxh4~h6重置后的值都是10px。
2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14pxh6=12px。

标题的具体运用非常简单,和我们平时运用是一样的,使用<h1>~<h6>标签,分别表示标题一至标题六,h 后面的数字越大,表示级别越小,文本也越小。来看一个简单的效果:右侧代码编辑器中的10-16行的代码。

在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。如右侧代码编辑器中   18-23行代码所示:

对比两个示例的效果图,可以说他们的效果是一模一样的。

 

任务

我也来试一试:在右侧代码编辑器中输入:

<h1>我的第一个bootstrap标题</h1>
?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
h1,
h2,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / weixin_慕虎4485265
就是H4标签下的一个副标题 small就是定义副标题的意思  我个人的理解是这样的

最新回答 / 夏虫语斌
不同浏览器对h1~h6的定义有些许不同,有的体现在边距上,有的体现在字体大小上。运行系统并不会对样式来源进行区分。因为,最后都是编译成浏览器可以解析的css代码。原来的样式只不过是浏览器内部定义的默认值,bootstrap是对这个样式进行覆盖。

最新回答 / 土土的星
非常不建议直接在bootsrap中修改样式 自己在之后加一个层叠样式表  用来添加你自己定义的属性 这样就可以把bootsrap中的样式覆盖掉了

最新回答 / 拿铁自然卷
这个只是框架 你如果要取消的话 直接在重新定义就好了 h1,h2,h3 { padding:0;margin:0;font-weight:400;}

最新回答 / qq_路在远方_1
可以在右边选章节

最赞回答 / KingdomLiu
这个STYLE.CSS是从bootstrap.css中摘取出来的,用来让你感受bootstrap设计思想用的,前一小节课程中讲到了。满意的话请采纳,手打不易。

最新回答 / 捣鼓程序的张贱贱
自我调适 使用的 基本没啥用

最赞回答 / HEternally
他调用的是网上的cdn,所以你改style.css并没有用,style.css只是给你看的

最新回答 / 等待54
右边的style.css文件是就是一个样式库,都是用到的。

已采纳回答 / qq_物是人非事事休_0
没毛病啊。你把这段代码复制到编辑器上面在运行一下,是可以的

最赞回答 / 咣当全完蛋
字面意思很清楚呀,就是字体大小的1.1倍。字体大小是继承的,当前位置没有设置就用上级的,页面全都没有设置就用浏览器默认的,最后总会有个大小用来乘。

已采纳回答 / 柑nice
因为这个是下载到本地的,你直接使用这个就比较快  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

最新回答 / 柑nice
这个是class中含有col-的对象的样式,就是标签里面class属性含有col-的css样式

最新回答 / 慕妹4101475
好的,谢谢

最新回答 / 爱java哈
content一般配合before或者after一起使用,他这里的意思应该是在small后面加上字符串\00A0 \2014
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言