<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<style type="text/css">
.col-md-4 {
background: #FAFA0F;
height: 40px;
}
.col-md-8 {
background: #ff6500;
height: 40px;
}
.col-md-6 {
background: pink;
height: 40px;
}
.col-md-2 {
background: #0ff7fa;
height: 40px;
}
.col-md-5 {
background:#a2f20a;
height: 500px;
}
.col-md-7 {
background:#ccc;
height: 500px;
}
.col-md-3 {
background:blue;
height: 500px;
}
.col-md-9 {
background:red;
height: 500px;
}
.container {
width: 75%;margin-top:20px;
}
.table{
width: 700px;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- 1/全局css样式
container-fluid 100%宽度
.container 固定宽度
两者不能相互嵌套
栅格系统
行row(必须包含container和container-fluid)
列column（一行12列，超出另一行显示） -->
<!-- <div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div> -->
<!-- 布局中column的水平排列 -->
<!-- <div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6"></div>
<div class="col-md-2"></div>
</div>
</div> -->
<!-- 列位移,.col-md-offset- -->
<!-- <div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-2-4 col-md-offset-4"></div>
</div>
</div> -->
<!-- 列嵌套 -->
<!-- <div class="container">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
<div class="col-md-7"></div>
</div>
</div> -->
<!-- 表格:
table给以表格的基本样式，水平方向的分割线，padding等 -->
<!-- <table class="table table-bordered">
<thead>
<tr>
<th>商品名称</th>
<th>类型</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>水果</td>
<td>10元</td>
</tr>
</tbody>
</table> -->
<form >
<input type="text" class="form-control" style="width:400px;">
</form>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
