Python开发前端:汇总
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python开发前端:汇总相关的知识，希望对你有一定的参考价值。
页面模板
1、EasyUI（推荐指数★）
使用方法：把文件下载到本地、直接从官网上把源码拷贝过来，更改下js的路径即可
优点：功能非常多、非常齐全 偏做后台管理
缺点：定制时改造代价大、不仅要改CSS 还要改JS
2、jQueryUI（推荐指数★★）
使用方法：把文件下载到本地、直接从官网上把源码拷贝过来，更改下JS的路径即可
优点：功能完善、JS比较多 偏做后台管理
缺点：页面不太好看、要自己进行调整的多
3、Bootstrap（推荐指数★★★）
使用方法：把文件下载到本地、直接从官网上把源码拷贝过来，更改下JS的路径即可
优点：页面简洁、符合审美 前端后端都能做
补充：
① 响应式（@media当页面大小变化时，页面样式进行更改）
页面样式自动切换.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 50px;
}
/*默认应用c2的样式 当页面小于900时c2样式失效*/
@media (min-width: 900px) {
.c2{
background-color: gray;
}
}
</style>
</head>
<body>
<div class="c1 c2"></div>
</body>
</html>
页面样式自动切换.html
② 图标、字体（@font-face登录官网查看想要的图标，把代码拷贝下来即可）
图标的引用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--主要的css样式-->
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/>
<!--加了简单的颜色配比-->
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/>
</head>
<body>
<span class="glyphicon glyphicon-user"></span>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!--bootstrap依赖jQuery-->
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>
图标的引用.html
③ 基本使用（!important强制使用自定义的样式）
bootstrap样式和自定义样式搭配.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.backgroupbule{
background-color: blue !important;
}
</style>
<!--主要的css样式-->
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/>
<!--加了简单的颜色配比-->
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid backgroupbule">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--bootstrap依赖jQuery-->
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>
bootstrap样式和自定义样式搭配.html
4、自己做模板（推荐指数★★★★）
定制自己的模板
以上是关于Python开发前端:汇总的主要内容，如果未能解决你的问题，请参考以下文章