bootstrap7

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量248 收藏
点赞数
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QiaoG_/article/details/124561331
版权

代码

×
网站存在漏洞，急需修复！

当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！

立即修复 稍后处理 

<div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
       网站数据统计
      </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">
    <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="#"><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="#"><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="#"><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="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2015/08/08</small></a>
              </li>
            </ul>
             <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>
     
    </div>
</div>


<div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">今日访客统计</div>
      <div class="panel-body">
        <canvas id="canvas" class="col-md-12">
          <script src="js/script.js"></script>
        </canvas>
      </div>
    </div>
</div>
<div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">服务器状态</div>
      <div class="panel-body">
        <p>内存使用率：40%</p>
           <div class="progress">
              <div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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>CPU使用率：80%</p>
            <div class="progress">
              <div class="progress-bar progress-bar-danger progress-bar-striped" 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 class="media-body text-right">
                <h4 class="media-heading">李哥</h4>
                阿文，今晚需要加班,升级网站程序，网站发现漏洞！
              </div>
              <div class="media-right">
                <a href="#">
                  <img class="media-object wh64" src="img/b.png" alt="李哥">
                </a>
              </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 wh64" src="img/b.png" alt="李哥">
                </a>
              </div>
            </div>
            <div class="media well">
              <div class="media-left">
                <a href="#">
                  <img class="media-object wh64" src="img/a.png" alt="李哥">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">李哥</h4>
                阿文，今晚需要加班,升级网站程序，网站发现漏洞！
              </div>
            </div>
      </div>
      <div class="col-md-5">
        
        <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>
Copyright   ©2019-2020    www.edu.com   ICP备1300号-4 
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
 <script src="js/chart.js"></script>

运行效果

在这里插入图片描述

QiaoG_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap项目三作业
weixin_52765407的博客
05-14 315
<!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个m
Bootstrap使用
m0_57774967的博客
04-24 5178
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Web前端 — Bootstrap（7）
Roger_CoderLife的博客
06-11 421
Bootstrap本次知识点： 1.导航 2.导航条 3.面包屑导航 1.导航（标签） （1）标签页 nav-tabs <ul class="nav nav-tabs"> <li class="active"><a href="">Home</a></li> ...
Bootstrap7 栅格
weixin_44055272的博客
05-20 267
1 栅格基础 响应式布局与媒体查询 https://blog.csdn.net/weixin_44055272/article/details/90241688 1.1 通用的栅格 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。这样就方便了布局。 1.2 栅格对于不同设备的处理 超小屏幕手机 (<768px) 小屏幕 平板 (≥768px) 中等...
bootstrap的安装
12-05 1807
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
Bootstrap educoder
qq_46675545的博客
06-12 3711
Bootstrap Bootstrap入门
bootstrap网页作业
m0_62221227的博客
04-19 5054
bootstrap网页作业
Bootstrap简介
归兮的博客
08-18 9055
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
Bootstrap基础知识
li_peng_yuan的博客
11-14 5182
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
bootstrap datetimepicker
lishuaigell的博客
05-17 5422
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
Mirantis OpenStack Fuel 9.0 bootstrap7（9-7）
03-31
Mirantis OpenStack Fuel 9.0 bootstrap7
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-slider：Bootstrap 3和Bootstrap 4的滑块控件
01-29
从主要版本11.0.0开始，我们仅支持Bootstrap 4！ 安装 要使用凉亭吗？ bower install seiyria-bootstrap-slider 要使用npm吗？ npm install bootstrap-slider 想要从CDN获得它吗？ 基本设定 从目录中获取已编译...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 481
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 299
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
网页开发 HTML
ultramand的博客
09-06 849
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 332
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
Bootstrap入门指南
"Bootstrap1111 - Bootstrap官方文档" Bootstrap是世界上最受欢迎的前端开发框架之一，由Twitter的开发者创建并开源。它提供了一系列预先设计的CSS和JavaScript组件，用于快速构建响应式、移动优先的网页。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值