综合运用:初识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
