bootstrap之表格和按钮

最新推荐文章于 2024-09-25 18:15:20 发布
最新推荐文章于 2024-09-25 18:15:20 发布
阅读量51 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Harold-Hua/p/5241632.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格、按钮</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<!-- 响应式表格：table-responsive -->
<body style="margin:50px;" class="table-responsive">


<!--基本表格样式-->
    <!-- <table class="table">-->

<!--条纹状表格-->
        <!--<table class="table table-striped"> -->

<!--带边框的表格-->
    <!-- <table class="table table-bordered"> -->

<!--悬停鼠标-->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>


        <!-- 状态类样式： -->
        <!-- 单独设置在每一行上 -->
        <!--
        active：鼠标悬停在行或单元格上
        success：标识成功或积极的动作
        info：标识普通的提示信息或动作
        warning：标识警告或需要用户注意
        danger：标识危险或潜在的带来负面影响的动作
        sr-only：隐藏行
        -->
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>张1</td>
                <td>男</td>
                <td>54</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>张2</td>
                <td>男</td>
                <td>53</td>
            </tr>
            <tr class="info">
                <td>3</td>
                <td>张3</td>
                <td>男</td>
                <td>52</td>
            </tr>
            <tr class="warning">
                <td>4</td>
                <td>张4</td>
                <td>男</td>
                <td>51</td>
            </tr>
            <tr class="danger">
                <td>5</td>
                <td>张5</td>
                <td>男</td>
                <td>50</td>
            </tr>
            <tr class="sr-only">
                <td>6</td>
                <td>张6</td>
                <td>男</td>
                <td>55</td>
            </tr>
        </tbody>
    </table>


<!-- 1.可作为按钮使用的标签或元素 -->
    <a href="#" class="btn">Link</a>
    <button class="btn btn-default">Button</button>
    <input type="button" class="btn btn-default" value="input">

<!-- 2.预定义样式 -->
    <!--
    btn-default：默认样式
    btn-success：成功样式
    btn-info：一般信息样式
    btn-warning：警告样式
    btn-danger：危险样式
    btn-primary：首选项样式
    btn-link：链接样式
    -->
    <button class="btn btn-info">Button</button>
    <button class="btn btn-danger">Button</button>

<!-- 3.尺寸大小 -->
<!-- 从大到小尺寸 -->
    <!--
    btn-lg
    btn
    btn-sm
    btn-xs
    -->
    <button class="btn btn-danger btn-lg">Button</button>

<!-- 4.块状按钮    块及换行 -->
    <!-- btn-block -->
    <button class="btn btn-danger btn-block">Button</button>

<!-- 5.激活状态    激活按钮 -->
    <!-- active -->
    <button class="btn active">Button</button>

<!-- 5.禁用状态    禁用按钮 -->
    <!-- active disabled -->
    <button class="btn active disabled">Button</button>


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

 

转载于:https://www.cnblogs.com/Harold-Hua/p/5241632.html

weixin_30613343
关注
Bootstrap 表格和按钮
不要皱眉
03-21 2419
一.表格1.基本格式<table class="table"></table>2.条纹状表格让< tbody>里的行产生一行隔一行加单色背景效果 <table class="table table-striped"></table>3.带边框的表格给表格增加边框<table class="table table-borderd"></table>4.悬停鼠标让< tbody>下的表格悬停鼠标实现背景
Bootstrap table表格初始化表格数据的方法
10-18
在本文中，我们将深入探讨如何初始化Bootstrap Table的表格数据，以及与之相关的配置选项和方法。 首先，让我们了解基本的HTML结构。在Bootstrap Table中，表格通常被包含在一个具有`table-responsive`类的`div`...
第三章之Bootstrap 表格与按钮功能
12-28
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 学习要点： 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能，通过内置的 CSS 定义，显示各种丰富的效果。 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 1.基本格式 //实现基本的表格样式 <table class=table> 注：我们可以通过 Firebug 查看相应的 CSS。 2.条纹状表格 //让<tbody>里的行产生一行隔一
Bootstrap 表格和按钮
weixin_30399797的博客
12-19 91
一．表格 1.条纹状表格 行产生一行隔一行加单色背景效果 注：表格效果需要基于基本格式.table <table class="table table-striped"> <tr> <td>1</td> </tr> <tr> <td>1<...
Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
nann-viiv 的博客
08-15 932
Bootstrap中的排版1. 标题部分2. 文本部分对齐.text-left ：文字左对齐.text-center ：文字居中对齐.text-right ：文字右对齐.text-lowercase ：字母小写.text-uppercase ：字母大写.text-capitalize ：首字母大写3. 表格.table ：普通表格.table-bordered ：带边框表格.tabl...
bootstrap表格添加按钮、模态框实现
qq_34639724的博客
07-20 2万+
bootstrap表格添加按钮、模态框实现- 需求：需要表格后面每一列后面都有“添加”“删除”按钮。如下图- 源码如下 <script> function operateFormatter(value, row, index) { return [ '<button type="button" class="RoleOfdelete btn btn-primary
BootStrap之表格和按钮
夏小沫学习之路
07-15 1618
-表格：table table-striped 一行隔一行加单色背景效果 table-bordered 给表格添加边框 table-hover 鼠标悬停在表格上实现背景效果<table class="table table-striped table-bordered table-hover"> <tr> <td>1</td> <td>1</td> </tr> <td>2</td> <t
html表格中加按钮,bootstrapTable中添加按钮
weixin_39722025的博客
05-31 1220
columns: [{field: 'kcmc',title: '课程名称'},{field: 'kc_uuid',title: 'ID',width: 360},{field: 'pxzq',title: '培训周期'},{field: 'pxfy',title: '培训费用'},{field: 'beizhu',title: '备注'},{field: 'tjsj',title: '录入时间'...
BootStrap给table表格的每一行添加一个按钮事件
08-29
Bootstrap 是一个流行的前端框架，提供了许多实用的功能和组件，其中之一就是表格（Table）组件。在实际应用中，我们经常需要在表格中添加按钮事件，以便用户可以点击按钮执行相应的操作。下面我们将详细介绍如何...
Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作！
热门推荐
超超的博客
07-05 6万+
本人第一次写博客，也是刚涉及前端不久，在技术方面可能不是很精湛，想把自己使用过的一些技术做一下整理，如果有任何的问题，欢迎随时沟通进行技术交流 qq:1076846671 然后开始进入正题： 首先引入bootstrap-table的各种需要使用的css，js文件 需要说明的是，引入文件的方式最好是按这个顺序进行导入，否则可能会导致一些不必要的问题有些东西看不明白可以参考下列图片中的导
bootstrap学习笔记——03——表格和按钮
小贺的博客
05-26 718
表格 准备（table&gt;thead&gt;tr&gt;th*4）快捷键Tab Bootstrap提供了一些丰富的表格样式供开发者使用。 基本格式 //实现基本的表格样式 &lt;table class="table"&gt; 条纹状表格 //让&lt;tbody&gt;里的行产生一行隔一行加单色背景效果 注：需要.table &lt;table class=...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4389
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 316
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
vue上传预览CAD文件
只会写bug
09-24 535
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 190
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 358
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
最新发布
PlayerYK的专栏
09-25 170
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
BootStrap可编辑表格实现与功能详解
1. **Bootstrap表格**：Bootstrap的表格类（如`.table`, `.table-striped`, `.table-bordered`, `.table-hover`）用于美化HTML表格，提供条纹、边框和悬停效果，使表格更易阅读和交互。 2. **显示数据**：基础功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值