Bootstrap 柵格 樣式 元件 外掛
阿新 • • 發佈：2018-12-27
-----------------------------起先是我們造成習慣，後來是習慣造成我們。
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">×</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>