一、Bootstrap初識
快速幫助我們完成樣式與布局
簡單理解bs，給標簽添加類名，就可以獲取bs提前寫好的樣式
固定結構下的固定類名，不僅可以獲得樣式，還可以獲得事件
二、Bootstrap使用
精髓：復制，粘貼，修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap初識</title>
<!--導入bootstrap樣式-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!--設置字體圖標大小顏色-->
<style>
i {
font-size: 50px;
color: orange;
}
</style>
</head>
<body>
<!--容器： 有默認padding: 15px-->
<div class="container">
<!--row：容器中的一行，有默認margin：0 -15px-->
<!--柵格系統：父級標簽默認被平分12等分，自己可以選擇占用幾分-->
<div class="row">
<div class="box bg-success col-md-9 col-xs-1 col-sm-6 col-lg-12">123</div>
</div>
<!--用戶登陸輸入結構框-->
<div class="row">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!--字體圖標-->
<div class="row">
<!--字體圖標-->
<i class="glyphicon glyphicon-ok-sign"></i>
<i class="glyphicon glyphicon-eye-open"></i>
<i class="glyphicon glyphicon-chevron-left"></i>
<i class="glyphicon glyphicon-chevron-right"></i>
</div>
<!--下拉菜單-->
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>
</div>
</div>
<!--分頁符-->
<div class="row">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="abcded"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
<!--導入jq，bootstrap是基於jq的（要使用bootstrap.js必須先導入jq-->
<script src="js/jq.js"></script>
<!--導入bootstrap.js-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$('.abcded').click(function () {
alert('12345')
})
</script>
</html>