<!DOCTYPE html> <html> <head> <meta charst="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no"> <title>Bootstrap基础练习</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 --> <!-- 注意:Respond.js不支持 file:// 方式的访问 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 标题元素的用法和标题元素中<small>的字体颜色 --> <!-- <small>在h1、h2、h3内是当前元素对应字体大小的65%,在h4、h5、h6下则是75% --> <h1>Boorstrap:H1 显示 <small>在H1中的small样式</small></h1> <h2>Boorstrap:H2 显示 <small>在H2中的small样式</small></h2> <h3>Boorstrap:H3 显示 <small>在H3中的small样式</small></h3> <h4>Boorstrap:H4 显示 <small>在H4中的small样式</small></h4> <h5>Boorstrap:H5 显示 <small>在H5中的small样式</small></h5> <h6>Boorstrap:H6 显示 <small>在H6中的small样式</small></h6> <!-- class 样式中没有定义 margin-top 和 margin-bottom --> <span class="h1">class样式中 Boorstrap:H1 显示</span><br /> <span class="h2">class样式中 Boorstrap:H2 显示</span><br /> <span class="h3">class样式中 Boorstrap:H3 显示</span><br /> <span class="h4">class样式中 Boorstrap:H4 显示</span><br /> <span class="h5">class样式中 Boorstrap:H5 显示</span><br /> <span class="h6">class样式中 Boorstrap:H6 显示</span><br /> <p>这是普通 p 元素中段落的显示。p 元素内的段落会有一个额外的margin-bottom,大小是行间距的一半(默认为10px)。</p> <!-- .lead样式其主要作用是增大字体大小、粗细、行距和margin-bottom。 --> <p class="lead">如果想让一个段落突出,可以使用.lead样式。</p> </body> </html>
时间: 2024-11-25 18:33:35