牛逼的bootstrap小布局
// <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script></script>
<style>
.search span {
float: right;
margin-top: -25px;
margin-right: 75px;
}
.search a span {
color: #000000;
}
.glyphicon1 {
float: right;
margin-right: 12px;
margin-top: -37px;
border: none;
outline: none;
}
.button {
background-color: #92A5A3;
color: #fff;
}
.modal-footer span {
color: #fff;
}
.modal-header h4 {
color: #7D7D7F;
}
table {
text-align: center;
color: #6C6C77;
}
table tbody tr td span {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
color: #fff;
background-color: #57C1E4;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="phone">
<div class="container">
<div class="row">
<div class="col-xs-12 title">学生因病缺课汇总</div>
<div class="col-xs-12 search"><input type="text" class="searchtxt" placeholder="请输入要查询的关键字" />
<button class="glyphicon1 glyphicon-search"></button>
</div>
<div class="border1">
<div class="col-xs-12 bo1">
<div class="col-xs-3 pic"><img src="./img/pic1.png" /></div>
<div class="col-xs-6 line">
<span>未填写班级：39</span><br />
<span>零报告班级：0</span><br />
<span>因病缺课班级：0</span>
</div>
<div class="col-xs-3 edit">
<button class="click">点击查看</button>
</div>
</div>
</div>
<div class="border2">
<div class="col-xs-12 bo2">
<div class="col-xs-3 pic"><img src="./img/pic2.png" /></div>
<div class="col-xs-6 line">
<span>未填写班级：39</span><br />
<span>零报告班级：0</span><br />
<span>因病缺课班级：0</span>
</div>
<div class="col-xs-3 edit">
<button class="click2">点击查看</button>
</div>
</div>
</div>
<div class="border2">
<div class="col-xs-12 bo3">
<div class="col-xs-3 pic"><img src="./img/pic3.png" /></div>
<div class="col-xs-6 line">
<span>未填写班级：39</span><br />
<span>零报告班级：0</span><br />
<span>因病缺课班级：0</span>
</div>
<div class="col-xs-3 edit">
<button class="click3">点击查看</button>
</div>
</div>
</div>
<div class="border2">
<div class="col-xs-12 bo4">
<div class="col-xs-3 pic"><img src="./img/pic4.png" /></div>
<div class="col-xs-6 line">
<span>未填写班级：39</span><br />
<span>零报告班级：0</span><br />
<span>因病缺课班级：0</span>
</div>
<div class="col-xs-3 edit">
<button class="click4">点击查看</button>
</div>
</div>
</div>
<div class="border2">
<div class="col-xs-12 bo5">
<div class="col-xs-3 pic"><img src="./img/pic5.png" /></div>
<div class="col-xs-6 line">
<span>未填写班级：39</span><br />
<span>零报告班级：0</span><br />
<span>因病缺课班级：0</span>
</div>
<div class="col-xs-3 edit">
<button class="click5">点击查看</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 平板 -->
<div class="pinban">
<div class="container">
<div class="row">
<div class="col-sm-3 top">学生因病缺课汇总</div>
<div class="col-sm-9 search">
<input type="text" placeholder="请输入要查询的关键字" class="form-control" /><a href="#"><span
class="glyphicon glyphicon-search"></span></a>
</div>
<div class="left">
<div class="col-sm-12 cyx"><span class="cyxclass">财经艺术系</span><span
class="col-sm-1 glyphicon glyphicon-chevron-down"></span></div>
<div class="study">
<div class="col-sm-12 type">未填写班级</div>
<div class="col-sm-12 type">零报告班级</div>
<div class="col-sm-12 type">因病缺课班级</div>
</div>
<div class="col-sm-12 department"><span class="cyxclass">信息工程系</span><span
class="col-sm-1 glyphicon glyphicon-chevron-right"></span></div>
<div class="col-sm-12 department"><span class="cyxclass">机电工程系</span><span
class="col-sm-1 glyphicon glyphicon-chevron-right"></span></div>
<div class="col-sm-12 department"><span class="cyxclass">基础部</span><span
class="col-sm-1 glyphicon glyphicon-chevron-right"></span></div>
<div class="col-sm-12 department"><span class="cyxclass">旅游系</span><span
class="col-sm-1 glyphicon glyphicon-chevron-right"></span></div>
</div>
<div class="right">
<div class="col-sm-11 date">
<span>缺课日期：</span><input type="date" class="form-control" /><span
style="margin-left: 5px;">~</span><input type="date" class="form-control"
style="margin-left: 5px;" />
</div>
<div class="col-sm-11 tab">
<table class="table table-condensed">
<thead>
<tr>
<th>序号</th>
<th>缺课日期</th>
<th>系部</th>
<th>班级</th>
<th>班主任</th>
</tr>
</thead>
<tbody>
<tr>
<td style="line-height:50px;text-align: center;">1</td>
<td style="line-height:50px;text-align: center;">2021/03/10-2021/03-15</td>
<td style="line-height:50px;text-align: center;">财经艺术系</td>
<td style="line-height:50px;text-align: center;">1702</td>
<td style="line-height:50px;text-align: center;">郭杰</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- 电脑 -->
<div class="computer">
<div class="row" id="pp-row1">
<div class="col-lg-4" style="margin-left: 3%; font-weight: 700; font-size: 15px;">学生因病缺课汇总</div>
</div>
<form class="form-inline" id="pp-form1">
<div class="form-group">
<div class="row">
<div class="col-lg-1">
<div class="rq">
<label class="col-lg-2 control-label">缺课日期：</label>
<div class="col-lg-10">
<input type="date" class="form-control" id="inputDate" placeholder="Password"> ~
<input type="date" class="form-control" id="inputDate2" placeholder="Password">
</div>
</div>
</div>
<div class="col-lg-3">
<div class="rq">
<label class="col-lg-2 control-label">所属系部：</label>
<div class="col-lg-11">
<select class="form-control" id="select">
<option>财经艺术系</option>
<option>机电工程系</option>
<option>基础部</option>
<option>旅游系</option>
<option>信息工程系</option>
</select>
</div>
</div>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-primary">查询</button>
</div>
</div>
</div>
</form>
<form class="form-inline" id="pp-form2">
<div class="col-lg-4">
<div class="btnz">
<button type="button" class="btn btn-primary">导出晨检记录</button>
<button type="button" class="btn btn-primary">导出追查记录</button>
<button type="button" class="btn btn-primary">导出零报告记录</button>
<button type="button" class="btn btn-primary">导出未填写记录</button>
</div>
</div>
</form>
<div class="row" id="pp-row2">
<table class="table table-striped table-hover .table-bordered">
<thead>
<tr>
<th>序号</th>
<th>缺课日期</th>
<th>系部</th>
<th>未填写班级（在校班级）</th>
<th>零报告班级（含工作室上报）</th>
<th>因病缺课班级（含工作室上报）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2021-03-17</td>
<td>财经艺术系</td>
<td><a class="a1">30</a></td>
<td><a class="a1" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap">0</a></td>
<td><a class="a2">1</a></td>
</tr>
<tr>
<td>2</td>
<td>2021-03-17</td>
<td>机电工程系</td>
<td><a class="a1">17</a></td>
<td><a class="a1" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap">11</a></td>
<td><a class="a2">0</a></td>
</tr>
<tr>
<td>3</td>
<td>2021-03-17</td>
<td>基础部</td>
<td><a class="a1">9</a></td>
<td><a class="a1" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap">4</a></td>
<td><a class="a2">0</a></td>
</tr>
<tr>
<td>4</td>
<td>2021-03-17</td>
<td>旅游系</td>
<td><a class="a1">21</a></td>
<td><a class="a1" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap">0</a></td>
<td><a class="a2">0</a></td>
</tr>
<tr>
<td>5</td>
<td>2021-03-17</td>
<td>信息工程系</td>
<td><a class="a1">17</a></td>
<td><a class="a1" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap">6</a></td>
<td><a class="a2">1</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="./js/jQuery-3.6.0.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">零报告班级</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>缺课日期</th>
<th>系部</th>
<th>班级</th>
<th>班主任</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1822</span></td>
<td>孔庆荣</td>
</tr>
<tr>
<td>2</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1823</span></td>
<td>吕旭琴</td>
</tr>
<tr>
<td>3</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1824</span></td>
<td>任丽娅</td>
</tr>
<tr>
<td>4</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1922</span></td>
<td>张晓棠</td>
</tr>
<tr>
<td>5</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1923</span></td>
<td>董伟伟</td>
</tr>
<tr>
<td>6</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>1924</span></td>
<td>叶璐</td>
</tr>
<tr>
<td>7</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>2025</span></td>
<td>张星</td>
</tr>
<tr>
<td>8</td>
<td>2021-03-22</td>
<td>基础部</td>
<td><span>2026</span></td>
<td>刘颖星</td>
</tr>
</tbody>
</table>
<ul class="pager">
<li><a href="#">首页</a>
</li>
<li><a href="#">上一页</a>
</li>
<li><a href="#">上一页</a>
</li>
<li><a href="#">末页</a>
</li>
<li><a href="#">1/1页</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default glyphicon glyphicon-remove" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
@media screen and (max-width:768px) {
* {
padding: 0;
margin: 0;
}
.pinban {
display: none;
}
.computer {
display: none;
}
.title {
background-color: #31B0D5;
height: 80px;
width: 100%;
color: #fff;
font-size: 24px;
line-height: 80px;
text-align: center;
font-family: 微软雅黑;
}
.search {
width: 100%;
height: 50px;
}
.searchtxt {
height: 40px;
width: 100%;
background-color: rgb(230 230 230 / 38%);
margin: 10px auto;
border: none;
border-radius: 5px;
text-align: center;
}
.border1 {
width: 100%;
padding: 15px;
float: left;
}
.bo1 {
height: 80px;
border-radius: 10px;
background-color: #fff7f7;
}
.col-xs-3 {
padding: 0;
}
.pic {
width: 62px;
height: 62px;
margin-top: 9px;
}
.line {
font-size: 12px;
font-family: 微软雅黑;
color: #747474;
margin-top: 13px;
padding: 0 0 0 20px;
letter-spacing: 3px;
text-align: center;
}
.edit {
margin-top: 25px;
float: right;
}
.click {
width: 80px;
height: 25px;
border-radius: 15px;
font-size: 12px;
text-align: center;
color: #fff;
background-color: #f5a6ac;
border: none;
letter-spacing: 1px;
float: right;
}
.border2 {
float: left;
width: 100%;
padding: 0 15px 0 15px;
}
.click2 {
width: 80px;
height: 25px;
border-radius: 15px;
font-size: 12px;
text-align: center;
color: #fff;
background-color: #82d57c;
border: none;
letter-spacing: 1px;
float: right;
}
.bo2 {
height: 80px;
border-radius: 10px;
background-color: #f7fff7;
margin-bottom: 15px;
}
.click3 {
width: 80px;
height: 25px;
border-radius: 15px;
font-size: 12px;
text-align: center;
color: #fff;
background-color: #fcb96f;
border: none;
letter-spacing: 1px;
float: right;
}
.bo3 {
height: 80px;
border-radius: 10px;
background-color: #fffcf7;
margin-bottom: 15px;
}
.click4 {
width: 80px;
height: 25px;
border-radius: 15px;
font-size: 12px;
text-align: center;
color: #fff;
background-color: #c0adfe;
border: none;
letter-spacing: 1px;
float: right;
}
.bo4 {
height: 80px;
border-radius: 10px;
background-color: #fff7ff;
margin-bottom: 15px;
}
.click5 {
width: 80px;
height: 25px;
border-radius: 15px;
font-size: 12px;
text-align: center;
color: #fff;
background-color: #79d6ff;
border: none;
letter-spacing: 1px;
float: right;
}
.bo5 {
height: 80px;
border-radius: 10px;
background-color: #f7f9ff;
margin-bottom: 15px;
}
}
/* 平板 */
@media screen and (min-width:768px) and (max-width:1200px) {
html,
body {
height: 100%;
width: 100%;
min-width: 900px;
}
body {
background-color: #F1F1F1;
}
.phone {
display: none;
}
.computer {
display: none;
}
.pinban {
width: 100%;
height: 100%;
display: block;
}
.container {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.row {
height: 100%;
}
.top {
height: 80px;
line-height: 80px;
text-align: center;
background-color: #3598DB;
color: #fff;
font-size: 19px;
width: 20%;
float: left;
}
.search {
height: 80px;
background-color: #fff;
box-shadow: 2px -1px 10px grey;
width: 80%;
float: left;
}
.search input {
margin-top: 20px;
margin-left: 25px;
text-align: center;
}
.form-control {
width: 90%;
}
.left {
float: left;
height: 100%;
width: 20%;
background-color: #3598DB;
}
.cyx {
height: 55px;
color: #fff;
text-align: left;
line-height: 55px;
font-size: 19px;
background-color: #F7ACB1;
text-indent: 8px;
margin: 0;
padding: 0;
}
.left span {
float: right;
line-height: 55px;
width: 10%;
margin-right: 17px;
padding: 0;
}
.left .cyxclass {
float: left;
margin: 0;
padding: 0;
width: 80%;
line-height: 55px;
padding-left: 15px;
letter-spacing: 3px;
}
.left .study {
height: 100px;
background-color: #fff;
clear: both;
}
.type {
letter-spacing: 3px;
padding-top: 10px;
text-indent: 8px;
}
.type:hover {
color: #4CA5DE;
}
.department {
height: 55px;
color: #fff;
text-align: left;
line-height: 55px;
font-size: 19px;
text-indent: 8px;
margin: 0;
padding: 0;
}
.department:hover {
background-color: #F7ACB1;
}
.right {
float: left;
width: 80%;
}
.date {
background-color: #fff;
height: 40px;
line-height: 40px;
border-radius: 20px;
margin-top: 20px;
margin-left: 26px;
}
.date span {
float: left;
color: #5B5B5B;
}
.date input {
float: left;
width: 150px;
height: 30px;
margin-top: 5px;
border-radius: 20px;
}
.tab {
margin-left: 26px;
background-color: #fff;
border-radius: 20px;
margin-top: 15px;
height: 500px;
}
table thead tr th {
color: #585858;
text-align: center;
height: 50px;
font-family: 幼圆;
font-size: 20px;
}
table tbody {
color: #979797;
border-bottom: 1px solid #EFEFEF;
}
table tbody tr {
height: 50px;
}
.table .table-condensed tbody tr td {
line-height: 50px;
}
}
/* 电脑 */
@media screen and (min-width:1200px) {
.pinban {
display: none;
}
.phone {
display: none;
}
.col-sm-8 {
display: none;
}
.col-lg-4 {
width: 40%;
font-weight: 700;
height: 60px;
line-height: 50px;
}
.form-inline {
width: 100%;
}
.form-group {
width: 100%;
}
.col-lg-1 {
width: 50%;
}
.rq {
width: 90%;
height: 40px;
margin: 0 auto;
}
.col-lg-1 label {
width: 17%;
line-height: 35px;
}
.col-lg-10 {
width: 80%;
}
.col-lg-10 input {
width: auto;
}
.col-lg-10 #select {
width: 70%;
}
.btn-primary {
background-color: #3797da;
border: none;
width: 30%;
box-shadow: #ccc 4px 4px 6px 0px;
outline: none !important;
}
.col-lg-3 {
width: 30%;
}
.col-lg-3 label {
width: 30%;
line-height: 35px;
}
.col-lg-11 {
width: 60%;
}
.col-lg-11 #select {
width: 100%;
}
.col-lg-2 {
width: 20%;
}
.col-lg-2 label {
width: 20%;
line-height: 35px;
}
.btnz {
width: 90%;
margin: 0 auto;
}
.col-lg-4 button {
width: 20%;
font-size: 15px;
height: 35px;
outline: none !important;
}
.row table {
width: 94.7%;
margin: 0 auto;
text-align: center;
border: 1px solid #ddd;
}
.a1 {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 4px;
background-color: #299dd4;
color: white;
}
.a1:hover {
color: white;
}
.a2 {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 4px;
background-color: darkred;
color: white;
}
.a2:hover {
color: white;
}
button {
outline: none;
border: 0;
}
table tr th {
text-align: center;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
