綜合運用:初識bootstrap
5.1 功能
- 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
- github上用戶達8w+
5.2 強大的組件功能
- 字體圖標
- 下拉菜單
- 徽章
- 多風格進度條
- 面板
5.3 項目運用
- 在原有基礎上進行定制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<!--引入外部框架-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 50px;
}
.text1 {
width: 200px;
color: purple;
}
.text2 {
color: #ac2925;
font-size: 50px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<!--按鍵-->
<button class="btn btn-danger text1"> 百度一下 </button>
<button class="btn btn-success"> 谷歌一下 </button>
<button class="btn btn-toolbar"> 搜狗一下 </button>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">30% Complete</span>
</div>
</div>
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
<span class="glyphicon glyphicon-asterisk text2"></span>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
</html>
bootstrap
