`

Bootstrap 第12章 列表组面板和嵌入组件

阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>列表组面板和嵌入组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">

<!-- <ul class="list-group">
	<li class="list-group-item">1.这是首页</li>
	<li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li>
	<li class="list-group-item">3.这是第三页</li>
	<li class="list-group-item">4.这是第四页</li>
</ul>

<div class="list-group">
	<a class="list-group-item">1.这是首页</a>
	<a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>
	<a class="list-group-item disabled">3.这是第三页</a>
	<a class="list-group-item list-group-item-success">4.这是第四页</a>
</div>

<div class="list-group">
	<button class="list-group-item">1.这是首页</button>
	<button class="list-group-item active">2.这是第二页 <span class="badge">10</span></button>
	<button class="list-group-item">3.这是第三页</button>
	<button class="list-group-item">4.这是第四页</button>
</div>

<div class="list-group">
	<a class="list-group-item">
		<h4>列表标题</h4>
		<p>详细内容。。。</p>
	</a>
	<a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>
	<a class="list-group-item disabled">3.这是第三页</a>
	<a class="list-group-item list-group-item-success">4.这是第四页</a>
</div> -->

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">我是标题区域</h3>
	</div>
	<div class="panel-body">
		我是一个面板容器
	</div>
	<div class="panel-footer">
		我是底部
	</div>
</div>

<div class="panel panel-danger">
	<div class="panel-heading">
		<h3 class="panel-title">我是标题区域</h3>
	</div>
	<div class="panel-body">
		我是一个面板容器
	</div>
	<table class="table">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</table>
	<ul class="list-group">
		<li class="list-group-item">1.这是首页</li>
		<li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li>
		<li class="list-group-item">3.这是第三页</li>
		<li class="list-group-item">4.这是第四页</li>
	</ul>
	<div class="panel-footer">
		我是底部
	</div>
</div>

<!--div class="embed-responsive embed-responsive-16by9">
	<embed src="http://player.youku.com/player.php/sid/XMTQyMjc1MTg5Ng==/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</div-->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

效果图:

 

  • 大小: 10.5 KB
分享到:
评论

相关推荐

    Bootstrap 第8章 输入框和导航组件

    在第8章“输入框和导航组件”中,我们将深入探讨Bootstrap如何处理表单元素和导航结构,这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件(Form Controls)为创建美观且功能...

    Bootstrap 第9章 路径分页标签和徽章组件

    在第9章“路径分页标签和徽章组件”中,我们将深入探讨Bootstrap中的两种重要元素——分页和徽章,以及它们在实际项目中的应用。 分页是网页设计中常见的导航元素,尤其是在内容较多、需要分页展示的情况下。...

    bootstrap下拉列表与输入框组结合的样式调整

    在Bootstrap中,输入框组(Input Groups)和下拉列表(Dropdowns)是两个常用的功能,它们可以组合使用,以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先,...

    BootStrap实战 源码第3章

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件、样式和JavaScript插件,用于快速构建响应式、移动优先的网页项目。本章节聚焦于BootStrap在实际项目中的应用,通过源码分析和实践操作,...

    bootstrap的datagrid组件

    Bootstrap的DataGrid组件是一款强大的数据展示工具,它充分利用了Bootstrap框架的灵活性和美观性,为开发者提供了便捷的方式来呈现和操作表格数据。这个组件是专为Web应用设计的,旨在简化数据的分页、条件查询以及...

    Bootstrap 第7章 图标菜单和按钮组件

    在第7章中,我们将深入探讨Bootstrap中的图标菜单和按钮组件,这些组件极大地提升了用户体验和界面美观性。 首先,Bootstrap图标菜单通常结合了字体图标库,如Font Awesome或Glyphicons,这些图标库提供了大量的...

    bootstrap评论列表模板

    在Bootstrap模板中,这些元素会被组织成清晰、易读的布局,可能使用卡片(card)组件或者简单的列表组(list group)来展示。每个评论可能是一个独立的行或卡片,包含必要的信息和操作按钮。 4. **CSS样式**:...

    bootstrap相关组件文件全集

    这个"bootstrap相关组件文件全集"包含了Bootstrap 3.3.7版本的所有核心组件和资源,是前端开发者的重要工具箱。 Bootstrap 3.3.7是Bootstrap的第三个主要版本,它的核心特性包括响应式布局、移动设备优先的策略以及...

    Axure Bootstrap 3 组件

    Bootstrap 3 组件库是为Axure设计的,它包含了Bootstrap框架中的各种UI元素和组件,如导航栏、按钮、表单、网格系统、模态框、下拉菜单等。这个组件库适用于Axure 7.x版本,意味着即使在较早的Axure版本中,设计师也...

    基于 Bootstrap 4 和 Material 风格的控制面板.zip

    Bootstrap以其强大的响应式布局、组件丰富和易用性闻名,而Material Design则源于Google,以其清晰的层次结构、直观的交互和丰富的动画效果受到青睐。将两者结合,我们可以创建出既美观又功能强大的控制面板。 ...

    基于 Angular 和 Bootstrap 的后台管理面板框架

    【标题】"基于 Angular 和 Bootstrap 的后台管理面板框架"是一个高度可定制且功能丰富的Web应用程序开发框架,专门设计用于构建高效、响应式的后台管理系统。它结合了Angular的动态性和复杂应用处理能力,以及...

    bootstrap创意精美ui列表布局代码

    Bootstrap是一款流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件,极大地简化了网页设计和开发工作。在“bootstrap创意精美ui列表布局代码”这个主题中,我们可以深入探讨Bootstrap如何帮助...

    构建在 BootStrap 4 之上的 HTML 控制面板框架

    通过这个压缩包,开发者可以学习如何利用Bootstrap 4的灵活性和易用性来构建高效、现代的控制面板,同时也能够体验到预构建的组件和示例带来的便利,从而节省开发时间和提升开发效率。在实际项目中,可以结合后端...

    基于Vuejs和Bootstrap构建和响应式管理面板

    综上所述,"基于Vue.js和Bootstrap构建和响应式管理面板"这个主题涵盖了前端开发中的多个关键知识点,包括Vue.js的组件化开发、响应式数据绑定、路由管理,以及Bootstrap的栅格系统、预定义样式和JavaScript插件。...

    bootstrap-datetimepicker时间组件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件,它提供了美观、易用的用户界面,用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本,确保了与不同Bootstrap设计...

    Bootstrap 第25章 案例

    总结来说,Bootstrap第二十五章的案例旨在帮助开发者深入理解和应用Bootstrap框架,包括但不限于网格系统、预定义样式、导航条、模态框、下拉菜单以及源码的定制。通过这些案例,你可以提升自己的前端开发技能,快速...

    ACCP8.0Y2Web前端框架与移动应用开发第三章Bootstrap组件

    这个ACCP8.0 Y2的Web前端框架与移动应用开发课程的第三章主要聚焦于Bootstrap组件的使用,旨在帮助学生深入理解如何构建美观且用户友好的网页。 Bootstrap的核心特性包括一个响应式的栅格系统,预定义的CSS样式,...

    Axure8 的 Bootstrap4 组件库

    Bootstrap4 是一个流行的前端开发框架,它为网页设计师和开发者提供了快速构建响应式、移动优先项目的工具和组件。Axure RP 8 是一款原型设计工具,允许用户通过拖拽组件来创建交互式的设计原型。"Axure8 的 ...

Global site tag (gtag.js) - Google Analytics