Bootstrap CSS入门初步学习---排版

2023-12-31 08:15:34

1.各种标题的显示：

其实大部分标签跟web中HTML标签一样，只不过其Bootstrap为这些标签自带了一些属性，让其更加美观，符合我们大部分平时所见的页面布局。
下面是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap CSS排版学习</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		
	</head>
	<body>
		<div class="container">
			<label for="inputHelpBlock"> help text</label>
			<textarea style="width: 100%;height: auto;" class="form-control">被删除的文本使用 &lt del  &gt 标签;没有用处的文本使用 &lt s  &gt 标签; 额外插入的文本使用 &lt ins  &gt 标签;带下划线的标签使用&lt u  &gt 标签;使用 &lt small &gt 标签包裹，其内的文本将被设置为父容器字体大小的 85%</textarea>
			<h1>Bootstrap CSS排版的学习1</h1><!--这里的H1H2H3其实自带了一些样式效果-->
			<h2>第一篇章</h2>
			<h3>各种标题的显示<small>作者：留家里哦哦哦</small></h3>
			<p><mark>H1、H2、H3等这些标题其实自带了一些样式效果，不信可以将上面导入的CSS包注释掉再观察</mark></p>
			<p class="lead">我想要突出变大</p><!--lead是突出变大的类-->
			<p><del>被删除的文本使用 &lt del  &gt 标签。</del></p>
			<p><s>没有用处的文本使用 &lt s  &gt 标签。</s></p>
			<p><ins>额外插入的文本使用 &lt ins  &gt 标签。</ins></p>
			<p><u>带下划线的标签使用&lt u  &gt 标签。</u></p>
			<p><strong>通过增加 font-weight 值强调一段文本。</strong></p>
			<p></p><em>用斜体强调一段文本。</em></p>
		</div>
	</body>
</html>

效果展示图：

2.布局，字母大小变换、基本缩略语

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap CSS排版学习</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		
	</head>
	<body>
		<div class="container">
			<label for="inputHelpBlock"> help text</label>
			<textarea style="width: 100%;height: auto;" class="form-control">
				显示居左，居中，居右，字母大小写转变，基本缩略语
			</textarea>
			<h1>Bootstrap CSS排版的学习2</h1><!--这里的H1H2H3其实自带了一些样式效果-->
			<h2>第二篇章</h2>
			<h3>各种标题的<abbr title="attribet">布局</abbr><small>作者：留家里哦哦哦</small></h3>
			<p class="text-left">左边</p>
			<p class="text-center">中间</p>
			<p class="text-right">右边</p>
			<p>原来的字符串：sDkhfGTdgdaEdGRdwJKCVwqrtIO，下面是全小写、全大写、第一个字母大写的样式设计</p>
			<p class="text-lowercase">sDkhfGTdgdaEdGRdwJKCVwqrtIO</p>
			<p class="text-uppercase">sDkhfGTdgdaEdGRdwJKCVwqrtIO</p>
			<p class="text-capitalize">sDkhfGTdgdaEdGRdwJKCVwqrtIO</p>
			<address>
				<strong>益阳</strong><br>
				这里描述作者信息<br>
				<abbr title="phone">联系电话:8888 8888</abbr>
			</address>
			<ul><!--默认样式-->
				<li>效力</li>
				<li>成绩</li>
				<li>运气</li>
			</ul>
			<ul class="list-inline"><!--横向-->
				<li>效力</li>
				<li>成绩</li>
				<li>运气</li>
			</ul>
		</div>
	</body>
</html>

效果图如下：

码农公寓

1.各种标题的显示：

2.布局，字母大小变换、基本缩略语

相关文章