Bootstarp第三章排版

最新推荐文章于 2023-12-12 15:25:54 发布

原创最新推荐文章于 2023-12-12 15:25:54 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstarp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在网页中运用Bootstrap提供的各类类样式，如标题1、标题2的使用，副标题的添加，突出内容的呈现，以及文本的左、右、中对齐和换行技巧。还展示了大小写转换和缩略词的使用，以及列表的不同呈现方式。

类	作用
.h1~h6	任何标签用这个类就有了标题标签的样式
&.smll	副标题标签和类
.lead	突出内容
.text-left	文本左对齐
.text-right	文本右对齐
.text-center	文本居中对齐
.text-justify	文本左右对齐
.text-nowrap	文本一行显示
.text-lowercase	大写变小写
.text-uppercase	小写变大写
.text-capitalize	首字母大写
	可以缩略文本，必须加title属性
.initialism	让abbr标签里面的文本显示略小
.list-unstyled	消除列表默认样式
.list-inline	让li一行显示
.dl-horizontal	让自定义大屏下一行显示

标题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<p>比赛胜利召开<span class="h1">标题1</span></p>
			<p>比赛胜利召开<span class="h2">标题2</span></p>
			<p class="h1">1111</p>
		</div>
	</body>
</html>

副标题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<p class="h1">我是主标题1<small>我是副标题1</small></p>
			<p class="h1">我是主标题1<span class="small">我是副标题1</span></p>
		</div>
	</body>
</html>

突出内容:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<p><span class="lead">第二个变量是 line-height 基准</span>。我们使用这些变量和一些简单的公式计算出其它所有页面元素的</p>
		</div>
	</body>
</html>

文本对齐:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
		<style>
			.box{
				height: 300px;
				border:1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="container box">
			<p class="text-left">哈哈哈心暖暖的你男的女的今年</p>
			<p class="text-right">你那拿阿金你是x</p>
			<p class="text-center">111111</p>
			<p class="text-justify">哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈</p>
			<p class="text-nowrap">阿华夏万家是补习班将巨额的新年希望那些你扥吃嫩草内存是你想问下那你就吃不吃上课你想加卫校男生脚暖努思考那些我看你下午就西安新年</p>
		</div>
	</body>
</html>

改变大小写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<p class="text-lowercase">I LOVE YOU</p>
			<p class="text-uppercase">i love you</p>
			<p class="text-capitalize">i love you</p>
		</div>
	</body>
</html>

缩略语

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<abbr title="bootstarp">bs</abbr>
			<abbr title="bootstarp" class="initialism">bs</abbr>
			<abbr title="bootstarp">框架</abbr>
			<abbr title="bootstarp" class="initialism">框架</abbr>
		</div>
	</body>
</html>

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<ul class="list-unstyled list-inline">
				<li>首页</li>
				<li>家电</li>
				<li>鞋袜</li>
			</ul>
			<dl class="dl-horizontal">
				<dt>老栗</dt>
				<dd>老栗是一个帅气，幽默的，有钱人</dd>
			</dl>
		</div>
		
	</body>
</html>