web框架之Bootstrap基本使用(python3入门)
一、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>
浙公网安备 33010602011771号