https://www.doczj.com/doc/195765962.html,
Bootstrap组件功能：路径组件、分页组件、标签组件和徽章组件
本节课我们主要学习一下Bootstrap的四个组件功能：路径组件、分页组件、标签组件和徽章组件。
一．路径组件
路径组件也叫做面包屑导航。
//面包屑导航
二．分页组件
分页组件可以提供带有展示页面的功能。
//默认分页
https://www.doczj.com/doc/195765962.html,
//首选项和禁用
//设置尺寸，四种lg、默认、sm和xs
//翻页效果
//对齐翻页链接
//翻页项禁用
//在文本后面带上标签
https://www.doczj.com/doc/195765962.html,
//未读信息数量徽章
//按钮中使用徽章
提交
//激活状态自动适配色调
为什么需要分页？ 1.从客户角度来讲，数据内容过多，查看数据非常不便。 2.从服务器和网络的角度来讲，查这么多数据，传输这么多数据，是一种效率很低的做法。分页的核心SQL: 最简单最原始的分页： 分页的简单过程： 用户点击第一页传递一个参数：Num=1到后台，服务器获取num=1将该参数传到Dao 中，dao中：select * from tb_article where id>10 limit ?,?;, ps.setint((num-1)*10),返回一个List，传递到jsp中进行显示，发送给客户端。 1.
2.
3.访问：channel.jsp,然后点击在下面的页号导航即可看到简单的分页效果。 首页上一页1，2，3，4，5，6,7,8,9,10 下一页末页共101页 分页的实现原理: 1.获得需要显示的总的记录数rowCount—》从数据库中取 2.设定每页最多显示的记录数size—》10 3.指定显示的页码：num →作为参数得到 4.所要显示的数据对象→根据startRow和size从数据库中查出！ 5.根据rowCount,size,num可计算出其余的元素： a)本页面从第几个记录开始：startRow = (this.num-1) * size; b)共有多少页：pageCount = (int) Math.ceil((double)rowCount/size); c)list：包含了所要显示的数据对象的集合 d)下一页：next=Math.min( this.pageCount, this.num+1) e)上一页：prev = Math.max(1 , this.num-1) f)页号控制元素： numCount：每页最多显示多少页号。(一共显示numCount+1个页号) start = Math.max(this.num-numCount/2, first); //本页显示页号从多少页开始 end = Math.min(start+numCount, last); //本页显示页号在多少页结束 页号控制： if(end-start < numCount){ //当本页总显示的页号数不够numCount时，如何计算起始页号。 start = Math.max(end-numCount, 1); } 分页实现步骤 Pagenation工具类代码：
标签处理类： /** * ClassName: PagerTag.java * created on Oct 21, 2008 * Copyrights 2008 qjyong All rights reserved. * EMail: qjyong@https://www.doczj.com/doc/195765962.html, */ package com.qiujy.tags; import java.io.IOException; import java.util.Enumeration; import javax.servlet.http.HttpServletRequest; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.TagSupport; /** * 自定义分页标签 * 使用方式
Ireport 分页介绍 功能介绍 基于ireport 3.7.6版本介绍ireport如何进行分页 开发步骤 1. 在ireport 报表中添加分页需要的变量 2. 设定首页，上一页，下一页，末页的超链接 3. 用jasper调用设定好的报表文件 开发示例 分页信息 当前显示1- 10条共32条第1页共4页首页上一页下一页末页 1、设置当前分页的显示信息 1.1. 设置当前显示1- 10条 步骤 1.1.1 拉一个text Field 右击点击edit expression 1.1.2 在Expression editor 框入输入 1.1.3 "当前显示"+($V{REPORT_COUNT}-$V{PAGE_COUNT}+1)+"- "+$V{REPORT_COUNT}+"条" ($V{REPORT_COUNT}-$V{PAGE_COUNT}+1) 是指当前正在处理的第几条记录数减去当前页显示的条数+1 就是当前页的起始记录数 注意点: text Field 的属性Evaluation Time 这里需要指定Column 1.1.4 点击Apply 步骤1.1.3用的的变量是ireport的内置变量 $V{PAGE_NUMBER} : 代表当前页数（可以是当前页码也可以是总页数，通过TextField的属性Evaluation Time决定的Now （得到的是当前页码）Report （得到的是总页数） $V{PAGE_COUNT} 当前页面中记录的数目 $V{REPORT_COUNT} 指示当前正在处理的是第几条记录
1.2设置共32条 步骤 1.2.1 拉一个text Field 右击点击edit expression 1.2.2 在Expression editor 框入输入"共"+$V{REPORT_COUNT}+"条" 注意：这里需要的是得到总条数所以text Field 的属性Evaluation Time 这里需要指定Report 1.2.3.点击Apply 1.3. 设置第1页 步骤 1.3.1 拉一个text Field 右击点击edit expression 1.3.2在Expression editor 框入输入"第"+$V{PAGE_NUMBER}+"页" 注意：所以text Field 的属性Evaluation Time 这里需要指定Now 1.3.3点击Apply 1.4. 设置共3页 步骤 1.4.1 拉一个 text Field 右击点击 edit expression 1.4.2 在Expression editor 框入输入 "共"+$V{PAGE_NUMBER}+"页" 注意：所以text Field 的属性Evaluation Time 这里需要指定Report 1.4.4.点击Apply 以上的变量仅供参与如有更好更简单的表达式可以补充。 2 设置分页信息转页（首页上一页下一页末页） 步骤 2.1 设置首页 2.1.1拉一个text Field 右击点击edit expression 2.1.2在Expression editor 框入输入“首页” 2.1.3 右击text Field 点击Hyperlink 将Hyperlink target 改为Self,Hyperlink Type 改为Reference 2.1.4 在Hyperlink Reference Expression框中输入"testpage.jsp?page=0" 2.1.5 点击close 其它设置的步骤一样只是在1.4步骤的输入的内容不一样以下是各项的内容 上一页“testpage.jsp?page="+($V{PAGE_NUMBER}-1) 下一页“testpage.jsp?page="+($V{PAGE_NUMBER}+1) 末页"testpage.jsp?page=lastPage" 上一页下一页不难理解就是当前页-1+1 这么简单 末页因为变量中无法得到最后页的页码（本人是无法得到）所以本人就想到以字符串lastPage 来标识是最后一页在调用jasper代码中去做处理（如果你有更好的方式请补充） 实例代码：工程中代码path:/drivingMonitor/web/view/situation/llsdi.jsp 下面的代码是jsp 中的java代码以上加红部分为处理分页的代码 <%@page language="java"import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.util.*"%>
1.数据源：{PE.DataSource id="cone" datasource="文章_内容页" itemId="@RequestInt_id" xslt="true" /} 字段引用：{PE.Field id="cone" fieldname="Keyword" /} 2.{https://www.doczj.com/doc/195765962.html,bel id="通用信息列表" bindStyle="普通式" titleLength="29" outputQty="10" models="1" nodeId="{PE.Field id="cone" fieldname="NodeID" /}" /} 参考：{https://www.doczj.com/doc/195765962.html,bel id="通用信息列表" bindStyle="普通式" usePage="false" outputQty="10" titleLength="50" nodes="0" includeChildNodes="true" models="0" bindModel="0" specials="0" items="0" itemListOrderType="1" linkOpenType="0" inDays="" betDate="" editor="" inputer="" hits="" dayHits="" weekHits="" monthHits="" eliteLevel="" priorityLevel="" picExist="false" disableVirtualLink="false" displayPropertyPrefix="0" displayDateTime="" displayNewSign="" displayTitlePrefix="false" displayHits="false" displayTips="false" displayEditor="false" displayInputer="false" displayNodeName="false" displayHotSign="false" displayCommentLink="false" listOrderByNodeSet="false" pageSizeByNodeSet="false" optionalCond="" optionalExtend="" /} 字段明细： 属性参数类 型 默认 值 可用值 变 量 值 参数说明 bindStyle string 普通 式 自定义值- 项目呈现样式 usePage bool false t rue false - 是否分页显示 outputQty int 10 自定义值- 输出的项目数量，如果开启分页，则此参数为分页大小值 titleLength int 50 自定义值- 项目标题长度,一个汉字占两个字节 nodes supersql 0 自定义值- 栏目ID includeChildNodes bool true true|false - 是否包含子栏目models string 0 自定义值- 模型ID bindModel int 0 自定义值- 通过模型ID与指定的模型表联合 specials string 0 自定义值- 专题ID items string 0 自定义值- 项目ID itemListOrderType int 1 自定义值- 项目列表排序方式 linkOpenType int 0 自定义值- 内容链接的打开方式{栏目节点配置取代:2,新窗口:1,原窗口:0} inDays int 无自定义值- 近多少天的项目 betDate string 无自定义值- 介于时间段之间的项目 editor string 无自定义值- 为指定编辑者的项目
分页的实现原理: 1.获得需要显示的总的记录数rowCount—》从数据库中取 2.设定每页最多显示的记录数size—》10 3.指定显示的页码：num 作为参数得到 4.根据rowCount,size,num可计算出其余的元素： a)本页面从多少行记录开始：startRow = (this.num-1) * size ; b)共有多少页：pageCount = (int) Math.ceil((double)rowCount/size); c)下一页：next=Math.min( this.pageCount, this.num+1) d)上一页：prev = Math.max(1 , this.num-1) e)页号控制元素： numCount：每页最多显示多少页号。(一共显示numCount+1个页号) start = Math.max(this.num-numCount/2, first); //本页显示页号从多少页开始 end = Math.min(start+numCount, last); //本页显示页号在多少页结束 页号控制： if(end-start < numCount){ //当本页总显示的页号数不够numCount时，如何计算起始页号。 start = Math.max(end-numCount, 1); } 分页实现步骤： 1.将Page类引入。需要自己修改的可自行修改。 package com.puckasoft.video.util; public class Page { private int num; //当前页号, 采用自然数计数 1,2,3,... private int size; //页面大小:一个页面显示多少个数据 private int rowCount;//数据总数：一共有多少个数据 private int pageCount; // 页面总数 private int startRow;//当前页面开始行, 第一行是0行 private int first = 1;//第一页页号 private int last;//最后页页号 private int next;//下一页页号 private int prev;//前页页号 private int start;//页号式导航, 起始页号 private int end;//页号式导航, 结束页号 private int numCount = 10;//页号式导航, 最多显示页号数量为numCount+1;这里显示11页。 public Page(int size, String str_num, int rowCount) { int num = 1; if (str_num != null) { num = Integer.parseInt(str_num);
站点标签: 适用范围:所有模板页 站点名称 站点附加标题 站点关键字 站点描述 站点域名例:https://www.doczj.com/doc/195765962.html, 站点网址例:https://www.doczj.com/doc/195765962.html, 系统所在目录例:/ 根目录或者 /icms 公共程序public目录地址（注:只适用5.0版本） 站点首页名注:5.0版本已经移除 模板路径例:/templates 模板路径 {系统所在目录}/templates/{所选模板目录} 例:/templates/default 模板经对路径 例:https://www.doczj.com/doc/195765962.html,/templates/default 站长信箱 ICP备案号 输出所有属性 栏目标签: 适用范围:频道页模板{channel.htm},栏目列表模板{list.htm},独立页模板{page.htm},内容页模板{show.htm} 栏目ID 栏目名称 栏目链接 栏目链接(带栏目名) 栏目关键字 栏目简介 栏目位置 输出所有属性 文章标签: 适用范围:内容页模板 {show.htm}
文章ID 文章缩略图 文章链接 文章标题 文章短标题 文章副标题 文章链接,带标题{ 文章标题 } 文章关键字 文章简介 文章出处 文章作者 文章编辑 文章发布日期 文章正文 正文总页数 正文当前页数 分页HTML 正文总页数 正文当前页数 分页HTML 文章点击数 文章digg数 文章评论数 文章标签 文章标签带链接 文章标签数组 上一篇文章 下一篇文章 文章发布者ID 文章发布者类型0用户 输出所有属性 模型内容标签: 适用范围:内容页模板 {content.show.htm} 内容ID 模型ID 内容链接 内容标题
<% dim m,n set rs=server.CreateObject("adodb.recordset") sqlstr="select * from message order by time desc" rs.open sqlstr,conn,3,3 rs.pagesize=10 '定义一页显示的记录数目 tatalrecord=rs.recordcount '获取记录总数目 tatalpages=rs.pagecount '获取分页的数目 rs.movefirst ---------------------------- nowpage=request("page") '用request获取当前页数，注意page是自己定义的变量并非函数-------------------------- if nowpage&"x"="x" then '处理页码为空时的情况 nowpage=1 else nowpage=cint(nowpage) '将页码转换成数字型 end if -------------------------------- rs.absolutepage=nowpage '将指针移动到当前显示页的第一条记录 ------------------------------- %> --------------------------------------------- <% n=1 while not rs.eof and n<=rs.pagesize response.Write(rs("user") & "
") response.Write(rs("tt") & "
") n=n+1 rs.movenext '显示页面的数据 wend %> ------------------------------------------- 共:<%=tatalpages%>页当前为:<%=nowpage%>页 <%if nowpage>1 then%> 上一页 <%else%> 上一页 <%end if%> <%for k=1 to tatalpages%> <%if k<>nowpage then %> <%=k%> <%else%> <%=k%>
Bootstrap 方法简介 1 Bootstrap 抽样方法 Bootstrap 方法是Efron 在 1977 年提出的一种数据处理方法，其本质上是对已知数据的再抽样。Bootstrap 的数学原理大致如下：1(,,)n T T T =是来自总体分布函数为()F T 的独立同分布随机样本。()n F T 是由样本T 得到的分布函数（在产品可靠性分析中，()n F T 一般是指数函数或多参数weibull 函数），由() n F T 得到的参数估计??()F θθ=，它可以作为样本参数θ的准确值。再从新总体()n F T 中抽取与样本T 相同的伪样本1(, ,)m m T T T =，一般取m n =。用伪样本m T 求出参数θ的估计值。重复操作M 次（一般取1000M =）可得到M 个基于伪样本m T 而得 到的θ估计值[4]。 Bootstrap 方法在应用中，重复抽样带来的误差不可避免。误差主要来源于样本数据的抽样误差和从样本分布中的再抽样误差。对于再抽样误差，只要 Bootstrap 再抽样样本数充分大，由样本分布所得的再抽样误差就会趋于消失，Bootstrap 估计的所有误差就会接近于抽样误差[5] 。Bootstrap 方法根据抽样方式的不同可分为参数和非参数两种。非参数方法主要用于在不知道抽样函数服从什么分布情况下，对经验分布不做过多的假设，把试验数据按从小到大排序获得经验分布，然后从中抽取伪样本的一种方法；参数方法主要用于经验分布已知情况下，当试验数据分布明确时，运用参数方法比运用非参数方法效率更高[6]。 由于多方面的原因，使得收集到的故障间隔时间数据中常含有分离群数据，这些数据会导致估计精度降低。但是，对于高可靠度的现代机电产品来说收集到的每一个数据都来之不易，所以不易轻易舍去。因此，可以应用改进的参数 Bootstrap 方法，具体过程如下： （1） 将试验样本数据12(,, ,)n X X X X =从小到大排序，每次从中去掉一个样本 i X ，剩下1n -个样本用传统方法建模，得出样本分布函数(1)()n i F T -的估计参 数值?m 和?η。 （2） 重复（1）n 次，获得参数?i m 和?i η，取其均值11??n i i m m n ==∑和1 1??n i i n n n ==∑作为经 验分布()n F T 的尺度和形状参数。 （3） 再从经验分布中随机抽取Bootstrap 样本，伪样本容量与原样本容量相等， 共抽取1000组（一般抽取200组就可以获得较高精度）。 （4） 根据每组伪样本****12(,,,)i n X X X X =用传统方法建模，得到1000个?m 和?η。 通过上述Bootstrap 方法我们可以获得多次经验分布参数，减少了抽样误差，比一次计算获得的经验分布更具有说服力。
一、多级导航标签的使用（导航条） {https://www.doczj.com/doc/195765962.html,bel id="多级导航菜单" nodeId="0" depth="2" outputQty="10" /} 常用参数详细说明 Nodeid=”读取哪些节点下面的栏目节点，如果是首页可以用0 来填充” Depth=”这项参数是控制多级导航菜单显示多少级，要配合设计样式同时使用，目前大多数标准版都是定义为显示2级” 附图：如果不需要显示二级栏目，则可以把参数值设为1 OutputQty=”显示多少个数量，因为版面宽度是固定值，当我们栏目比较多的时候，需要使用这个参数来控制条数，保持页面的整洁” 其他，1、在我们使用多级导航菜单的时候，还有出现有栏目显示顺序调整的时候，可以通过后台系统设置》节点管理》节点排序还调整节点顺序，以达到在前台页面中的顺序调整附图： 2、比如有些栏目不想显示在一级导航栏上，可以通过后台系统设置》节点管理》前台样式》第一项选择否，这样我们就可以让改栏目节点不在导航条上显示。
二、内容带图片的信息列表_焦点图带内容-Slide（焦点图） {https://www.doczj.com/doc/195765962.html,bel id="内容带图片的信息列表" bindStyle="焦点图带内容-Slide" titleLength="40" contentLength="0"outputQty="5"nodes="@RequestInt_id"ListOrderType="20" imageWidth="280" imageHeight="200" /}常用参数详细说明 bindStyle=”此项的值为样式类”我们在使用标签是把下划线后面的文字写在此参数内，如果没有bindStyle=””参数则默认为bindStyle=”普通式”，其他标签也是同理。 下面是错误写法； TitleLength=”带图片的文章标题字符数的长度，每个汉字占2个字符。控制标题文字不溢出或太短” contentLength="显示一部分文章的内容简介" 如果不需要显示内容，需要把参数中设置为0； imageWidth="160" imageHeight="120" 这2个参数是控制图片的宽度和高度，可以css 共同控制。如果懂css 可以根据自身需要做适当大小调整。 OutputQty=”同上，控制显示的数目” ListOrderType=”图片的排序规则” 附参数值：
Cadence按照分页进行元器件编号 如果没有分裂元件直接按照分组来做就可以了（已在16.5版本验证，测试通过），注意红色框的地方，如果没有分裂元件第3,5个框不用管（从上往下数，备注：16.5无第五个框），如果有分裂元件，则编号后手动改一下即可。 2. 如果有分裂元件则上面的步骤会提示出错 ERROR(ORCAP-1376): Cannot perform annotation of heterogeneous part 'U?A(Value MCP6004) at location (4.00, 5.30) on page alternating_current_filter', part has not been uniquely grouped (using a common User Property with differing Values) or the device designation has not been chosen INFO(ORCAP-1379): Done updating part references 这种情况下需要给元件添加一个额外的属性来让cadence知道哪几个分裂元件是同一个器件 打开这个分裂元件的库文件，双击器件出现下面的对话框，然后点“new”新建一个package，值填1即可
3. 在原理图里设置package 把属于一个器件上的分裂器件的部分设置成同样的标号，同时注意上面第一步里的第3，5个红框也要修改，第三个红框是刚才加的这个属性：package，第五个框勾选就可以了 现在应该可以正确的按页编号显示标号了
Bootstrap简易指南 看完使用手册后所作的笔记，可以当做简易使用指南使用。 1.框架 1.1全局样式 使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套，提供了四种响应式方案 1.3流动栅格系统 基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的 1.4自定义栅格 于variables.css中改变变量，默认列12，宽60px，间隔20px，要保证响应性还得修改responsive.less中内容 1.5布局 container为940px居中，container-fluid则为流体布局 1.6 响应式设计 responsive.less中提供了一组media query：
智能手机《=480px；流式列，非固定宽度 垂直平板《=767px；流式列，非固定宽度 水平平板》=768px；42px 20px 默认》=980px；? ? ?60px ?20px 大分辨率》=1200px；70px 30px 要求添加meta标签， 有诸如.visible-phone等支持类 2.基础CSS 2.1 排版 整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量； 强调：string加粗，em倾斜，abbr缩写【title属性存放显示信息，.initialism会减小缩略词字体】，address【使用br换行】 引用：blockquote【cite属性存放来源URL，.pull-left或right决定内容居左右】，small用于引言作者【会在内容前加入破折号】 列表：ul无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述 2.2代码 code行级代码，pre块级【<>需要转义，.pre-scrollable可以设置350px最大高度】，应用.prettyprint和.linenums来美化代码【使用google prettify】
Dao实现类 public List
DisplayTag是一个非常好用的表格显示标签，适合MVC模式，其主页在 https://www.doczj.com/doc/195765962.html, 一、最简单的情况，未使用
bootstrap2和bootstrap3的用法区别概述（一） 一、表格中 1. 3增加了响应式表格为