首页 > 代码库 > Bootstrap3学习笔记：基础排版

Bootstrap3学习笔记：基础排版

2024-11-25 22:41:39   204人阅读

<!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="http://www.mamicode.com/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>


Bootstrap3学习笔记：基础排版


联系
我们