常用代码资源

这里介绍代码的基本使用方法

 这里提供常用的代码

<div class="text-box">

  <div class="text-box-heading">这是一个醒目的标题</div>

  <div class="arrow-down"></div>

  <p>这里是一段提示文本内容</p>

</div>

这里是大标题

这里是大标题

这里是带图标的大标题

<p class="headline headline-v1"><i class="fa fa-folder-open"></i> 这里是带图标的大标题</p>

这里是带图标的大标题

<p class="headline headline-v1"><i class="fa fa-folder-open"></i> 这里是带图标的大标题</p>

<div class="prom-box prom-box-default">

  <h3>这是默认的标题，一般的内容都可以使用</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-info">

  <h3>这是蓝色的标题，一般用于通知内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-warning">

  <h3>这是黄色的标题，一般用于重要内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-danger">

  <h3>这是红色的标题，一般用于特别留意的内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="panel panel-default"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-primary"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-success"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-info"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-warning"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-danger"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-danger shadow1"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是带阴影的内容</h3>

  </div>

  <div class="panel-body">

   您只需要在 class的末尾加上 shadow1 或者 shadow2 就可以自动产生阴影

  </div>

</div>

<div class="prom-box prom-box-default">

  <h3>这是一段带按钮的提示文本</h3>

  <a class="btn btn-danger pull-right" href="#"><i class="fa fa-share fa-lg"></i> 按钮</a>

  <p>修改按钮链接可以实现点击按钮跳转到指定地址</p>

</div>

<div class="prom-box prom-box-default shadow1">

  <h3>这是一段带阴影的提示文本</h3>

  <p>这里是提示文本的说明</p>

</div>

<div class="prom-box prom-box-default shadow2">

  <h3>这是另外一种阴影的效果</h3>

  <p>这里是提示文本的说明</p>

</div>

<div class="row-fluid">

<div class="iconbox span3">

<div class="iconcircle">

<i class="fa fa-twitter"></i>

</div>

<div class="iconbox-content">

<h4><span><b>标题内容1</b></span></h4>

<p>这里是一段小的说明文字,这里是一段小的说明文字</p>

<a class="btn btn-default" href="这里修改为目标地址">马上阅读</a></div>

</div>

<div class="iconbox span3">

<div class="iconcircle">

<i class="fa fa-sliders"></i>

</div>

<div class="iconbox-content">

<h4><span><b>标题内容2</b></span></h4>

<p>这里是一段小的说明文字,这里是一段小的说明文字</p>

<a class="btn btn-default" href="这里修改为目标地址">马上阅读</a>

</div>

</div>

<div class="iconbox span3">

<div class="iconcircle">

<i class="fa fa-flag"></i>

</div>

<div class="iconbox-content">

<h4><b>标题内容3</b></h4>

<p>这里是一段小的说明文字,这里是一段小的说明文字</p>

<a class="btn btn-default" href="这里修改为目标地址">马上阅读</a>

</div>

</div>

<div class="iconbox span3">

<div class="iconcircle">

<i class="fa fa-book"></i>

</div>

<div class="iconbox-content">

<h4><b>标题内容4</b></h4>

<p>这里是一段小的说明文字,这里是一段小的说明文字</p>

<a class="btn btn-default" href="这里修改为目标地址">马上阅读</a>

</div>

</div>

</div>

这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。

马上阅读

这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。

马上阅读

这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。

马上阅读

<div class="row-fluid">

<div class="image-box span4">

<img src="http://placehold.it/600x300" alt="img1" class="img-responsive">

<div class="image-box-content"><p>这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。</p><p style="text-align:center;"><a class="btn btn-default" href="这里修改为目标地址">马上阅读</a></p></div>

</div>

<div class="image-box span4">

<img src="http://placehold.it/600x300" alt="img2" class="img-responsive">

<div class="image-box-content"><p>这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。</p><p style="text-align:center;"><a class="btn btn-default" href="这里修改为目标地址">马上阅读</a></p></div>

</div>

<div class="image-box span4">

<img src="http://placehold.it/600x300" alt="img3" class="img-responsive">

<div class="image-box-content"><p>这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字，这里是一段说明文字。</p><p style="text-align:center;"><a class="btn btn-default" href="这里修改为目标地址">马上阅读</a></p></div>

</div>

</div>

<div class="spotlight spotlight-v1 arrow-top">您可以直接修改这里的文本内容，以满足使用的需要。这种文本框最适合用来提示内容的开始或者末尾提供总结。您可以根据需要选择居中或者其他的对齐方式。</div>

<div class="spotlight spotlight-v1 arrow-bottom">

  您可以直接修改这里的文本内容，以满足使用的需要。这种文本框最适合用来提示内容的开始或者末尾提供总结。您可以根据需要选择居中或者其他的对齐方式。

</div>

 这里提供大量可以轻松定制的页面元素

这里是页面的大标题

这里是页面的二级标题或说明文字，您可以通过修改代码中的图片地址，修改此处的背景图片

<div class="course-pano wrapper">

  <img src="这里修改为图片地址">

  <div class="course-pano title">

    <h2><span>这里是页面的大标题</span></h2>

    <h4><span>这里是页面的二级标题或说明文字，您可以通过修改代码中的图片地址，修改此处的背景图片</span></h4>

  </div>

</div>

<div class="row-fluid">

<div class="span4">

<div class="blocknumber_box">

<div class="blocknumber_icon">

1

</div>

<div class="blocknumber_content">

<h5><b>第一个大标题</b></h5>

<p>

这里是一段说明的文本，您可以随意编辑这里的文本内容给。

</p>

</div>

</div>

</div>

<div class="span4">

<div class="blocknumber_box">

<div class="blocknumber_icon">

b

</div>

<div class="blocknumber_content">

<h5><b>第二个大标题</b></h5>

<p>

这里是一段说明的文本，您可以随意编辑这里的文本内容给。

</p>

</div>

</div>

</div>

<div class="span4">

<div class="blocknumber_box">

<div class="blocknumber_icon">

<i class="fa fa-gift"></i>

</div>

<div class="blocknumber_content">

<h5><b>第三个大标题</b></h5>

<p>这里是一段说明的文本，您可以随意编辑这里的文本内容给。</p>

</div>

</div>

</div>

</div>

这里提供内容展示代码

• 标签一
• 标签二
• 标签三

<ul id="myTab" class="nav nav-tabs" role="tablist">

<li class="active">

<a data-toggle="tab" role="tab" href="#home">标签一</a>

</li>

<li class="">

<a data-toggle="tab" role="tab" href="#profile">标签二</a>

</li>

<li class="">

<a data-toggle="tab" role="tab" href="#more">标签三</a>

</li>

</ul>

<div id="myTabContent" class="tab-content">

<div id="home" class="tab-pane fade active in">

<p>这里是这个标签对应的内容，你可以根据需要添加和排版任意内容。</p>

</div>

<div id="profile" class="tab-pane fade">

<p>这里是这个标签对应的内容，你可以根据需要添加和排版任意内容。</p>

</div>

<div id="more" class="tab-pane fade">

<p>这里是这个标签对应的内容，你可以根据需要添加和排版任意内容。</p>

</div>

</div>

<div class="panel-group" id="accordion">

<div class="panel panel-default">

<div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="">垂直折叠内容1</a></div>

<div id="collapseOne" class="panel-collapse in collapse" style="height: auto;">

<div class="panel-body">这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="">

垂直折叠内容2

</a>

</div>

<div id="collapseTwo" class="panel-collapse in collapse" style="height: auto;">

<div class="panel-body">

这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="">

垂直折叠内容3

</a>

</div>

<div id="collapseThree" class="panel-collapse in collapse" style="height: auto;">

<div class="panel-body">

这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。这里是折叠的具体内容，您可以添加任意文本或者其他媒体内容，并根据您的需要进行排版。

</div>

</div>

</div>

</div>