一、下載 bootstrap 和 jquery
由於bootstrap 依賴的 jqery ,必須先引入 jquery 再 引入 bootstrap
二、index.html 頁面編寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--設置自適應設備-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1, use-scalable=no" />
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
.test {
height: 300px;
background: red;
}
</style>
</head>
<body>
<button class="btn btn-info">hello world!</button>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<span class="h1">1</span><span class="h2">2</span>
<span class="h3">3</span>
<span class="h4">4</span>
<small>副標題</small>
<span class="small">副標題</span>
<p class="text-left">我</p>
<p class="text-center">我</p>
<p class="text-right">我</p>
<p class="text-uppercase">hello!</p>
<p class="text-lowercase">HELLO!</p>
<p class="text-capitalize">hello!</p>
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr>
<td>標題一</td>
<td>標題二</td>
<td>標題三</td>
<td>標題四</td>
<td>標題五</td>
</tr>
</thead>
<tbody>
<tr class="info">
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
<td>內容五</td>
</tr>
<tr class="success">
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
<td>內容五</td>
</tr>
<tr class="warning">
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
<td>內容五</td>
</tr>
<tr class="danger">
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
<td>內容五</td>
</tr>
<tr class="active">
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
<td>內容五</td>
</tr>
</tbody>
</table>
<form class="form-inline">
<div class="form-group has-success">
<label class="sr-only" for="">這是一個輸入框</label>
<input type="text" class="form-control input-lg" placeholder="這是一個輸入框.." />
</div>
<div class="form-group has-warning">
<label for="">這是一個輸入框</label>
<select name="" id="" class="form-control">
<option value="北京">北京</option>
<option value="北京">北京</option>
<option value="北京">北京</option>
<option value="北京">北京</option>
</select>
</div>
<div class="form-group has-error">
<label for="">這是一個輸入框</label>
<textarea class="form-control"></textarea>
</div>
</form>
<button class="btn btn-danger btn-lg">這是一個按鈕!</button>
<button class="btn btn-block btn-sm">這是一個按鈕!</button>
<button class="btn btn-default active">這是一個按鈕!</button>
<button class="btn btn-success">這是一個按鈕!</button>
<button class="btn btn-primary">這是一個按鈕!</button>
<button class="btn btn-info">這是一個按鈕!</button>
<button class="btn btn-warning">這是一個按鈕!</button>
<button class="btn btn-link active">這是一個按鈕!</button>
<div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
</div>
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<style>
.lli{
color: green;
font-size: 2rem;
}
</style>
<!--圖標使用-->
<span class="glyphicon glyphicon-asterisk lli"><span>
<<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star lli"></span>
這是一個按鈕
</button>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">這是一個按鈕
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="www.baidu.com">百度</a>
</li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
</ul>
</div>
<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 class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">¥</span>
</div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><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 class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
<!-- 列表 -->
<ul class="list-group">
<li class="list-group-item active">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item disabled">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
<!-- 面板 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">彈框</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
<span class="sr-only">關閉彈窗</span>
</button>
<h4 class="modal-title" id="myModalLabel">標題</h4>
</div>
<div class="modal-body">
慕課網
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>