版权声明：本文为博主原创文章,博主QQ:289102120,博主Mobile:15891712396 https://blog.csdn.net/vinglemar/article/details/89599459
第一步:
创建一个C#,MVC4,基本 项目,创建三个Action及3个相应的view,完成以下3个测试.
Demo1:
bootstrap在表格中的应用
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>bootstrip Test</title>
<link href="~/Content/bootstrap4/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<table class="table bordered table-striped">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="bg-success">2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-info">4</td>
<td> </td>
<td class="bg-warning"> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>Demo2:
Flex技术初步入门:
@{
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flex</title>
<style type="text/css">
.flex-container {
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.flex-container{
background-color: #F0f0f0;
}
.flex-container .flex-item{
padding:20px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child{
background-color: #F5DE25;
}
.flex-container .flex-item:last-child{
background-color: #90D9F7;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</body>
</html>
Demo3：
grid技术的入门:
@{
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.container {
width:100%;
height:100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 8fr 1fr;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";
}
.header {
grid-area: h;
background-color: #0F0;
}
.menu {
grid-area: m;
background-color: blue;
}
.content{
grid-area: c;
background-color: pink;
}
.footer {
grid-area: f;
background-color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="leftmenu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>