HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HTML+CSS+JS代码演示示例 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://libs.itshubao.com/runexample/runexample.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>HTML+CSS+JS代码演示示例</h4></div>
        <div class="card-body">
          
          <p>HTML+CSS+JS代码按照相应的格式，便可呈现以下的效果，在文章中能直接演示并且切换查看代码，相当的方便，不过要注意的是，因为是直接在页面中的，可能会受到当前页面样式对示例的影响。</p>
<div class="code-window">
  <div class="code-preview">
    <p>This is a normal paragraph without any contextual classes.</p>
    <p class="text-primary">A paragraph with .text-primary class.</p>
    <p class="text-success">A paragraph with .text-success class.</p>
    <p class="text-info">A paragraph with .text-info class.</p>
    <p class="text-warning">A paragraph with .text-warning class.</p>
    <p class="text-danger">A paragraph with .text-danger class.</p>
    <p class="text-gray">A paragraph with .text-gray class.</p>
    <p class="text-dark">A paragraph with .text-dark class.</p>
  </div>

<pre class="line-numbers"><code class="language-html">&lt;p&gt;This is a normal paragraph without any contextual classes.&lt;/p&gt;
&lt;p class=&quot;text-primary&quot;&gt;A paragraph with .text-primary class.&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;A paragraph with .text-success class.&lt;/p&gt;
&lt;p class=&quot;text-info&quot;&gt;A paragraph with .text-info class.&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;A paragraph with .text-warning class.&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;A paragraph with .text-danger class.&lt;/p&gt;
&lt;p class=&quot;text-gray&quot;&gt;A paragraph with .text-gray class.&lt;/p&gt;
&lt;p class=&quot;text-dark&quot;&gt;A paragraph with .text-dark class.&lt;/p&gt;
</code></pre>

<pre class="line-numbers"><code class="language-css">.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }
</code></pre>

<pre class="line-numbers"><code class="language-javascript">$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});
</code></pre>

</div>
          
          
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/prism.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/runexample/runexample.min.js"></script>
</body>
</html>
CSS

  

  

    
JavaScript