Fork me on GitHub

使用Bootstrap的后台猿人可能会用到的功能

发表于 | 更新于 | 分类于 | 评论数：

使用bootstrap制作的门户网站

写在前面

本人主要做服务器端这块，对前端页面了解不是很深，最近公司要求做一个门户网站，我就使用bootstrap样式框架来写，我把中间用到的小模块收集起来做个记录，下次直接复制使用
注：以下基于bootstrap3.1.1

引入样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="//cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	</head>
	<body>
	</body>
</html>

###水平导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
				<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="#">LOGO</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="active">
					<a href="home.html">首    页</a>
				</li>
				<li>
					<a href="#" data-toggle="modal" data-target="#myModal">下载</a>
				</li>
				<li>
					<a href="investment.html">投资顾问</a>
				</li>
				<li>
					<a href="help.html">帮助</a>
				</li>
				<li>
					<a href="about.html">关于</a>
				</li>
			</ul>
			<!--
				应该能看懂navbar-right的用法吧
            -->
			<form class="navbar-form navbar-right">
				<a class="btn" id='btnCtrl' href="#">登录</a>
				<a class="btn btn-primary" href="#">注册</a>
			</form>
		</div>
	</div>
</nav>

水平导航

###bootstrap轮播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->

			<div class="carousel-inner" style="position: relative;">
				<div class="item active">
					![](img/mm_02.jpg)
				</div>
				<div class="item">
					![](img/mm_02.jpg)
				</div>
				<div class="item">
					![](img/mm_02.jpg)
				</div>
				<div class="item">
					![](img/mm_02.jpg)
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>
		<script>
			$('#myCarousel').carousel({
				interval: 5000
			});
			$('#myCarousel').on('slide.bs.carousel', function() {
				console.log('start');
			});
			$('#myCarousel').on('slid.bs.carousel', function() {
				console.log('end');
			});
		</script>

轮播效果

###图片自适应
页头加上
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
图片加上img-responsive类名

###清除浮动
<div class="clearfix" style="margin-top:49px;"></div>

###让div 居中

1
2
3
4
5
6
7
8
9
10
.help-box{
	width:65%;
	height:100px;
	border:1pxsolid#2A70C8;
	border-radius:10px;
	margin-bottom:10px;
	/*width:auto;*/
	margin-left:auto;
	margin-right:auto;
}

###点击文字折叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" 
								   href="#collapse1">
									标题一
								</a>
							</h4>
						</div>
						<div id="collapse1" class="panel-collapse collapse in">
							<div class="panel-body">
								内容一
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" 
								   href="#collapse2">
									标题二
								</a>
							</h4>
						</div>
						<div id="collapse2" class="panel-collapse collapse">
							<div class="panel-body">
								内容二
							</div>
						</div>
					</div>

文字折叠面板

###左侧折叠菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div  class="container-fluid">
				<div class="row">
				<div class="col-lg-2">
					<ul id="main-nav" class="main-nav nav nav-tabs nav-stacked text-center
						" style="">
						<li>
							<a href="#applyAccount" class="nav-header" data-toggle="collapse">
								一级菜单
							</a>
							<ul id="applyAccount" class="nav nav-list secondmenu collapse" style="">
								<li>
									<a href="#1_1">    二级菜单</a>
								</li>
								<li>
									<a href="#1_2">    二级菜单</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="nav-header" data-toggle="collapse">
								一级菜单
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-10">
					右侧内容
				</div>
			</div>
</div>

左侧菜单效果

###返回顶部
这里使用的是jquery的一个插件，引入js，只需几句js代码，很好用jquery.goup.min.js

1
2
3
4
5
6
7
$.goup({
	trigger:100,
	bottomOffset:150,
	locationOffset:100,
	title:'返回顶部',
	titleAsText:true
});

鼠标进入div 颜色改变

1
2
3
4
5
6
7
8
9
10
11
12
<!--第一种-->
<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"></div >   
<!--第二种-->
<style> 
.d_over{
	background-color:#307172;
}  
.d_out{
	background-color:#EFEFEF;
}  
</style>  
<div class="d_out" onmouseover="this. className='d_over'"  onmouseout="this. className='d_out'">div 背景颜色</div >

css3 过渡 div 变大

1
2
3
4
5
6
7
8
9
10
11
12
13
* {
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
}
*:hover {
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);
}

div onclick 新的窗口打开页面

1
<div  onclick="window.opemn('url')"></div >

回车键 触发方法

1
2
3
4
5
6
document.onkeypress = function(event) {
	if(event.keyCode == 13) {
		console.log(123)
		return false;
	}
}

验证码倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var wait = 60;
function timer() {
	console.log("timer");
	var codediv  = $('#codediv ');
	if(wait == 0) {
		codediv .text('获取验证码');
		codediv .removeAttr('disabled');
		wait = 60;
	} else {
		codediv .attr('disabled','disabled');
		codediv .text(wait + "秒后可重新发送");
		wait--;
		setTimeout(function() {
				timer();
			},
			1000)
	}
}

验证码倒计时效果

用户注册步骤效果

本来我是打算用图片做，通过jquery来控制其是否显示，后来在网上找到了这个感觉很棒，自己也用到了。

注册步骤效果图

下载地址

-------------本文结束感谢您的阅读-------------