web框架之Bootstrap基本使用(python3入门)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了web框架之Bootstrap基本使用(python3入门)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2872字，纯文字阅读大概需要5分钟。
内容图文
一、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>
内容总结
以上是互联网集市为您收集整理的web框架之Bootstrap基本使用(python3入门)全部内容，希望文章能够帮你解决web框架之Bootstrap基本使用(python3入门)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】