Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）

最新推荐文章于 2024-05-15 00:21:36 发布

我是一颗好李子

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量2.5k

点赞数 2

分类专栏： Bootstrap 文章标签： bootstrap

本文链接： https://blog.csdn.net/m0_69034993/article/details/127225097

版权

Bootstrap 专栏收录该内容

9 篇文章 5 订阅

订阅专栏

无序列表和有序列表

无序列表：是指没有特定顺序的一组元素，使用项目符号来标识。有序列表是按照顺序排列的一组元素，使用序号来标识。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div class="container">
        <h3>无序列表</h3>
        <ul>
            <li>网页</li>
            <li>咨询</li>
            <li>贴吧</li>

        </ul>
        <h3>有序列表</h3>
        <ol>
            <li>第一步骤</li>
            <li>第二步骤</li>
            <li>第三步骤</li>
        </ol>
    </div>
</body>

</html>

结果图：

列表在默认样式下呈现缩进显示，并带有列表项符号。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <ul class="list-unstyled">
            <li>学校概况</li>
            <li>组织机构</li>
            <li>教育教学
                <ul>
                    <li>本科生教育</li>
                    <li>研究生教育</li>
                    <li>留学生教育</li>
                    <li>继续教育</li>
                </ul>
            </li>

        </ul>
    </div>
</body>

</html>

结果图：

如果希望列表项目水平分布，通常的做法是设置列表项的display值为inline-block。Bootstrap4定义了两个类.list-inline类、.list-inline-item类分别作用在ul和li元素上。

例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div class="container">
		<ul class="list-inline">
			<li class="list-inline-item">学校概况</li>
			<li class="list-inline-item">组织机构</li>
			<li class="list-inline-item">教育教学</li>
		</ul>
	</div>
</body>

</html>

结果图：

定义列表

定义列表是一种特殊的结构，包含词条和解释两块内容，包含的标签说明如下：

<dl>：标识定义列表。

<dt>：标识词条。

<dd>：标识解释。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div class="container">
        <dl>
            <dt>THML</dt>
            <dd>超文本标记语言，是一种用于创建网页的标准标记语言。</dd>
            <dt>CSS</dt>
            <dd>层叠样式,是一种用来表现HTML或XML等文件样式的计算机语言。</dd>
            <dt>JavaScript</dt>
            <dd>简称“JS”,是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</dd>
        </dl>
    </div>
</body>

</html>

结果图：

可以使用网格系统预定义的类，将词条和解释水平排列。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <dl class="row">
            <dt class="col-sm-3">THML</dt>
            <dd class="col-sm-9">超文本标记语言，是一种用于创建网页的标准标记语言。</dd>
            <dt class="col-sm-3">CSS</dt>
            <dd class="col-sm-9">层叠样式，是一种用来表现HTML或XML等文件样式的计算机语言。</dd>
            <dt class="col-sm-3">JavaScript</dt>
            <dd class="col-sm-9">简称“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</dd>
        </dl>
    </div>
</body>

</html>

结果图：

代码

Bootstrap中下面几个标签可以完成在网页中显示代码这个任务：

<code>：包裹行内代码片段。注意HTML代码中尖括号要进行转义。常用于单个单词或单行句子的代码；

<pre>：包裹多行代码。可以通过添加 .pre-scrollable类，实现垂直滚动，并且设定的最大高度为340px。常用于多行代码；

<kbd>：标记用户通过键盘输入的内容。表示用户要输入的内容。在实际开发中，用户可以根据具体的需求来使用某种类型。需要注意的是，不管使用哪种编程代码风格，都需要手动转义特殊符号。例如，小于号使用“<”代替，大于号使用“>”代替。

<samp>：标记程序输出的内容。

<var>：标记变量。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <code>&lt;br&gt;</code>
        <pre>
				int add(int a, int b){
					return a+b;
				}
			</pre>
        <p><kbd>ctrl+c</kbd>复制</p>
        <p><kbd>ctrl+v</kbd>粘贴</p>
        <p><var>y</var>=<var>m</var><var>x</var>+<var>

                <body>
                    <p><samp>程序输出内容</samp></p>
                </body>
    </div>
</body>

</html>

结果图：

图片

为了更方便地在网页中显示图片，并且不撑破其父元素。Bootstrap4为图片元素定义了轻量级的样式和响应式的行为。

响应式图片：

在Bootstrap 4中，通过给图片添加.img-fluid类来实现响应式效果，即图片会随着父元素一起缩放。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <h3>响应式图片</h3>
        <img src="img/2.jpg" class="img-fluid" />
    </div>
</body>

</html>

结果图：

图片缩略图：

在浏览网页时，经常看到给图片的四周加了圆角的边框。除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。

例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <h3>图片缩略图</h3>
        <img src="img/1.jpg" class="img-thumbnail" />
    </div>
</body>

</html>

结果图：

图片对齐方式：

在Bootstrap中，实现图片对齐主要有以下3种方式：

（1）使用浮动类.float-left、.float-right分别实现往左浮动和往右浮动。

（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。

（3）使用外边距类.mx-auto实现水平居中对齐，前提将<img>元素转化为块级元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <h3 class="text-center">使用浮动类左、右对齐</h3>
        <img src="img/1.jpg" class="float-left" width="200" />
        <img src="img/1.jpg" class="float-right" width="200" />
    </div>
</body>

</html>

结果图：

使用文本类和外边距类实现对齐示例。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <h3 class="text-center">使用文本类居中对齐</h3>
        <div class="text-center"><img src="img/1.jpg" class="text-center" width="200" /></div>
        <h3 class="text-center">使用外边距类居中对齐</h3>
        <img src="img/1.jpg" class="mx-auto d-block" width="200" />
    </div>
</body>

</html>

结果图：

我是一颗好李子

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）

除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
复制链接

扫一扫