target/classes/templates/demo/form/tabs_panels.html
(开头部分) 3KB这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('选项卡 & 面板')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>基本面板 <small class="m-l-sm">这是一个自定义面板</small></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="javascript:;">选项1</a>
</li>
<li><a href="javascript:;">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<h2>
Bootstrap<br/>
</h2>
<p>
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
</li>
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="panel-body">
<strong>HTML5 文档类型</strong>
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="panel-body">
<strong>移动设备优先</strong>
<p>在 Bootstrap 2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。</p>
24 小时内免费解锁 3 个项目,之后 1 算力/个。 规则说明
AI 解读 AI
登录后可用,每次 10 算力,解读结果公开显示在下面。
还没有人解读过这个文件。
