bootstrap系列之十六标签、徽章、大屏展播、页面标题

最新推荐文章于 2022-07-11 15:45:56 发布

叶菩提

最新推荐文章于 2022-07-11 15:45:56 发布

阅读量418

点赞数

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

本文链接：https://blog.csdn.net/yeputi1015/article/details/76762650

版权

JAVAEE 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo01</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
	    <script language="JavaScript" src="js/bootstrap.min.js"></script>
	  
	</head>
	<body>
	  <h1>我们学习<span class="label label-default">bootstrap</span></h1>
	  <h2>我们学习<span class="label label-danger">bootstrap</span></h2>
	  <h3>我们学习<span class="label label-info">bootstrap</span></h3>
	  <h4>我们学习<span class="label label-warning">bootstrap</span></h4>
	  
	  <hr/>
	  <a href="#">消息<span class="badge">5</span></a>
	  <button type="button">大家好<span class="badge">89</span></button>
	  <ul class="list-group">
	  	<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
	  	<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
	  	<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
	  </ul>
	  
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo02</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
	    <script language="JavaScript" src="js/bootstrap.min.js"></script>
	  
	</head>
	<body>
		<div class="container">
	  <div class="page-header">
	  	<h1>大屏展播，很好用，，<small>小标题</small></h1>
	  </div>
	  
	  <div class="jumbotron">
	   	  <h1>主要标题</h1>
	   	   <p>这里是想写的文本。。。。。</p>
	   	    <a href="#" class="btn btn-danger btn-lg">阅读更多</a>
	   </div>
	  </div>
	</body>
</html>