Bootstrap数据统计网页作业

最新推荐文章于 2023-05-21 14:48:51 发布

QiQi_7777888

最新推荐文章于 2023-05-21 14:48:51 发布

阅读量282

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/QiQi_7777888/article/details/124562574

版权

这篇博客介绍了如何利用Bootstrap框架来构建一个数据统计的前端网页。通过HTML代码展示了页面结构，并给出了运行后的实际效果。

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

HTML代码

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ZYQ网站</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css"  crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>HELLO,WORD！</h1>
	<div class="container">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
			<h4>网站存在漏洞，急需修复！</h4>
			<p>当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！</p>
			<p>
		        <button type="button" class="btn btn-danger">立即修复</button>
		        <button type="button" class="btn btn-default" data-dismiss="alert" data-dismiss="alert">稍后处理</button>
			</p>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div id="main" style="width: 800px;height: 600px;"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            网站热帖
          </div>
          
              <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2015/08/08</small></a>
                  </li>
                   <li class="list-group-item">
                    <a href="#">