您的位置：首页 > Web前端 > BootStrap

bootstrap的使用案例

2020-08-06 19:16 1091 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--1.引入viewport meta标签  -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- 2.引入bootstrap.min.css -->
<link rel="stylesheet" href="../bootstrap-4.5.0-dist/css/bootstrap.min.css">

<!-- 3.引入 jquery-3.5.0.min.js-->
<script  src="../jquery-3.5.0/jquery-3.5.0.min.js" ></script>
<!-- 4.引入 bootstrap.min.js-->
<script src="../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
<!-- 53设置自定义样式 -->

<title>Hello, world!</title>
<style>
div.container{
height: 100px;
background-color: #ccc;
}
div.row div{
height: 50px;
border: 1px solid red;
}
section{
width: 200px;
height: 200px;
/* background: linear-gradient( to right, red,blue); */
background: radial-gradient(circle,red,blue);
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-ma-3 col-sm-1 col-lg-5"></div>
<div class="col-md-6 col-sm-1 col-lg-7"></div>

</div>

</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>修改</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

<section>111111</section>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航