正文

Bootstrap 栅格 样式 组件 插件

IP云
IP云V管理员/0 阅读
09/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

-----------------------------起先是我们造成习惯，后来是习惯造成我们。

day 51

Bootstrap  官方网站:   bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
.item {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<h3>栅格系统</h3> <div class="row"> <div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div> </div> <div class="row">
<div class="col-md-8 item">.col-md-8</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-8 item">.col-md-6</div>
<div class="col-md-6 col-sm-4 item">.col-md-6</div>
</div></div><hr><h4> 列偏移</h4> <div class="row ">
<div class="col-md-3 item col-md-offset-3">Yuan</div>
</div><h4>嵌套列</h4>
<div class="row">
<div class="col-md-6 item">666</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 item">123</div>
<div class="col-md-6 item">234</div>
</div>
</div>
</div><h4>列排序</h4>
<div class="row">
<div class="col-md-9 item col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 item col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div><hr>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-primary add_btn"> 添加</button>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="danger">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr class="success">
<td>2</td>
<td>李四</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
<td>销售</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr> </tbody>
</table>
</div> </div>
</div></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script></head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul> <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><div class="container"> <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h1 class="text-center">Yuan先生!</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
<div class="form-group">
<label for="user">姓名</label>
<input type="text" class="form-control" id="user" placeholder="user">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="age">
</div>
<div class="form-group">
<label for="dep">部门</label>
<input type="text" class="form-control" id="dep" placeholder="dep">
</div>
<div class="form-group">
<label for="salary">薪水</label>
<input type="text" class="form-control" id="salary" placeholder="salary">
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> <span class="glyphicon glyphicon-shopping-cart"></span>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 15%;
height: 600px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 85%;
height: 600px;
background-color: lightgray; } .title{
text-align: center;
line-height: 30px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
} .hide{
display: none;
}
</style> <script src="jquery-3.3.1.js"></script>
</head>
<body><div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con hide">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div><script> $(".title").click(function () { // $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide")
// jquery 的链式操作
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")
})</script>
</body>
</html>