用bootstrap 制作一个简洁美观的页面

来源：互联网发布：淘宝新开店如何推广编辑：程序博客网时间：2024/04/29 02:31
今天学习了bootstrap的一些基础组件，然后用了其中的一些组件制作了一个页面，在这里分享一下，希望大家不要嫌弃

<span style="font-size:18px;"><!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><title>某管理系统</title><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"><style>body{margin-top: 65px;}.col-md-2{background-color: #ccc;/*?*/height: 600px;}#left-content{margin-top: 20px;}.list-group{padding-left: 0;}#panel-group{margin-top: 20px;}#onebtn{margin: 10px 0;}#btngroup button{width: 100%;}.progress{margin-top: 15px;}</style></head><body><nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">    <!--container-fluid表示自适应大小，container表示居中--><div class="container"><!--定义顶部导航栏--><div class="navbar-header"><!--button是当屏幕小于多少时出现的可以打开导航列表的按钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar"><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="#">某管理系统</a></div><!--collapse用于导航栏折叠之后数据在button按钮里点击显示--><div class="collapse navbar-collapse" id="demo-navbar"><!--nav navbar-nav表示显示在导航栏里--><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"><!--通过dropdown-header来标记一组动作--><li class="dropdown-header">信息</li><li><a href="#">信息建立</a></li><li><a href="#">信息查询</a></li><li><a href="#">信息管理</a></li></ul></li><li><a href="#" data-toggle="modal" data-target="#about">帮助</a></li>                <!--input必须得实现form-control才有样式效果-->                <li><a><input type="text" placeholder="用户名" class="form-control"/></a></li>                <li><a><input type="text" placeholder="密码" class="form-control"/></a></li>    <!--btn btn-default表示默认样式-->                <li><a><button type="button" class="btn btn-default">登陆</button></a></li>                </ul></div></div></nav><div class="container-fluid"><div class="row"><div class="col-md-2"><div class="text-center" id="left-content"><div class="list-group"><a href="#" class="list-group-item active">首页</a></div><div class="list-group"><a href="#" class="list-group-item">信息查询</a><a href="#" class="list-group-item">信息管理</a><a href="#" class="list-group-item">信息建立</a></div><div class="list-group"><a href="#" class="list-group-item">设置</a><a href="#" class="list-group-item">帮助</a></div></div></div><div class="col-md-10"><h2>管理控制台</h2><hr class="divider">  <button type="button" class="btn btn-default">操作一</button>  <button type="button" class="btn btn-primary">操作二</button>  <button type="button" class="btn btn-success">操作三</button>  <button type="button" class="btn btn-info">操作四</button>  <button type="button" class="btn btn-warning">操作五</button>  <button type="button" class="btn btn-danger">操作六</button>  <div id="panel-group">  <!-- 1 -->  <div class="panel panel-primary">  <div class="panel-heading">  <h3 class="panel-title">最新提醒</h3>  </div>  <div class="panel-body">  <div class="alert alert-info" role="alert">  <!-- strong用于加粗文字 -->  <strong>提示</strong> 您的订单(20160001)已经审批通过  </div>  <div class="alert alert-danger" role="alert">  <strong>提示</strong> 您的订单(20160002)被打回  </div>  <div class="alert alert-warning" role="alert">  <strong>提示</strong> 您的订单(20160003)付款延迟  </div>  </div>    </div>  <!-- 2 -->  <div class="panel panel-primary">  <div class="panel-heading">  <h3 class="panel-title">我的任务</h3>  </div>  <div class="panel-body" id="btngroup">  <div><button class="btn btn-primary" type="button"><span class="pull-left">订单审批</span><span class="badge pull-right">42</span></button></div>  <div id="onebtn"><button class="btn btn-primary" type="button"><span class="pull-left">收款确认</span><span class="badge pull-right">20</span></button></div>  <div><button class="btn btn-primary" type="button"><span class="pull-left">付款确认</span><span class="badge pull-right">10</span></button></div>  </div>  </div>  <!-- 3 -->  <div class="panel panel-primary">  <div class="panel-heading">  <h3 class="panel-title">最新订单</h3>  </div>  <div class="panel-body">  <table class="table">  <thead>  <tr>  <th>#</th>  <th>产品</th>  <th>数量</th>  <th>总金额</th>  <th>业务员</th>  </tr>  </thead>  <tbody>  <tr>  <th>1</th>  <th>Apple Macbook air</th>  <th>10</th>  <th>80000</th>  <th>张三</th>  </tr>  <tr>  <th>2</th>  <th>Apple iPad air</th>  <th>20</th>  <th>65000</th>  <th>李四</th>  </tr>  <tr>  <th>1</th>  <th>Apple Macbook pro</th>  <th>5</th>  <th>50000</th>  <th>王五</th>  </tr>  </tbody>  </table>  </div>  </div>  <!-- 4 -->  <div class="panel panel-primary">  <div class="panel-heading">  <h3 class="panel-title">工程进度</h3>  </div>  <div class="panel-body">  <button class="btn btn-primary" role="button">水井挖掘工程</button>  <div class="progress">  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 style="width: 60%">  <span class="sr only">完成60%</span>  </div>  </div>  <button class="btn btn-primary" role="button">基建工程</button>  <div class="progress">  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow=20 aria-valuemin=0 aria-valuemax=100 style="width: 20%">  <span class="sr only">完成20%</span>  </div>  </div>  </div>  </div>  </div></div></div></div></div><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html></span>
做出来的效果大致是这样
1 0