bootstrap前端框架的简单使用

来源：互联网发布：js将字符串向下取整编辑：程序博客网时间：2024/05/17 00:18
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- 移动设备优先 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 禁用缩放 --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-- bootstrap --><link rel="stylesheet" href="/js/bootstrap3/css/bootstrap.css"><link rel="stylesheet" href="/js/bootstrap3/css/bootstrap-theme.css"><script type="text/javascript" src="/js/bootstrap3/js/bootstrap.js"></script><title>Insert title here</title></head><body><!-- navbar-fixed-top滚动时，一直悬浮顶部；navbar-static-top 固定顶部； navbar-inverse反色 -->  <nav class="navbar navbar-default  navbar-static-top navbar-inverse">  <div class="container-fluid">    <div class="navbar-header">      <a class="navbar-brand" href="#">        使用范例      </a>    </div>  </div></nav><div class="container-fluid"><!-- 12栅格布局列表组 --><div class="col-xs-2"><ul class="list-group">  <li class="list-group-item">Cras justo odio</li>  <li class="list-group-item">Dapibus ac facilisis in</li>  <li class="list-group-item">Morbi leo risus</li>  <li class="list-group-item">Porta ac consectetur ac</li>  <li class="list-group-item">Vestibulum at eros</li>  <li class="list-group-item">Cras justo odio</li>  <li class="list-group-item">Dapibus ac facilisis in</li>  <li class="list-group-item">Morbi leo risus</li>  <li class="list-group-item">Porta ac consectetur ac</li>  <li class="list-group-item">Vestibulum at eros</li>  <li class="list-group-item">Cras justo odio</li>  <li class="list-group-item">Dapibus ac facilisis in</li>  <li class="list-group-item">Morbi leo risus</li>  <li class="list-group-item">Porta ac consectetur ac</li>  <li class="list-group-item">Vestibulum at eros</li>  <li class="list-group-item">Cras justo odio</li>  <li class="list-group-item">Dapibus ac facilisis in</li>  <li class="list-group-item">Morbi leo risus</li>  <li class="list-group-item">Porta ac consectetur ac</li>  <li class="list-group-item">Vestibulum at eros</li></ul></div><!-- 面板组件 --><div class="col-xs-10"><div class="panel panel-default">  <div class="panel-heading">面板标题</div>  <div class="panel-body"><!--   水平排列表单 -->  <form class="form-horizontal"><!--   表单组 -->  <div class="form-group"><!--   这里lable中的for参数与id一致 -->    <label for="goodsName" class="col-sm-1 control-label">商品名称</label>    <div class="col-sm-5">      <input type="text" class="form-control" id="goodsName" placeholder="请输入商品名称">    </div>    <label for="goodsPrice" class="col-sm-1 control-label">商品价格</label>    <div class="col-sm-5">      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">    </div> </div>   <div class="form-group"><!--   这里lable中的for参数与id一致 -->    <label for="goodsType" class="col-sm-1 control-label">商品类型</label>    <div class="col-sm-5">        <select class="form-control">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option></select>    </div>    <label for="goodsPrice" class="col-sm-1 control-label">生产时间</label>    <div class="col-sm-5"><!--     组合两个输入框，一个图标 -->    <div class="input-group">      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">     <span class="input-group-addon">     <i class="glyphicon glyphicon-calendar"></i>     </span>      <input type="text" class="form-control" id="goodsPrice" placeholder="请输入商品价格">    </div>    </div> </div> <div class="form-group"> <div class="col-sm-12"><!-- 按钮的其他样式btn-default primary success info warning danger link等样式 --><div class="text-center"> <button class="btn btn-primary" type="button"> <i class="glyphicon glyphicon-search"></i> 搜索 </button> <button class="btn btn-danger" type="button"> <i class="glyphicon glyphicon-repeat"></i> 重置 </button> </div> </div> </div>  </form>  </div></div><div class="table-responsive"><!-- 鼠标悬停变色 边框带线 行之间颜色间隔 -->  <table class="table table-hover table-bordered table-striped"><!--   tr的样式success warning info active danger -->    <tr class="success">    <td>商品名称</td>    <td>商品类型</td>    <td>商品价格</td>    <td>商品时间</td>    <td>是否热销</td>    <td>上架状态</td>    </tr>    <tr class="warning">    <td>iphone</td>    <td>3C</td>    <td>8888</td>    <td>2017-09-13</td>    <td>0</td>    <td>1</td>    </tr>    <tr class="danger">    <td>iphone</td>    <td>3C</td>    <td>8888</td>    <td>2017-09-13</td>    <td>0</td>    <td>1</td>    </tr>    <tr class="info">    <td>iphone</td>    <td>3C</td>    <td>8888</td>    <td>2017-09-13</td>    <td>0</td>    <td>1</td>    </tr>    <tr class="active">    <td>iphone</td>    <td>3C</td>    <td>8888</td>    <td>2017-09-13</td>    <td>0</td>    <td>1</td>    </tr>    <tr>    <td>iphone</td>    <td>3C</td>    <td>8888</td>    <td>2017-09-13</td>    <td>0</td>    <td>1</td>    </tr>  </table><!--   分页 --><div class="text-center"><ul class="pagination"><li><a href="#"><span>«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#"><span>»</span></a></li></ul></div></div></div></div></body></html>
阅读全文
0 0