how2j.cn

"); window.frames["iframe_toc"+sid].document.write(decodeHtml($("pre#stepCodePre"+sid).html())); window.frames["iframe_toc"+sid].document.close(); $(window.frames["iframe_toc"+sid]).load(function(){ $("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight)); }); $("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight)); } $("input.tocName").hover(function(){ $(this).select(); }); function refresh(){ var sid = tocstepids.shift(); if(null!=sid) refreshIframe(sid); else go2ArchorFlag = true; } var t = setInterval(refresh,300); // $("div.steptoc iframe").height($(showittryitheight+50)); });
效果 说明 示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
edit
基本分页
示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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 class="disabled">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
edit
禁用和激活状态
示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pagination pagination-lg">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination ">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination pagination-sm">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
edit
尺寸
示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
edit
翻页
示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
edit
两端对齐
示例代码 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
edit
翻页禁用状态
示例代码
示例 1 : 基本分页   
示例 2 : 禁用和激活状态   
示例 3 : 尺寸   
示例 4 : 翻页   
示例 5 : 两端对齐   
示例 6 : 翻页禁用状态   

示例 1 :

基本分页

顶 折
基本分页
"); window.frames["iframe_show2952"].document.write(decodeHtml($("textarea#stepcodeTextarea2952").val())); window.frames["iframe_show2952"].document.close(); $(window.frames["iframe_show2952"]).load(function(){ $("#iframe_show2952").height($("#iframe_show2952").contents().find("body").height()+showittryitheight); }); $("#iframe_show2952").height($("#iframe_show2952").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>
"); window.frames["iframe2952"].document.write(decodeHtml(code2952)); window.frames["iframe2952"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2952"]).load(function(){ $("#iframe2952").height($("#iframe2952").contents().find("body").height()+showittryitheight); }); $("#iframe2952").height($("#iframe2952").contents().find("body").height()+showittryitheight); alreadyWriteCode2952 = code2952; $("#rendering2952").hide(); $("#rendered2952").show(); } var tRereshRetry2DemoPanel2952 = setInterval(rereshRetry2DemoPanel2952,1000); var binded2952 = false; $("textarea#stepcodeTextarea2952").keyup(function(){ if(!binded2952){ $(window).bind('beforeunload',function(){ binded2952 = true; return "xxxx"; }); } var newCode = $(this).val() code2952 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2952!=newCode){ // window.frames["iframe2952"].document.write("
"); // window.frames["iframe2952"].document.write(decodeHtml($("textarea#stepcodeTextarea2952").val())); // window.frames["iframe2952"].document.close(); // $(window.frames["iframe2952"]).load(function(){ // $("#iframe2952").height($("#iframe2952").contents().find("body").height()+showittryitheight); // }); // code2952 = newCode; // } }); $(".tryButton2952").click(function(){ $("#tryDiv2952").show(); $("#stepcodeTextarea2952").focus(); $("#stepcodeTextarea2952").height(200); $("#iframe2952").height(0); window.frames["iframe2952"].document.write("
"); window.frames["iframe2952"].document.write(decodeHtml($("textarea#stepcodeTextarea2952").val())); window.frames["iframe2952"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2952"]).load(function(){ $("#iframe2952").height($("#iframe2952").contents().find("body").height()+showittryitheight); }); $("#iframe2952").height($("#iframe2952").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2952.focus(); editor2952.setSize(null, "250"); $("#rendering2952").hide(); $("#rendered2952").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2952 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2952"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2952.on("change",function(doc){ if(!binded2952){ $(window).bind('beforeunload',function(){ binded2952 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2952 = newCode; $("textarea#stepcodeTextarea2952").val(newCode); if(alreadyWriteCode2952!=code2952){ lastModifedTime2952 = new Date().getTime(); $("#rendering2952").show(); $("#rendered2952").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2952 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2952.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2952").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 2 :

禁用和激活状态

顶 折
最后一页不可点
"); window.frames["iframe_show2953"].document.write(decodeHtml($("textarea#stepcodeTextarea2953").val())); window.frames["iframe_show2953"].document.close(); $(window.frames["iframe_show2953"]).load(function(){ $("#iframe_show2953").height($("#iframe_show2953").contents().find("body").height()+showittryitheight); }); $("#iframe_show2953").height($("#iframe_show2953").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><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 class="disabled"> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>
"); window.frames["iframe2953"].document.write(decodeHtml(code2953)); window.frames["iframe2953"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2953"]).load(function(){ $("#iframe2953").height($("#iframe2953").contents().find("body").height()+showittryitheight); }); $("#iframe2953").height($("#iframe2953").contents().find("body").height()+showittryitheight); alreadyWriteCode2953 = code2953; $("#rendering2953").hide(); $("#rendered2953").show(); } var tRereshRetry2DemoPanel2953 = setInterval(rereshRetry2DemoPanel2953,1000); var binded2953 = false; $("textarea#stepcodeTextarea2953").keyup(function(){ if(!binded2953){ $(window).bind('beforeunload',function(){ binded2953 = true; return "xxxx"; }); } var newCode = $(this).val() code2953 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2953!=newCode){ // window.frames["iframe2953"].document.write("
"); // window.frames["iframe2953"].document.write(decodeHtml($("textarea#stepcodeTextarea2953").val())); // window.frames["iframe2953"].document.close(); // $(window.frames["iframe2953"]).load(function(){ // $("#iframe2953").height($("#iframe2953").contents().find("body").height()+showittryitheight); // }); // code2953 = newCode; // } }); $(".tryButton2953").click(function(){ $("#tryDiv2953").show(); $("#stepcodeTextarea2953").focus(); $("#stepcodeTextarea2953").height(200); $("#iframe2953").height(0); window.frames["iframe2953"].document.write("
"); window.frames["iframe2953"].document.write(decodeHtml($("textarea#stepcodeTextarea2953").val())); window.frames["iframe2953"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2953"]).load(function(){ $("#iframe2953").height($("#iframe2953").contents().find("body").height()+showittryitheight); }); $("#iframe2953").height($("#iframe2953").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2953.focus(); editor2953.setSize(null, "250"); $("#rendering2953").hide(); $("#rendered2953").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2953 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2953"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2953.on("change",function(doc){ if(!binded2953){ $(window).bind('beforeunload',function(){ binded2953 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2953 = newCode; $("textarea#stepcodeTextarea2953").val(newCode); if(alreadyWriteCode2953!=code2953){ lastModifedTime2953 = new Date().getTime(); $("#rendering2953").show(); $("#rendered2953").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2953 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2953.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2953").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 3 :

尺寸

顶 折
尺寸
"); window.frames["iframe_show2954"].document.write(decodeHtml($("textarea#stepcodeTextarea2954").val())); window.frames["iframe_show2954"].document.close(); $(window.frames["iframe_show2954"]).load(function(){ $("#iframe_show2954").height($("#iframe_show2954").contents().find("body").height()+showittryitheight); }); $("#iframe_show2954").height($("#iframe_show2954").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <nav> <ul class="pagination "> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><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="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>
"); window.frames["iframe2954"].document.write(decodeHtml(code2954)); window.frames["iframe2954"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2954"]).load(function(){ $("#iframe2954").height($("#iframe2954").contents().find("body").height()+showittryitheight); }); $("#iframe2954").height($("#iframe2954").contents().find("body").height()+showittryitheight); alreadyWriteCode2954 = code2954; $("#rendering2954").hide(); $("#rendered2954").show(); } var tRereshRetry2DemoPanel2954 = setInterval(rereshRetry2DemoPanel2954,1000); var binded2954 = false; $("textarea#stepcodeTextarea2954").keyup(function(){ if(!binded2954){ $(window).bind('beforeunload',function(){ binded2954 = true; return "xxxx"; }); } var newCode = $(this).val() code2954 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2954!=newCode){ // window.frames["iframe2954"].document.write("
"); // window.frames["iframe2954"].document.write(decodeHtml($("textarea#stepcodeTextarea2954").val())); // window.frames["iframe2954"].document.close(); // $(window.frames["iframe2954"]).load(function(){ // $("#iframe2954").height($("#iframe2954").contents().find("body").height()+showittryitheight); // }); // code2954 = newCode; // } }); $(".tryButton2954").click(function(){ $("#tryDiv2954").show(); $("#stepcodeTextarea2954").focus(); $("#stepcodeTextarea2954").height(200); $("#iframe2954").height(0); window.frames["iframe2954"].document.write("
"); window.frames["iframe2954"].document.write(decodeHtml($("textarea#stepcodeTextarea2954").val())); window.frames["iframe2954"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2954"]).load(function(){ $("#iframe2954").height($("#iframe2954").contents().find("body").height()+showittryitheight); }); $("#iframe2954").height($("#iframe2954").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2954.focus(); editor2954.setSize(null, "250"); $("#rendering2954").hide(); $("#rendered2954").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2954 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2954"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2954.on("change",function(doc){ if(!binded2954){ $(window).bind('beforeunload',function(){ binded2954 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2954 = newCode; $("textarea#stepcodeTextarea2954").val(newCode); if(alreadyWriteCode2954!=code2954){ lastModifedTime2954 = new Date().getTime(); $("#rendering2954").show(); $("#rendered2954").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2954 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2954.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2954").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 4 :

翻页

顶 折
翻页
"); window.frames["iframe_show2955"].document.write(decodeHtml($("textarea#stepcodeTextarea2955").val())); window.frames["iframe_show2955"].document.close(); $(window.frames["iframe_show2955"]).load(function(){ $("#iframe_show2955").height($("#iframe_show2955").contents().find("body").height()+showittryitheight); }); $("#iframe_show2955").height($("#iframe_show2955").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> </nav> 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
"); window.frames["iframe2955"].document.write(decodeHtml(code2955)); window.frames["iframe2955"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2955"]).load(function(){ $("#iframe2955").height($("#iframe2955").contents().find("body").height()+showittryitheight); }); $("#iframe2955").height($("#iframe2955").contents().find("body").height()+showittryitheight); alreadyWriteCode2955 = code2955; $("#rendering2955").hide(); $("#rendered2955").show(); } var tRereshRetry2DemoPanel2955 = setInterval(rereshRetry2DemoPanel2955,1000); var binded2955 = false; $("textarea#stepcodeTextarea2955").keyup(function(){ if(!binded2955){ $(window).bind('beforeunload',function(){ binded2955 = true; return "xxxx"; }); } var newCode = $(this).val() code2955 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2955!=newCode){ // window.frames["iframe2955"].document.write("
"); // window.frames["iframe2955"].document.write(decodeHtml($("textarea#stepcodeTextarea2955").val())); // window.frames["iframe2955"].document.close(); // $(window.frames["iframe2955"]).load(function(){ // $("#iframe2955").height($("#iframe2955").contents().find("body").height()+showittryitheight); // }); // code2955 = newCode; // } }); $(".tryButton2955").click(function(){ $("#tryDiv2955").show(); $("#stepcodeTextarea2955").focus(); $("#stepcodeTextarea2955").height(200); $("#iframe2955").height(0); window.frames["iframe2955"].document.write("
"); window.frames["iframe2955"].document.write(decodeHtml($("textarea#stepcodeTextarea2955").val())); window.frames["iframe2955"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2955"]).load(function(){ $("#iframe2955").height($("#iframe2955").contents().find("body").height()+showittryitheight); }); $("#iframe2955").height($("#iframe2955").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2955.focus(); editor2955.setSize(null, "250"); $("#rendering2955").hide(); $("#rendered2955").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2955 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2955"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2955.on("change",function(doc){ if(!binded2955){ $(window).bind('beforeunload',function(){ binded2955 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2955 = newCode; $("textarea#stepcodeTextarea2955").val(newCode); if(alreadyWriteCode2955!=code2955){ lastModifedTime2955 = new Date().getTime(); $("#rendering2955").show(); $("#rendered2955").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2955 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2955.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2955").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 5 :

两端对齐

顶 折
两端对齐
"); window.frames["iframe_show2956"].document.write(decodeHtml($("textarea#stepcodeTextarea2956").val())); window.frames["iframe_show2956"].document.close(); $(window.frames["iframe_show2956"]).load(function(){ $("#iframe_show2956").height($("#iframe_show2956").contents().find("body").height()+showittryitheight); }); $("#iframe_show2956").height($("#iframe_show2956").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li> <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li> </ul> </nav> 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
"); window.frames["iframe2956"].document.write(decodeHtml(code2956)); window.frames["iframe2956"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2956"]).load(function(){ $("#iframe2956").height($("#iframe2956").contents().find("body").height()+showittryitheight); }); $("#iframe2956").height($("#iframe2956").contents().find("body").height()+showittryitheight); alreadyWriteCode2956 = code2956; $("#rendering2956").hide(); $("#rendered2956").show(); } var tRereshRetry2DemoPanel2956 = setInterval(rereshRetry2DemoPanel2956,1000); var binded2956 = false; $("textarea#stepcodeTextarea2956").keyup(function(){ if(!binded2956){ $(window).bind('beforeunload',function(){ binded2956 = true; return "xxxx"; }); } var newCode = $(this).val() code2956 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2956!=newCode){ // window.frames["iframe2956"].document.write("
"); // window.frames["iframe2956"].document.write(decodeHtml($("textarea#stepcodeTextarea2956").val())); // window.frames["iframe2956"].document.close(); // $(window.frames["iframe2956"]).load(function(){ // $("#iframe2956").height($("#iframe2956").contents().find("body").height()+showittryitheight); // }); // code2956 = newCode; // } }); $(".tryButton2956").click(function(){ $("#tryDiv2956").show(); $("#stepcodeTextarea2956").focus(); $("#stepcodeTextarea2956").height(200); $("#iframe2956").height(0); window.frames["iframe2956"].document.write("
"); window.frames["iframe2956"].document.write(decodeHtml($("textarea#stepcodeTextarea2956").val())); window.frames["iframe2956"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2956"]).load(function(){ $("#iframe2956").height($("#iframe2956").contents().find("body").height()+showittryitheight); }); $("#iframe2956").height($("#iframe2956").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2956.focus(); editor2956.setSize(null, "250"); $("#rendering2956").hide(); $("#rendered2956").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2956 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2956"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2956.on("change",function(doc){ if(!binded2956){ $(window).bind('beforeunload',function(){ binded2956 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2956 = newCode; $("textarea#stepcodeTextarea2956").val(newCode); if(alreadyWriteCode2956!=code2956){ lastModifedTime2956 = new Date().getTime(); $("#rendering2956").show(); $("#rendered2956").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2956 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2956.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2956").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 6 :

翻页禁用状态

顶 折
翻页禁用状态
"); window.frames["iframe_show2957"].document.write(decodeHtml($("textarea#stepcodeTextarea2957").val())); window.frames["iframe_show2957"].document.close(); $(window.frames["iframe_show2957"]).load(function(){ $("#iframe_show2957").height($("#iframe_show2957").contents().find("body").height()+showittryitheight); }); $("#iframe_show2957").height($("#iframe_show2957").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <nav> <ul class="pager"> <li class="disabled"><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> </nav> 
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
"); window.frames["iframe2957"].document.write(decodeHtml(code2957)); window.frames["iframe2957"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2957"]).load(function(){ $("#iframe2957").height($("#iframe2957").contents().find("body").height()+showittryitheight); }); $("#iframe2957").height($("#iframe2957").contents().find("body").height()+showittryitheight); alreadyWriteCode2957 = code2957; $("#rendering2957").hide(); $("#rendered2957").show(); } var tRereshRetry2DemoPanel2957 = setInterval(rereshRetry2DemoPanel2957,1000); var binded2957 = false; $("textarea#stepcodeTextarea2957").keyup(function(){ if(!binded2957){ $(window).bind('beforeunload',function(){ binded2957 = true; return "xxxx"; }); } var newCode = $(this).val() code2957 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2957!=newCode){ // window.frames["iframe2957"].document.write("
"); // window.frames["iframe2957"].document.write(decodeHtml($("textarea#stepcodeTextarea2957").val())); // window.frames["iframe2957"].document.close(); // $(window.frames["iframe2957"]).load(function(){ // $("#iframe2957").height($("#iframe2957").contents().find("body").height()+showittryitheight); // }); // code2957 = newCode; // } }); $(".tryButton2957").click(function(){ $("#tryDiv2957").show(); $("#stepcodeTextarea2957").focus(); $("#stepcodeTextarea2957").height(200); $("#iframe2957").height(0); window.frames["iframe2957"].document.write("
"); window.frames["iframe2957"].document.write(decodeHtml($("textarea#stepcodeTextarea2957").val())); window.frames["iframe2957"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2957"]).load(function(){ $("#iframe2957").height($("#iframe2957").contents().find("body").height()+showittryitheight); }); $("#iframe2957").height($("#iframe2957").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2957.focus(); editor2957.setSize(null, "250"); $("#rendering2957").hide(); $("#rendered2957").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2957 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2957"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2957.on("change",function(doc){ if(!binded2957){ $(window).bind('beforeunload',function(){ binded2957 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2957 = newCode; $("textarea#stepcodeTextarea2957").val(newCode); if(alreadyWriteCode2957!=code2957){ lastModifedTime2957 = new Date().getTime(); $("#rendering2957").show(); $("#rendered2957").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2957 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2957.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2957").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。


关于 前端部分-BootStrap-分页 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图