Bootstrap-2

最新推荐文章于 2023-11-22 01:15:43 发布

愆零落

最新推荐文章于 2023-11-22 01:15:43 发布

阅读量394

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_67777597/article/details/124518751

版权

本文探讨了如何使用Bootstrap对网站的首页进行整合和优化，重点关注轮播图和画像的设置与调整，以提升用户体验。

摘要由CSDN通过智能技术生成

一、首页整合及优化轮播图及画像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
			<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
				<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
			
				
	</head>
	<body>
		<style>
		#src,#src1{
			background-image: url(img/title_bj.png);
			background-repeat: no-repeat;
			height: 30px;
			margin-top: 10px;
			margin-bottom: 10px;
			background-color: #D1ECF1;
			font-size: 20px;
			font: bold;
			
		}
		</style>
		<div class="container">
		<div class="row" style="width:100%;">
		<div style="background-color: red;width:100%;">第一行</div>
			
		</div>
		<div class="row" style="width:100%;">
		<div class="col-md-3 col-12" style="background-color:#138496; ">
			
			<div style="border: 1px ;">左侧列表</div>
			<div class="list-group">
			  <button type="button" class=&#