bootstrap组件2
<!DOCTYPE html>
<html lang="zh-cn">
<head > <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" >
<!--[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" ></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="container" style="padding-top: 30px; padding-bottom: 100px;">
<!--导航条详细版-->
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
<!--品牌-->
<div class="navbar-header">
<div class="navbar-brand">Bootstrap</div>
<!--data-target="#divNav" 对应导航id data-toggle="collapse" 展开效果-->
<button data-target="#divNav" data-toggle="collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--导航内容-->
<div class="collapse navbar-collapse" id="divNav">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><p class="navbar-text">Search</p></li>
<li> <form class="navbar-form">
<input type="search" class="form-control" placeholder="Enter search" >
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</li>
<li><a href="#" class="navbar-link">Help</a> </li>
</ul>
<!--两个右对齐-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Email</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> About</a></li>
<li><button type="button" class="btn btn-info navbar-btn">Suggess</button></li>
</ul>
</div>
</div>
</nav>
<hr/>
<p class="page-header">大小屏幕排版</p>
<div class="row">
<!--中屏幕各4列，小屏幕a占2列 b占10列 c占另起一行12列，-->
<div class="col-md-4 col-sm-2">a</div>
<div class="col-md-4 col-sm-10">b</div>
<div class="col-md-4 col-sm-12">c</div>
<hr/>
<code>document.getElementById();</code>
<p><kbd>ctrl</kbd>+<kbd>f5</kbd></p>
<samp>var a = document.getElementById();</samp>
</div>
<hr/>
<p class="page-header">分页</p>
<div class="text-center">
<ul class="pagination pagination-lg">
<li><span >«</span></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><span >»</span></li>
</ul>
</div>
<script>
$(".pagination li").click(function () {
$(".pagination li").removeClass(); //单击时全移除样式
$(this).addClass("active"); // this 添加样式
});
</script>
<hr/>
<!--徽章-->
<p>Email <span class="badge">33</span> </p>
<button type="button" class="btn btn-primary"> Email <span class="badge">33</span> </button> <hr/>
<!--警告框 -->
<div class="alert alert-danger">
<button data-dismiss="alert" class="close">×</button>
<p>dangerous!<a href="#" class="alert-link">LINK</a></p>
</div> <p class="page-header">进度条</p>
<div class="progress">
<div class="progress-bar" style="width:30%">30%</div>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:40%">40%</div>
</div> <div class="progress">
<div class="progress-bar active progress-bar-warning progress-bar-striped" style="width:40%">40%</div>
<div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:30%">30%</div>
</div> <div id="divProgress" class="progress">
<div id="divBar" class="progress-bar active progress-bar-danger progress-bar-striped" style="width:0%">0%</div>
</div>
<button id="btnStart" class="btn btn-primary">Start</button>
<script> $().ready(function () {
var width=0;
function changeBar(){
$("#divBar").attr("style","width:"+width+"%").html(width+"%");
if(width<100){
width+=1;
}
}
$("#btnStart").click(function () {
setInterval(function () { //多添加了一个函数 function(){changeBar();};
changeBar();
},100); // 函数名要加 “”
});
});
</script> <div class="media">
<div class="media-left"><img src="../img/superman.jpg" class=" media-object"></div>
<div class="media-body"><p class="media-heading">pic mes</p> </div>
</div> <p class="page-header">列表组</p>
<div class="list-group">
<!--<span class="media glyphicon"> 不懂。。-->
<span class="media glyphicon"><a class="list-group-item" href="#">文学类<sup><span class="badge">20</span></sup></a></span>
<a class="list-group-item list-group-item-success" href="#">文学类<span class="badge">20</span> </a>
<a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>
<a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>
</div> <!--面板 -->
<p class="page-header">面板</p>
<div class="panel panel-info">
<div class="panel-heading">123</div>
<div class="panel-body">body</div>
<div class="panel-footer text-right">时间</div>
</div>
<!--视频-->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!--底部-->
<button type="button" class="btn btn-primary btn-block navbar-fixed-bottom">
<span class="glyphicon glyphicon-log-in" ></span> button
</button>
<!--滚动监听-->
123
</body>
</html>
<!--看不出效果-->
<h2 class="page-header">滚动监听</h2>
<nav id="nav-test" class="navbar-default navbar">
<ul class="nav navbar-nav">
<li><a href="#ios">ios</a></li>
<li><a href="#svn">svn</a></li>
</ul>
</nav>
<div data-spy="scroll" data-target="nav-test" data-offset="0" style="height: 100px;overflow:auto;position: relative;">
<h4 id="ios">ios</h4>
<p>iOS是由苹果公司开发的移动操作系统[1] 。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。iOS是由苹果公司开发的移动操作系统[1] 。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。</p>
<h4 id="svn">svn</h4>
<p>所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。</p>
</div>