写在前面
本人主要做服务器端这块,对前端页面了解不是很深,最近公司要求做一个门户网站,我就使用bootstrap样式框架来写,我把中间用到的小模块收集起来做个记录,下次直接复制使用
注:以下基于bootstrap3.1.1
引入样式
<!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>
水平导航
<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>