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>
    <link rel="stylesheet" href="./css/index.css">
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> -->
    <script src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="./js/jquery.min.js"></script> -->
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 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/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <!-- 导航条 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- 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="#">COMOAdmin</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="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="content.html"><span class=" glyphicon glyphicon-list-alt" aria-hidden="true"></span>内容管理</a></li>
              <li>
                <a href="users.html" ><span class="glyphicon glyphicon-user" aria-hidden="true"></span>用户管理 <span ></span></a>
                
              </li>
              <li><a href="tag.html"><span class=" glyphicon glyphicon-tag" aria-hidden="true"></span>标签管理</a></li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">admin</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">推出 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!-- 主体 -->
      <div class="container mian">
        <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="row">
          <!-- 网站数据统计 -->
          <div class="col-md-6" >
              <div class="panel panel-default">
                  <!-- Default panel contents -->
                  <div class="panel-heading">网站数据统计</div>
                <div class="panel-body">
                  <!-- Table -->
                  <table class="table">
              <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">
                <h3 class="panel-title">网站数据统计</h3>
              </div>
              <ul class="list-group">
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  </div>
                </li>
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  </div>
                </li>
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  </div>
                </li>
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  </div>
                </li>
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  </div>
                </li>
                <li class="list-group-item">  
                  
                  <div class="media">
                  <div class="media-left media-middle">
                    <a href="#"> 
                     <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                   
                    </a>
                  </div>
                  <div class="media-body">
                    <a href="#">
                      &nbsp;&nbsp;发挥特长 迅速反应 多语种输出助力国际战“疫”
                      <small class="pull-right">2015/08/08</small>
                    </a>
                 
                  </div>
                
                  <
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,我无法直接回答关于bootstrap实训作业的问题。引用提到了一个关于Bootstrap4前端框架和MySQL数据库的综合实训课程,而引用提到了一个关于响应式Web开发项目的教程。根据这些信息,我可以为您提供一些关于Bootstrap实训作业的一般介绍和演示。 Bootstrap是一个流行的前端框架,它提供了一套用于构建响应式和移动优先的网站和应用程序的工具和样式。在Bootstrap实训作业中,您可能会学习如何使用Bootstrap来创建漂亮的界面和交互效果,以及如何与后端数据库进行交互。 在实训过程中,您可能会学习以下内容: 1. 学习如何使用Bootstrap的网格系统来创建响应式布局。 2. 学习如何使用Bootstrap的组件来创建导航栏、按钮、表单等常见元素。 3. 学习如何使用Bootstrap的样式来美化页面,如颜色、字体、背景等。 4. 学习如何使用Bootstrap的JavaScript插件来添加交互功能,如轮播图、模态框等。 5. 学习如何使用Bootstrap的响应式工具来适应不同的屏幕尺寸。 以下是一个简单的演示,展示如何使用Bootstrap创建一个基本的网页布局: ```html <!DOCTYPE html> <html> <head> <title>Bootstrap实训作业</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container"> <h1>Welcome to Bootstrap Training</h1> <p>This is a sample paragraph.</p> <button class="btn btn-primary">Click me</button> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.min.js"></script> </body> </html> ``` 这只是一个简单的示例,您可以根据实训要求和学习进度进行更复杂的实现。希望这个简单的演示能够帮助您了解Bootstrap实训作业的基本概念和使用方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值