发布于 2017-06-04 12:06:37 | 212 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
第一种Bootstrap -默认的分页实例,供大家参考,具体内容如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的分页</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div ><h1>第1页</h1></div>
<ul class="pagination">
<li><a href="1.html">«</a></li>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
第二个实例jquery pagination分页控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagination Demo I - Simple pagination</title>
<link rel="stylesheet" href="lib/pagination.css" />
<link rel="stylesheet" href="demo.css" />
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.pagination.js"></script>
<script type="text/javascript">
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}
// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>
</head>
<body>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>
<div class="searchresult_pagination"></div>
<br style="clear:left;">
<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result"><p>Globally maximize granular
"outside the box" thinking vis-a-vis quality niches. Proactively formulate 24/7
results whereas 2.0 catalysts for change. Professionally implement 24/365 niches
rather than client-focused users.</p>
<p>
Competently engineer high-payoff "outside the box" thinking through cross
functional benefits. Proactively transition intermandated processes through
open-source niches. Progressively engage maintainable innovation and extensible
interfaces.</p>
</div>
<div class="result"><p>Credibly fabricate e-business models for end-to-end niches.
Compellingly disseminate integrated e-markets without ubiquitous services.
Credibly create equity invested channels with multidisciplinary human capital.</p>
<p>
Interactively integrate competitive users rather than fully tested
infomediaries. Seamlessly initiate premium functionalities rather than impactful
architectures. Rapidiously leverage existing resource-leveling processes via
user-centric portals.</p>
</div>
<div class="result"><p>Monotonectally initiate unique
e-services vis-a-vis client-centric deliverables. Quickly impact parallel
opportunities with B2B bandwidth. Synergistically streamline client-focused
infrastructures rather than B2C e-commerce.</p>
<p>
Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.
Completely facilitate high-quality systems without stand-alone strategic theme
areas.</p>
</div>
<div class="result"><p>Monotonectally initiate unique
e-services vis-a-vis client-centric deliverables. Quickly impact parallel
opportunities with B2B bandwidth. Synergistically streamline client-focused
infrastructures rather than B2C e-commerce.</p>
<p>
Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.
Completely facilitate high-quality systems without stand-alone strategic theme
areas.</p>
</div>
</div>
<div id="Pagination"></div>
</body>
</html>
分页效果:
源码:https://github.com/gbirke/jquery_pagination
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。