<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>排版样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin:50px;">
<!--<table class="table table-hover">-->
<!--<table class="table table-striped">-->
<!--<table class="table table-bordered">-->
<table class="table table-striped table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>吴者然1</td>
<td>男</td>
<td>12</td>
</tr>
<tr class="info">
<td>2</td>
<td>吴者然2</td>
<td>男</td>
<td>29</td>
</tr>
<tr class="success">
<td>3</td>
<td>吴者然3</td>
<td>男</td>
<td>33</td>
</tr>
<tr class="sr-only">
<td>4</td>
<td>吴者然4</td>
<td>男</td>
<td>41</td>
</tr>
</tbody>
</table>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="按钮">
<button class="btn btn-default">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-info btn-lg">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
<button class="btn btn-info btn-xs">按钮</button>
<button class="btn btn-info btn-block">按钮</button>
<button class="btn btn-info btn-block active">按钮</button>
<button class="btn btn-info btn-block disabled">按钮</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果图：
相关推荐
Bootstrap表格是前端开发中常用的组件，它为网页提供了一种美观、响应式的表格展示方式。Bootstrap-table 是基于Bootstrap框架的扩展插件，它允许开发者在网页中创建功能丰富的表格，包括排序、过滤、分页、行编辑等...
总的来说，这个Bootstrap表格模板项目综合运用了前端开发的多个技术点，包括Bootstrap的CSS和组件，jQuery的事件处理和DOM操作，以及可能涉及的第三方库如DataTables，来实现一个功能完善的动态表格。它对于开发者来...
3. **丰富的UI组件库**：Bootstrap提供了大量的预定义UI组件，如导航栏、按钮、表格等，这些组件可以直接使用，极大地提高了开发效率。 4. **内置jQuery插件**：除了CSS和HTML之外，Bootstrap还内置了一系列基于...
本节课我们主要学习一下 Bootstrap 表格和按钮功能，通过内置的 CSS 定义，显示各种丰富的效果。 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 1.基本格式 //实现基本的表格样式 ...
Bootstrap4是一种流行的前端框架，允许开发者快速搭建响应式布局和网页组件。使用Bootstrap可以大幅度提升网页开发效率，特别是在编写响应式网站时。Bootstrap4提供了许多预设样式和组件，让开发者可以不必从零开始...
Bootstrap 是一个流行的前端框架，提供了许多实用的功能和组件，其中之一就是表格（Table）组件。在实际应用中，我们经常需要在表格中添加按钮事件，以便用户可以点击按钮执行相应的操作。下面我们将详细介绍如何...
对于大量数据的处理，可以借助JavaScript和第三方扩展如`Bootstrap-table`来增强表格的功能，实现如单行显示、数据折叠和扩展功能等。在实际开发中，理解这些核心概念并灵活运用，将有助于创建更加高效和友好的网页...
第一章 bootstrap介绍 ...第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章，后面带开发实例！
1. **HTML和CSS基础**：创建高级表格的第一步是理解和使用HTML表格元素，如`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`和`<td>`。CSS则用于美化表格，包括设置边框、颜色、行高、列宽等，使表格...
响应式网页开发实战中的第14章主要讲解了如何利用Bootstrap框架来构建高效且美观的网页，特别是关于天气预报和机票预订的实例。Bootstrap是一种流行的前端开发框架，它提供了丰富的预定义样式、组件和JavaScript插件...
你可以使用Bootstrap的分页组件，或者第三方插件如DataTables，它们提供了分页、排序、搜索等功能。 6. **事件监听**：添加事件监听器，如`click`事件监听分页按钮，以便在用户切换页码时触发新的数据加载。 7. **...
第3章Knockout.js介绍 安装Knockout.js 基本示例 何为MVVM？ 创建ViewModel 小结 第4章数据库应用 Entity Framework介绍 Code First Database First 创建测试数据 小结 第二部分数据处理 第5章表的查询...
JavaScript文件实现了上述功能，可能包括了对Bootstrap组件的扩展和第三方库的引用。为了完整运行这个示例，你需要将这些文件部署到一个Web服务器上，并确保所有依赖项已正确引入。 总的来说，这个示例展示了如何...
第3章对Bootstrap框架进行了解析，包含全局样式表、栅格系统、布局、响应式设计等内容；第4章讲解了CSS样式的优化，包含页面排版优化、表格设计优化、表单设计优化、按钮设计，以及图片和图标的设计等内容；第5~8章...
Bootstrap3是其第三个主要版本，它在前两个版本的基础上进行了优化和改进，提供了更丰富的组件、更优秀的响应式设计以及更友好的API。 在Bootstrap3中文文档中，你可以找到以下关键知识点： 1. **基本结构**：文档...
Bootstrap Table是一种基于HTML5和Bootstrap框架的开源JavaScript插件，用于创建功能丰富的表格。它提供了数据的排序、筛选、分页等功能，使网页中的数据展示更加灵活和互动。在本项目中，我们关注的是如何自定义...
3. **按钮和按钮组**：Bootstrap提供了各种预定义的按钮样式，包括普通按钮、带图标的按钮、下拉菜单按钮等。按钮组（`btn-group`）则可以将多个按钮组合在一起，形成一个单元。 4. **表单**：Bootstrap的表单组件...