【无标题】

于 2022-04-28 17:04:19 发布
阅读量247 收藏 1
点赞数
文章标签： html5 bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58766017/article/details/124478464
版权

bootstrap 设计网页

<!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>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
			<link rel="stylesheet" href="./index.css">
		<!-- 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>
	<nav class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">COMO Admin</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页 <span class="sr-only">(current)</span></a></li>
					<li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
					<li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
					<li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>

				</ul>

				<ul class="nav navbar-nav navbar-right">

					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>

						</ul>
					</li>
					<li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
		<div class="container">

			<div class="row">
				<div class="col-md-12">
					<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">稍后处理</button>
						</p>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">网站数据</h3>
							</div>
							<div class="panel-body">
								<table class="table table-hover">
									<thead>
									<tr>
										<th>统计项目</th>
										<th>近日</th>
										<th>昨日</th>

									</tr>
									</thead>
									<tbody>
									<tr>
										<th scope="row">注册会员</th>
										<td>200</td>
										<td>400</td>

									</tr>
									<tr>
										<th scope="row">登陆会员</th>
										<td>4100</td>
										<td>5112</td>

									</tr>
									<tr>
										<th scope="row">今日发帖</th>
										<td>1540</td>
										<td>4511</td>

									</tr>
									<tr>
										<th scope="row">转载次数</th>
										<td>150</td>
										<td>110</td>

									</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="col-md-6" id="main" style="width: 400px;height: 300px">


							<script src="./js/echarts.min.js"></script>
							<script src="./tubiao.js"></script>

					</div>
				</div>
			</div>
			<div class="row">

				<div class="col-md-6">
					<div class="panel panel-default">
						<!-- Default panel contents -->
						<div class="panel-heading">热门网帖</div>


						<!-- List group -->
						<ul class="list-group">
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									音频
									<small class='pull-right'>2022.4.27</small>
								</a>
							</li>
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									文章
									<small class="pull-right">2022.4.28</small>
								</a>
							</li>
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									视频
									<small class="pull-right">2022.4.28</small>
								</a>
							</li>
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									图片
									<small class="pull-right">2022.4.28</small>
								</a>
							</li>
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									科普
									<small class="pull-right">2022.4.28</small>
								</a>
							</li>
							<li class="list-group-item">
								<a href="">
									<span class="glyphicon glyphicon-list-alt"></span>
									科普
									<small class="pull-right">2022.4.28</small>
								</a>
							</li>
				  </ul>
					</div>
				</div>
				<div class="col-md-6">

					<div class="panel panel-default">

					 <div class="panel-heading">热门网帖</div>
						<div class="panel-body">
							<p>CPU使用率40%</p>
							<div class="progress">
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 40%">
									<span class="sr-only">40% Complete (success)</span>
								</div>
							</div>
							<p>内存使用率20%</p>

							<div class="progress">
								<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
									aria-valuemin="0" aria-valuemax="100" style="width: 20%">
									<span class="sr-only">20% Complete</span>
								</div>
							</div>
							<p>电量使用率60%</p>

							<div class="progress">
								<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
									aria-valuemin="0" aria-valuemax="100" style="width: 60%">
									<span class="sr-only">60% Complete (warning)</span>
								</div>
							</div>
							<p>后台使用率80%</p>

							<div class="progress">
								<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
									aria-valuemin="0" aria-valuemax="100" style="width: 80%">
									<span class="sr-only">80% Complete (danger)</span>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="panel panel-default">
						 <div class="panel-heading">留言板</div>
						<div class="panel-body">
							
							<div class="media well">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object" src="./img/a.png" alt="...">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">李经理</h4>
							    今天加班，请大家注意。收到请回复，抓紧时间！！！！
							  </div>
							</div>
						<div class="media well">
						  
						  <div class="media-body text-right">
						    <h4 class="media-heading">小王</h4>
						    加班费是多少啊！！！！
						  </div>
						  <div class="media-right">
						    <a href="#">
						      <img class="media-object" src="./img/b.png" alt="...">
						    </a>
						  </div>
						</div>

							<div class="media well">
								<div class="media-left">
									<a href="#">
										<img class="media-object" src="./img/a.png" alt="...">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">李经理</h4>
									加班体现我们员工的水平，老板会知道员工的奉献的
								</div>
							</div>
							<div class="media well">

								<div class="media-body text-right">
									<h4 class="media-heading">00后员工小王</h4>
									搞笑呢还是哄小孩，GUN
								</div>
								<div class="media-right">
									<a href="#">
										<img class="media-object" src="./img/b.png" alt="...">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
		<div class="col-md-6">
			<form action="#" method="post">
				<div class="form-group">
					<label for="text1">输入留言</label>
					<textarea class="form-control" id="text1" rows="5" cols="10" placeholder="请输入留言内容"></textarea>

				</div>
				<button type="submit" class="btn btn-default">留言</button>
			</form>
			<div class="panel panel-default">
				<div class="panel-heading">团队联系方式</div>
				<div class="panel-body">
					<ul class="list-group">
						<li class="list-group-item">站长(李大哥)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;13435797092</li>
						<li class="list-group-item">技术(阿文哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
						<li class="list-group-item">推广(阿强哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
						<li class="list-group-item">客服(阿敏姐)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp; 13435797092    0760-888888</li>

					</ul>
				</div>
			</div>

		</div>
			</div>
		</div>



		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>

	</body>
</html>

在这里插入图片描述
在这里插入图片描述

不想做小白的小白程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt无标题窗口
05-21
一个比较简单的Qt无标题窗口，基本实现了现在默认窗口自带的功能，可以用于界面美化自绘标题栏。
无标题
02-12
无标题
HTML基础语法
weixin_46931860的博客
10-30 2224
HTML语义化 一、基本标签 1、HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>这是网页的标题</title> </head> <body> <p>这是网页的内容</p> </body> </html> 2、head标签 title meta l
【HTML5】1.语法入门总结（第一部分）
qq_44078824的博客
04-17 1968
0.思维导图 1.HTML5基本框架 HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。 第一个程序，基本框架。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
HTML入门和基础标签使用
Bulut0907
01-10 2477
目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。链接中还可以放表格、音频、视频等。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">是什么意思？
mine_soul的博客
12-11 1万+
最近在阅读网页源码时遇到了一些问题，恰好借这个机会填补一些有关知识。 如阅读下面代码：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>这是一个测试网页</title> </head> <body> <!--.....--> </bod
HTML meta 标签
热门推荐
zhangankang的博客
06-28 3万+
！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！ 属性 值 描述 charset( H5 New) character_set 定义文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关...
VC去掉'无标题'字样的方法.zip
11-21
Visual c++去掉'无标题'字样的方法.zip
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
vc++取掉窗口的 -无标题 字样
c#实现无标题栏窗口的拖动
09-05
本篇文章是对c#中实现无标题栏窗口拖动的方法进行了详细的分析介绍，需要的朋友参考下
无标题jsjshshhshshshs
05-09
无标题jsjshshhshshshs
无标题123111113332
最新发布
05-11
123
无标题gitcdscvscvsd
10-20
无标题gitcdscvscvsd
无标题zibraeffect
10-09
无标题zibraeffect
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
[事件处理] 点击同一按钮实现div的隐藏与显示切换
Jaylon Wang的专栏
10-16 1万+
点击同一按钮实现div的隐藏与现实切换: 在很多应用中，都有这样的功能，点击同一个按钮可以实现div的隐藏或者现实，当然操作的并非必须是按钮或者div，不过原理是一样的，下面就通过代码实例介绍一下如何实现此功能。 代码如下: [HTML] 纯文本查看 复制代码运行代码 01 02 03 04 05 06 07 0
Meta http-equiv属性详解
weixin_34413065的博客
09-09 190
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 引用meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞ ；其中http-equiv属性主要有以下几种参数： 1...
页面Header自适应屏幕
weixin_34234823的博客
05-29 1072
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten...
BootStrap系问题--给模态框(Modal)中的组件赋值
weixin_30687811的博客
04-20 866
<!DOCTYPE html> {% load staticfiles%} <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=Edge"> &lt...
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值