开发者学堂课程【前端开发框架 Bootstrap 使用教程:06_Bootstrap 全局 css 样式_排版1】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4225
06_Bootstrap 全局 css 样式_排版1
目录
一、标题
二、页面主体
三、中心内容
一、标题
HTML 中的所有标题标签<h1>到<h6>均可使用。另外,还提供了.h1 到.h6类,为的是给内联(inline)属性的文本赋予标题的样式。
演示:
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container”>
<h1>这是一个h1标签</h1l
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
</div>
</body>
</html>
在标题内还可以包含<small>标签或赋予.small类的元素,可以用来标记副标题。演示:
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container”>
<h1>这是一个h1标签<small>这是一个副标题</small></h1>
<h2>这是一个h2标签<small>这是一个副标题</small></h2>
<h3>这是一个h3标签<small>这是一个副标题</small></h3>
<h4>这是一个h4标签<small>这是一个副标题</small></h4>
<h5>这是一个h5标签<small>这是一个副标题</small></h5>
<h6>这是一个h6标签<small>这是一个副标题</small></h6>
</div>
</body>
</html>
二、页面主体
Bootstrap 将全局 font-size 设置为14px,line-height 设置为1.428。这些属性直接赋予<body>元素和所有段落元素。另外,<p>(段落)元素还被设置了等于1/2行高(即10px)的底部外边距(margin)。演示:
<p>欢迎来到尚学堂,希望您能通过本套课程以及Bootstrap中文网来深入学习Bootstrap开源框架<br>
欢迎来到尚学堂,希望您能通过本套课程以及Bootstrap中文网来深入学习Bootstrap开源框架
</p>
<p>欢迎来到尚学堂,希望您能通过本套课程以及Bootstrap中文网来深入学习Bootstrap开源框架</p>
</div>
</body>
</htmL>
三、中心内容
中心内容:通过添加 .lead 类可以让段落突出显示。
<p class="lead">…</p>