怎么使用bootstrap来开发网站 前端怎么用bootstrap做省略分页
怎么使用bootstrap来开发网站
bootstrap
主要应用于前端开发，如果你接触过easyui，就差不多理解了，用法相同，如果没接触过那就不用太过于纠结easyui了，你去到bootstrap的官方网站下载相应的js以及API文档，里面会叫你使用，里面会有一些案例页面，你用一个编译软件打开你就可以看到开头部分应该要导入什么文件以及路径，至于使用的，你到官网看就行，都有一一介绍的！
完！
前端怎么用bootstrap做省略分页
(function($){
var ms = {
init:function(totalsubpageTmep,args){
return (function(){
ms.fillHtml(totalsubpageTmep,args)
ms.bindEvent(totalsubpageTmep,args)
})()
},
//填充html
fillHtml:function(totalsubpageTmep,args){
return (function(){
totalsubpageTmep=""
// 页码大于等于4的时候，添加第一个页码元素
if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
totalsubpageTmep = "
}
/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
totalsubpageTmep = "
}
/* 当前页码的前两页 */
var start = args.currPage-2
/* 当前页码的后两页 */
var end = args.currPage 2
if((start>1 && args.currPage<4) || args.currPage==1) {
end
}
if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
start--
}
for( start<=end start ) {
if(start<=args.totalPage && start>=1) {
totalsubpageTmep = "
}
}
if(args.currPage 2
totalsubpageTmep = "
}
if(args.currPage!=args.totalPage && args.currPage
}
$(".pagination").html(totalsubpageTmep)
})()
},
//绑定事件
bindEvent:function(totalsubpageTmep,args){
return (function(){
totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
var current = parseInt($(this).text())
ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown})
if(typeof(args.backFn)=="function"){
args.backFn(current)
}
})
})()
}
}
$.fn.createPage = function(options){
ms.init(this,options)
}
})(jQuery)
使用bootstrap实现一个简单页面效果
前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：
Bootstrap实现简单布局实例
第二步，在顶部head标签里e5a48de588b6e79fa5e9819331333431373231引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。如图所示：
Bootstrap实现简单布局实例
第三步，在Body中写简单的html代码。在一个容器div中，加一个标题和一段说明文字，随便输入一些文字。然后加一个子div，里面又并列三个子div，div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果，如图，代码如图所示：
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
第四步，添加相应的class类。我们知道，Bootstrap作为一个封装的前端框架，已经为我们做好了相关的样式，我们只需要在标签里加上相关的class类即可实现样式了。我们为父div添加名为“container”的类，为标题添加名为“page-header”的类，在浏览器中查看效果，我们发现容器居中了。效果如图所示：
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
第五步，在包围三个字div的的div中添加一个名为“row”的类，该类可以将三个div放在同一行并排显示，而不是像之前那样，三个div各占一行。如图所示：
Bootstrap实现简单布局实例
第六步，在三个子div中，添加名为“col-xs-4 col-sm-4 col-md-4 col-lg-4”的类，这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的，即可实现自适应布局。如图所示：
Bootstrap实现简单布局实例
最后，在浏览器中查看效果，可以看到，三个区块由原来的各自独占一行到现在的三个并排一行，缩小浏览器分辨率大小，也可以实现自适应布局了。是不是很强大呢？读者可以自行实践。效果如图所示：
附：本经验关键词：bootstrap如何实现布局、bootstrap怎么布局、bootstrap怎么使用布局、bootstrap学习布局、bootstrap布局教程、bootstrap使用布局、bootstrap网格布局、bootstrap的布局方法、bootstrap布局
更多相关“bootstrap”经验请点击下面的“经验引用”。
15Bootstrap实现流动布局实例
16Bootstrap实现嵌套布局
35如何用Bootstrap制作轮播图
Bootstrap实现简单布局实例
bootstrap框架怎么在html页面加载使用
从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本，解压压缩包，将里面的css、js等文件拷贝到自己项目中，然后在html页面写入以下引用就可以使用了（需根据文件位置对href路径做相应修改）：
bootstrap只能在html5上用吗
在普通网页上也是可以用的，bootstrap虽然用到了h5的技术，但并不意味着只能在html5上用，不过bootstrap对IE8及以下版本兼容性不太好，需要额外下载兼容包，例如bsie之类的。
事实上，就我个人的经验，用了兼容包以后效果其实也一般，只能维持在“能用”的级别，所以要么放弃IE678，要么放弃bootstrap。
bootstrap几个菜鸟级疑问
我也是刚学bootstrap,就我的理解给你说一下吧。
role是无障碍设计里的标签，是方便障碍人士使用屏幕阅读器使用的。（比如说你的网站设计时没有考虑无障碍应用，可能正常人看着网站没有任何问题，可是盲眼人士使用屏幕阅读器看你网站可能就不容易看懂了。）
bootstrap文档查看地址http://v3.bootcss.com/
bootstrap是开源的前端开发框架，所有插件和样式都是可以自定义的。（也就是说里边所有的css样式你都是可以根据需要来重写的，javascript插件也可以。你也可以根据自己的需要整合别的框架一起使用。）
多看官方文档和案例，多写写页面慢慢就理解了。这东西光说是说不明白的，得自己在练习中领悟。