【无标题】

最新推荐文章于 2024-10-16 23:00:23 发布

klx2545845553

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/klx2545845553/article/details/124959512

版权

bootstrap 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <title>Hello, world!</title>
  </head>
  <body>
	<img src="img/img1.jpg" alt="边框" class="border-success border">
	<br />
	<div class=" d1 border border-start-0 border-warning rounded-top">test</div>
	<span class="text-primary">text-primary</span>
	<span class="text-secondary">text-secondary</span>
	<span class="text-success">text-success</span>
	<span class="text-danger">text-danger</span>
	<span class="text-warning">text-warning</span>
	<span class="text-info">text-info</span>
	<style type="text/css">
		.d1{
			width: 200px;
			height: 200px;
			margin: 10px;
		}
	</style>
	
	
    <script src="js/bootstrap.bundle.js" type="text/javascript"></script>

   
  </body>
</html>

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <title>Hello, world!</title>
  </head>
  <body>
	<div class="c float-md-start border border-success">1</div>
	<div class="c float-md-end border border-success">2</div>
	<table class="table table-bordered" style="height: 200px;">
	<tbody>
	<tr>
	<td class="align-baseline">baseline</td>
	<td class="align-top">top</td>
	<td class="align-middle">middle</td>
	<td class="align-bottom">bottom</td>
	<td class="align-text-top">text-top</td>
	<td class="align-text-bottom">text-bottom</td>
	</tr>
	</tbody>
	</table>
	<style type="text/css">
		.c{
			width: 200px;
			height: 200px;
		}
	</style>
    <script src="js/bootstrap.bundle.js" type="text/javascript"></script>

   
  </body>
</html>

在这里插入图片描述

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <title>Hello, world!</title>
  </head>
  <body>
	<div class="p-2 text-lowercase">the bootstrap4.x</div>
	<div class="p-2 text-uppercase">the bootstrap4.x</div>
	<div class="p-2 text-capitalize">the bootstrap4.x</div>
	<br />
	<div class="p-2 font-weight-bold">Bootstrap4.x</div>
	<div class="p-2 font-weight-normal">Bootstrap4.x</div>
	<div class="p-2 font-weight-light">Bootstrap4.x</div>
	<div class="p-2 font-italic">Bootstrap4.x</div>
	<style type="text/css">
		
	</style>
	
	
    <script src="js/bootstrap.bundle.js" type="text/javascript"></script>

   
  </body>
</html>