使用Bootstrap 3和Prism构建响应式在线编程教程（开发文档）

Bootstrap online doc，支持html,css,javascript代码高亮（prism.js）。

bootstrap, doc

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2489
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="bs-docs-header" id="content">
 <div class="container">
 <h1>Bootstrap 3 Inspired Docs</h1>
 A small project for demo'ing Bootstrap inspired documentation.
 </div>
</div>

<div class="container">
 <div class="row">
 <div class="main col-md-9" style="padding-bottom: 5rem;">

<div class="bs-docs-section">
 <h1 id="overview" class="page-header">Overview</h1>
 A small pen for demo'ing <a href="https://getbootstrap.com/css/">Bootstrap documentation</a>. This was something I needed quickly for an upcoming project, I hope you find it useful to.
 </div>
 <div class="bs-docs-section">
 <h1 id="adding-sections" class="page-header">Adding sections</h1>
 Use the markup below to add sections to your doc. As you add each section, the right side navigation will construct itself accordingly.
 The <code>&lt;h1&gt;</code> is used for parent links whilst <code>&lt;h2&gt;</code> is used for child links.
 <div class="highlight">
 <pre><code class="language-html">&lt;div class=&quot;bs-docs-section&quot;&gt;
	&lt;h1 id=&quot;parent-section&quot; class=&quot;page-header&quot;&gt;Parent Section&lt;/h1&gt;
	&lt;p class=&quot;lead&quot;&gt;Parent lead text.&lt;/p&gt;
	...
	&lt;h2 id=&quot;child-section&quot;&gt;Child Section&lt;/h2&gt;
	&lt;p&gt;Child text.&lt;/p&gt;
	...
&lt;/div&gt;</code></pre>
 </div>
 </div>
 <div class="bs-docs-section">
 <h1 id="code-snippets" class="page-header">Using code snippets</h1>
 Bootstrap itself uses <a href="https://pygments.org/demo/">Pygments</a> when displaying example code. I've replaced this with the <a href="https://prismjs.com/">Prism</a> highlighter as it's easier to use, just make sure your code snippet
 has been <a href="https://mothereff.in/html-entities">entity encoded</a> for it to display correctly.
 You can use one of three classes on the <code>&lt;code&gt;</code> tag to tell Prism which language you want to highlight.
 <ul>
 <li>HTML: <code>.language-html</code>
 </li>
 <li>CSS: <code>.language-css</code>
 </li>
 <li>JavaScript: <code>.language-javascript</code>
 </li>
 </ul>
 <div class="highlight">
 <pre><code class="language-html">&lt;div class=&quot;highlight&quot;&gt;
	&lt;pre&gt;
		&lt;code class=&quot;language-html&quot;&gt;
			...
		&lt;/code&gt;
	&lt;/pre&gt;
&lt;/div&gt;</code></pre>
 </div>
 Whilst running in Codepen the 'copy to clipboard' won't work due to sandbox restrictions. It will work outside of Codepen.
 </div>
 <div class="bs-docs-section">
 <h1 id="pagination" class="page-header">Real Example of the Pagination section taken from Bootstrap</h1>
 Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.
 <h2 id="default-pagination">Default pagination</h2>
 Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
 <div class="bs-example" data-example-id="simple-pagination">
 <nav>
 <ul class="pagination">
 <li>
 <a href="#" aria-label="Previous">
 &laquo;
 </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">
 &raquo;
 </a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pagination"&gt;
 &lt;li&gt;
 &lt;a href="#" aria-label="Previous"&gt;
 &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#" aria-label="Next"&gt;
 &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 <h3>Disabled and active states</h3>
 Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.
 <div class="bs-example" data-example-id="disabled-active-pagination">
 <nav>
 <ul class="pagination">
 <li class="disabled"><a href="#" aria-label="Previous">&laquo;</a>
 </li>
 <li class="active"><a href="#">1 (current)</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">&raquo;</a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pagination"&gt;
 &lt;li class="disabled"&gt;&lt;a href="#" aria-label="Previous"&gt;&lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li class="active"&gt;&lt;a href="#"&gt;1 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 ...
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pagination"&gt;
 &lt;li class="disabled"&gt;
 &lt;span&gt;
 &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
 &lt;/span&gt;
 &lt;/li&gt;
 &lt;li class="active"&gt;
 &lt;span&gt;1 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/span&gt;
 &lt;/li&gt;
 ...
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 <h3>Sizing</h3>
 Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.
 <div class="bs-example" data-example-id="pagination-sizing">
 <nav>
 <ul class="pagination pagination-lg">
 <li><a href="#" aria-label="Previous">&laquo;</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">&raquo;</a>
 </li>
 </ul>
 </nav>
 <nav>
 <ul class="pagination">
 <li><a href="#" aria-label="Previous">&laquo;</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">&raquo;</a>
 </li>
 </ul>
 </nav>
 <nav>
 <ul class="pagination pagination-sm">
 <li><a href="#" aria-label="Previous">&laquo;</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">&raquo;</a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;&lt;ul class="pagination pagination-lg"&gt;...&lt;/ul&gt;&lt;/nav&gt;
&lt;nav&gt;&lt;ul class="pagination"&gt;...&lt;/ul&gt;&lt;/nav&gt;
&lt;nav&gt;&lt;ul class="pagination pagination-sm"&gt;...&lt;/ul&gt;&lt;/nav&gt;</code></pre>
 </div>
 <h2 id="pager">Pager</h2>
 Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
 <h3>Default example</h3>
 By default, the pager centers links.
 <div class="bs-example" data-example-id="simple-pager">
 <nav>
 <ul class="pager">
 <li><a href="#">Previous</a>
 </li>
 <li><a href="#">Next</a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pager"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 <h3>Aligned links</h3>
 Alternatively, you can align each link to the sides:
 <div class="bs-example" data-example-id="aligned-pager-links">
 <nav>
 <ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a>
 </li>
 <li class="next"><a href="#">Newer &rarr;</a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pager"&gt;
 &lt;li class="previous"&gt;&lt;a href="#"&gt;&lt;span aria-hidden="true"&gt;&amp;larr;&lt;/span&gt; Older&lt;/a&gt;&lt;/li&gt;
 &lt;li class="next"&gt;&lt;a href="#"&gt;Newer &lt;span aria-hidden="true"&gt;&amp;rarr;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 <h3>Optional disabled state</h3>
 Pager links also use the general <code>.disabled</code> utility class from the pagination.
 <div class="bs-example" data-example-id="disabled-pager">
 <nav>
 <ul class="pager">
 <li class="previous disabled"><a href="#">&larr; Older</a>
 </li>
 <li class="next"><a href="#">Newer &rarr;</a>
 </li>
 </ul>
 </nav>
 </div>
 <div class="highlight">
 <pre><code class="language-html" data-lang="html">&lt;nav&gt;
 &lt;ul class="pager"&gt;
 &lt;li class="previous disabled"&gt;&lt;a href="#"&gt;&lt;span aria-hidden="true"&gt;&amp;larr;&lt;/span&gt; Older&lt;/a&gt;&lt;/li&gt;
 &lt;li class="next"&gt;&lt;a href="#"&gt;Newer &lt;span aria-hidden="true"&gt;&amp;rarr;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
 </div>
 </div>
 </div>

</div>
</div>

Bootstrap online doc，支持html,css,javascript代码高亮（prism.js）。

bootstrap, doc

编辑器支持Emmet

快捷键

Bootstrap online doc，支持html,css,javascript代码高亮（prism.js）。

bootstrap, doc

使用Kendo UI+Bootstrap3实现的网站管理后台模板（含电子表格）

一款响应式双场景Bootstrap4网页模板（带头部菜单栏滚动动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：