bootstrap基礎用法

一、下載 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">&laquo;</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">&raquo;</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>&times;</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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章