Bootstrap框架：排版:

最新推荐文章于 2025-07-18 12:51:19 发布

原创最新推荐文章于 2025-07-18 12:51:19 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap

Web 同时被 2 个专栏收录

80 篇文章

订阅专栏

bootstrap

8 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS进行网页排版的多种实用技巧，包括标题、段落、文字对齐、大小写调整、引用样式、自定义列表等，帮助读者掌握网页设计的基础知识。

排版:

1.标题
h1.page-header

h1.page-header样式

<div class="container">
		<h1 class="page-header">bootstrap框架学习:</h1>
		<h1 class='page-header'>linux is very much!</h1>	
		<h1 class='page-header'>linux is very much!</h1>	
		<h1 class='page-header'>linux is very much!</h1>	
		<h1 class='page-header'>linux is very much!</h1>	
		<h1 class='page-header'>linux is very much!</h1>	
		<h1 class='page-header'>linux is very much!</h1>	
		
		</div>
	
	</div>

2.段落
p.lead

p.lead样式

<p class='lead'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>		
		<p class='lead'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>		
		<p class='lead'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>		
		<p class='lead'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

3.删除线
del

del删除线

<del>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</del>

4.文字对齐
p.text-left
p.text-right
p.text-center
p.text-nowrap

文字对齐

<p class='text-left'>linux is very much!</p>
		<p class='text-center'>linux is very much!</p>
		<p class='text-right'>linux is very much!</p>
		<p class='text-nowrap'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

5.文字大小写
p.text-lowercase
p.text-uppercase
p.text-capitalize

文字大小写

<p class='text-lowercase'>Linux Is Very Much!</p>
		<p class='text-uppercase'>Linux Is Very Much!</p>
		<p class='text-capitalize'>linux is very much!</p>

6.引用样式
blockquote
blockquote.blockquote-reverse

blockquote引用样式

<blockquote>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
		</blockquote>

		<blockquote class='blockquote-reverse'>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
		</blockquote>

7.自定义列表
dl
dt
dd
dl.dl-horizontal

自定义列表

<dl>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>	

		<dl>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>	
		<dl>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>

水平自定义列表

<dl class='dl-horizontal'>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>	
		
		<dl class='dl-horizontal'>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>

		<dl class='dl-horizontal'>
			<dt>Description lists</dt>
			<dd>description list is perfect for defining terms.</dd>
		</dl>