bootstrap----导航栏图片布局

最新推荐文章于 2024-02-27 17:45:16 发布

sunnyboysix

最新推荐文章于 2024-02-27 17:45:16 发布

阅读量6k

点赞数 1

分类专栏：前端开发文章标签： bootstrap 图片布局

本文链接：https://blog.csdn.net/sunnyboysix/article/details/78671107

版权

前端开发专栏收录该内容

47 篇文章 1 订阅

订阅专栏

今天主要想介绍一个几个好用的类，第一个就是page-header

<h1 class="page-header">welcome to my page</h1>

可以很好地凸显我们网站的网站名，当然如果另有安排的可以另做安排

list-inline将所有列表项放置同一行

nav-justified是可以把一行内的所有li里面的内容平均分

text-center很好理解就是简单的居中这三者结合就可以制作一个导航栏。

然后结合我们昨天用到的col-md-X我们可以做一个简单的页面图片展示，具体的实现代码如下可以显示

关于导航内的字体颜色不一样是因为我加了一个类具体的代码可以参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			.list-inline{
				background-color: goldenrod;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
		<h1 class="page-header">welcome to my page</h1>
		<ul class="list-inline nav-justified text-center">
			<li class="text-muted">第一</li>
			<li class="text-muted">第二</li>
			<li class="text-muted">第三</li>
			<li class="text-muted">第四</li>
			<li>第五</li>
			<li>第六</li>
			<li>第七</li>
			<li>第八</li>
			
		</ul>
		
			<div class="row">
				<div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div>
				<div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div>
				<div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div>
				<div class="col-md-3"><img src="images/1.jpeg"  width="100%" /></div>
			</div>
			 <hr />
			<div class="row">
				<div class="col-md-3"><img src="images/11.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/11.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/11.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/11.jpg" width="100%"></div>
			</div>
			<hr />
			<div class="row">
				<div class="col-md-3"><img src="images/7.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/7.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/7.jpg" width="100%"></div>
				<div class="col-md-3"><img src="images/7.jpg" width="100%"></div>
			</div>
			
			
		
		</div>
	</body>
</html>