用bootstrap制作一个简单首页

因为需要写网页,想到了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">
<title>Hello World</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
<style>
  body{
    margin: 0;
    padding: 50px 0 0 0;
  }
  .left{
    background-color: #ddd;
    padding: 10px 0 500px 0;
  }
</style>


</head>


<body>


<!-- 顶部固定导航条 -->
<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role>
    <div class="container-fluid">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" date-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">管理系统</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li class="dropdown-header">业务功能</li>
          <li><a href="#">信息建立</a></li>
          <li><a href="#">信息查询</a></li>
          <li><a href="#">信息管理</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">系统功能</li>
          <li><a href="#">设置</a></li>
        </ul>
        </li>
        <li><a href="#">帮助</a></li>
      </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
        <input type="text" class="form-control" placeholder="用户名">
        <input type="text" class="form-control" placeholder="密码">
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
        </form>
      </div>
    </div>
  </nav>
</div>
<!-- 顶部固定导航条结束 -->


<!-- 内容 -->
<div class="container-fluid">
  <div class="row">
    <!-- 左侧导航栏 -->
  <div class="col-md-2 left ">
    <ul class="nav nav-pill nav-stacked">
     <li class="active primary"><a href="#">首页</a></li>
    </ul>
    <br>
    <ul class="nav nav-pill nav-stacked">
     <li><a href="#">信息建立</a></li>
     <li><a href="#">信息查询</a></li>
    <li><a href="#">信息管理</a></li>
    </ul>
    <br>
    <ul class="nav nav-pill nav-stacked">
    <li><a href="#">设置</a></li>
     <li><a href="#">帮助</a></li>
    </ul>
  </div>
  <!-- 左侧导航栏结束 -->




    <div class="col-md-10">


      <div class="page-header">
        <h1>管理控制台</h1>
      </div>
      <button class="btn btn-default">操作1</button>
      <button class="btn btn-primary">操作2</button>
      <button class="btn btn-success">操作3</button>
      <button class="btn btn-info">操作4</button>
      <button class="btn btn-warning">操作5</button>
      <button class="btn btn-danger">操作6</button>
      </p>


      <div class="row">
        <!-- 第一个面板 -->
        <div class="col-md-6"> 
          <div class="panel panel-primary">
        <div class="panel-heading">最新提醒</div>
        <div class="panel-body">
          <div class="alert alert-success">已通过</div>
          <div class="alert alert-danger">被打回</div>
          <div class="alert alert-warning">付款延迟</div>        
        </div>
          </div>
        </div>
        <!-- 第一个面板结束 -->
       
        <!-- 第二个面板 -->
        <div class="col-md-6"> 
          <div class="panel panel-primary">
            <div class="panel-heading">我的任务</div>
            <div class="panel-body">
          <div class="alert alert-info">订单审批<span class="badge pull-right">42</span></div>
          <div class="alert alert-info">收款确认<span class="badge pull-right">20</span></div>
          <div class="alert alert-info">付款确认<span class="badge pull-right">50</span></div>        
            </div>
          </div>
        </div>
        <!-- 第二个面板结束 -->
      </div>


      


      <!-- 第二行 -->
      <div class="row">
        <!-- 第三个面板 -->
        <div class="col-md-6"> 
          <div class="panel panel-primary">
        <div class="panel-heading">最新订单</div>
        <div class="panel-body">
          <table class="table table-striped">
          <thead>
            <tr>
            <th>#</th>
              <th>产品</th>
              <th>数量</th>
              <th>总金额</th>
              <th>业务员</th>
            </tr>
          </thead>
          <tbody>
            <tr>
            <td>1</td>
            <td>Apple Mac air</td>
            <td>10</td>
            <td>80000</td>
            <td>Mr.Wang</td>
            </tr>
            <tr>
            <td>2</td>
            <td>Apple iPad air</td>
            <td>20</td>
            <td>65000</td>
            <td>Miss.Yin</td>
            </tr>
            <tr>
            <td>3</td>
            <td>Apple Macbook pro</td>
            <td>5</td>
            <td>50000</td>
            <td>Mr.Liu</td>
            </tr>
          </tbody>
          </table>   
          <button class="btn btn-primary">查看详细&raquo;</button>    
        </div>
          </div>
        </div>
        <!-- 第三个面板结束 -->
        <!-- 第四个面板 -->
        <div class="col-md-6"> 
        <div class="panel panel-primary">
        <div class="panel-heading">工程进度</div>
        <div class="panel-body">     
          <p><span class="label label-primary">水井挖掘工程</span></p>
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span style="white-space:pre">			</span>    <span class="sr-only">60% Complete</span>
<span style="white-space:pre">			</span>    </div>
          </div>
          <p><span class="label label-danger">基建工程</span></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 style="white-space:pre">			</span>    <span class="sr-only">80% Complete</span>
<span style="white-space:pre">			</span>    </div>
          </div>
        </div>
          </div>
        </div>
        <!-- 第四个面板结束 -->
      </div>
      <!-- 第二个行结束 -->


    </div><!-- end of class="col-md-10" -->
  </div><!-- end of row after container -->
</div><!-- end of second class="container-fluid" -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

 

最终效果图


 

用到了导航栏,栅格系统布局,按钮,面板,警告框,徽章,进度条,表格。

 

总结

用了几天把bootstrap简单了解了一下,发现确实很好用。把你想要的功能都变成一行代码实现。而且门槛很低,只要懂得html和css就可以熟练使用bootstrap了。

  • 6
    点赞
  • 46
    收藏
  • 打赏
    打赏
  • 7
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 7

打赏作者

Tuzi294

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值