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

最新推荐文章于 2024-01-05 10:00:20 发布

留家里哦哦哦

最新推荐文章于 2024-01-05 10:00:20 发布

阅读量369

点赞数 1

分类专栏： Bootstrap学习前端学习路径文章标签： html bootstrap

本文链接：https://blog.csdn.net/qq_46304554/article/details/121452182

版权

前端学习路径同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Bootstrap学习

5 篇文章 0 订阅

订阅专栏

本文介绍了Bootstrap CSS的初步学习，主要讲解了如何使用Bootstrap创建各种标题和进行基本的页面布局，包括标题显示和字母大小变换、缩略语的应用。通过代码示例展示了Bootstrap为HTML标签增加的美观属性。

摘要由CSDN通过智能技术生成

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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS入门初步学习---排版

1.各种标题的显示：其实大部分标签跟web中HTML标签一样，只不过其Bootstrap为这些标签自带了一些属性，让其更加美观，符合我们大部分平时所见的页面布局。下面是代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bootstrap CSS排版学习</title> <link rel="stylesheet" href="boots
复制链接

扫一扫

专栏目录