您的位置：首页 > Web前端 > BootStrap

bootstrap组件

2016-03-30 16:37 369 查看
bootstrap组件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.bootstrap"></script>
<script src="../bootstrap/respond.min.bootstrap"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<!--导航条效果-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Bootstrap</a>
<p class="navbar-text">welcome</p>
</div>
<!--导航条主链接-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#" >起步</a></li>
<li><a href="#">CSS全局样式</a></li>
<li><a href="#">组件</a></li>
<li><a href="#">插件</a></li>
<li><a href="#">网站案例</a></li>
</ul>
<form class="navbar-form text-right">
<input type="text" class="form-control" placeholder="Search"/>
<button type="button" class="btn btn-primary">Search</button>
</form>
</div>
</div>

</nav>
<hr/>
<div class="container">
<p class="page-header">下拉菜单</p>
<div class="dropdown">
<button class="btn btn-primary" type="button"data-toggle="dropdown">
Dropdown <span class="caret"></span>  <!--箭头-->
</button>
<ul class="dropdown-menu" >
<li class="dropdown-header">分类一</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>   <!--分隔线-->
<li class="dropdown-header">分类二</li>
<li><a href="#">Something else here</a></li>
<li class="disabled"><a href="#">Separated link</a></li>
</ul>
</div>
<p class="page-header">按钮组</p>
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<p class="page-header">按钮式下拉菜单</p>
<div class="btn-group">
<button class="btn btn-primary" type="button">
Dropdown
</button>
<button class="btn btn-primary dropdown-toggle" type="button"data-toggle="dropdown">
<span class="caret"></span>  <!--箭头-->
</button>
<ul class="dropdown-menu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>   <!--分隔线-->
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<p class="page-header">输入框组</p>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" id="btnGo">GO</button>
</span>
</div>
<script>
$("#btnGo").click(function () {
var email=$(this).parent().prev().val();
alert(email);
});
</script>
<!--tab-->
<p class="page-header">tab</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
<!--面包屑导航 -->
<p class="page-header">面包屑导航</p>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<p class="page-header">缩略图效果</p>
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
<div class="caption">
superman
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
<div class="caption">
superman
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
<div class="caption">
superman
</div>
</div>
</div>
<!--分页-->
<div class="text-center">
<ul class="pagination pagination-lg">
<li>
<a href="#">
<span >«</span>
</a>
</li>
<li class="active"><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="#">
<span >»</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航