用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了。

好的,下面是一个基于Bootstrap简单页面布局示例网站: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Page Layout Example</title> <!-- 引入Bootstrap CSS文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/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="#">Contact</a> </li> </ul> </div> </nav> <!-- 页面主体 --> <div class="container mt-3"> <div class="row"> <div class="col-md-8"> <h1>Welcome to my website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, libero a aliquet dictum, nisi lacus lacinia metus, vel rhoncus ipsum mauris et ipsum. Sed scelerisque turpis non augue faucibus, vel tincidunt sapien euismod. Suspendisse quis vestibulum velit, eget laoreet nunc. Maecenas posuere fermentum ante, ac interdum felis ultrices quis. Duis ipsum dolor, scelerisque sit amet tellus et, efficitur rutrum nulla. Nulla facilisi.</p> </div> <div class="col-md-4"> <h3>Latest News</h3> <ul class="list-group"> <li class="list-group-item">News item 1</li> <li class="list-group-item">News item 2</li> <li class="list-group-item">News item 3</li> <li class="list-group-item">News item 4</li> </ul> </div> </div> </div> <!-- 引入Bootstrap JS文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> </body> </html> ``` 该网站包含一个导航栏和一个主体内容区域。导航栏包含Logo和三个链接,可以通过Bootstrap的内置样式和组件轻松构建。主体内容区域是一个两列布局,左侧是一篇文章,右侧是最新新闻列表。通过Bootstrap的栅格系统,可以轻松实现响应式布局。最后,引入Bootstrap的JS文件,可以增强网站的交互性和用户体验。 希望这个示例可以帮助你了解如何使用Bootstrap制作简单页面布局。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值