Bootstrap框架之排版

最新推荐文章于 2022-05-07 21:40:54 发布

住手丶让我来

最新推荐文章于 2022-05-07 21:40:54 发布

阅读量257

点赞数 2

分类专栏： Bootstrap 文章标签： Bootstrap框架之排版

本文链接：https://blog.csdn.net/weixin_42146366/article/details/96561172

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、简介

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，可以创建标题、段落、列表等。
这里主要介绍以下几种：

标题
页面主体
内联文本元素
对齐
改变大小写
缩略语
地址
引用
列表

二、排版介绍

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<h1>Hello World!</h1>
	<h2>Hello World!</h2>
	<h3>Hello World!</h3>
	<h4>Hello World!</h4>
	<h5>Hello World!</h5>
	<h6>Hello World!</h6>
</body>
</html>

效果图如下：
在这里插入图片描述
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<h1>Hello World!<small>Hi</small></h1>
	<h2>Hello World!<small>Hi</small></h2>
	<h3>Hello World!<small>Hi</small></h3>
	<h4>Hello World!<small>Hi</small></h4>
	<h5>Hello World!<small>Hi</small></h5>
	<h6>Hello World!<small>Hi</small></h6>
</body>
</html>

效果图如下：
在这里插入图片描述

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
##通过添加 .lead 类可以让段落突出显示。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	实践是检验真理的唯一标准<p class="lead">学会用质疑的眼光求真，用踏实的态度去实践</p>是每一位技术人员所必须的。
</body>
</html>

效果图如下：
在这里插入图片描述

内联文本元素

【1】标记文本

You can use the mark tag to <mark>highlight</mark> text.

效果图如下：
在这里插入图片描述
【2】被删除的文本
对于被删除的文本使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

效果图如下：
在这里插入图片描述
【3】插入文本
额外插入的文本使用 <ins> 标签。

<ins>This line of text is meant to be treated as an addition to the document.</ins>

效果图如下：
在这里插入图片描述
【4】小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	实践是检验真理的唯一标准<br>
	<small>学会用质疑的眼光求真，用踏实的态度去实践</small><br>
	是每一位技术人员所必须的
</body>
</html>

效果图如下：
在这里插入图片描述

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<p class="text-left">Left aligned text.</p>
	<p class="text-center">Center aligned text.</p>
	<p class="text-right">Right aligned text.</p>
	<p class="text-justify">Justified text.</p>
	<p class="text-nowrap">No wrap text.</p>
</body>
</html>

效果如下：
在这里插入图片描述

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

效果图如下：
在这里插入图片描述

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<abbr title="Hello World!你好 世界">Hello</abbr>
</body>
</html>

效果图如下：
在这里插入图片描述

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

效果图如下：
在这里插入图片描述

引用

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

第一种展示风格

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

效果图如下：
在这里插入图片描述

第二种展示风格

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

效果图如下：
在这里插入图片描述

列表

无样式列表

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<ul class="list-unstyled">
		<li>.A.</li>
		<li>.B.</li>
		<li>.C.</li>
		<li>.D.</li>
	</ul>
</body>
</html>

效果图如下：
在这里插入图片描述
内联列表

<!DOCTYPE html>
<html>
<head>
	<title>button</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<ul class="list-inline">
		<li>.A.</li>
		<li>.B.</li>
		<li>.C.</li>
		<li>.D.</li>
	</ul>
</body>
</html>

效果图如下：
在这里插入图片描述