<!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>

bootstrap之表格和按钮的更多相关文章

  1. Bootstrap(3) 表格与按钮

    1.表格 基本格式,实现基本的表格样式 <table class="table"> <thead> <tr> <th>编号</ ...

  2. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  3. 第二百三十三节，Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...

  4. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  5. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  6. BootStrap的表格加载json数据，并且可以搜索，选择

    2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...

  7. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  8. C# bootstrap之表格动态绑定值

    这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...

  9. element表格切入按钮以及复选框

    1,element表格切入按钮 关键代码: html:<el-table :data="tableList" border style="width: 100%&q ...

随机推荐

  1. Nginx的alias的用法及与root的区别

    以前只知道Nginx的location块中的root用法,用起来总是感觉满足不了自己的一些想法.然后终于发现了alias这个东西. 先看toot的用法 location /request_path/i ...

  2. Hive记录-加载文件进行查询操作

    Hive可以运行保存在文件里面的一条或多条的语句,只要用-f参数,一般情况下, 保存这些Hive查询语句的文件通常用.q或者.hql后缀名,但是这不是必须的, 你也可以保存你想要的后缀名.假设test ...

  3. VS Sln图标空白修复办法

    环境:Win10,VS2017,曾经安装并卸载过VS2015之前安装了两个版本的VisualStudio,卸载一个后,就出现了图标空白问题,重新设置默认打开程序也没有作用,经摸索解决办法如下.(1)在 ...

  4. 20155331 2016-2017-2 《Java程序设计》第七周学习总结

    20155331 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 一.认识Lambda语法 1.Lambda语法概览 Arrays的sort()方法可以用来排 ...

  5. 读取Excel中数据

    #region 读取导入Excel数据 /// <summary> /// /// </summary> /// <param name="filename&q ...

  6. 未能加载文件或程序集System.Web.Http.WebHost

    解决方案:只需要在项目的bin文件夹下放入下面三个dll. 将:C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 4\Assemblies中的  ...

  7. Python人工智能之路 - 第四篇 : jieba gensim 最好别分家之最简单的相似度实现

    简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...

  8. img格式镜像转ISO格式

    在做汇编学习时,需要用比较老的Windows XP来进行调试学习,因此找了最老的Windows XP(CN_WINXP_PRO_ISO,无SP版本 ),下载后发现镜像文件格式是img的,而virtua ...

  9. 深入剖析ThreadLocal实现原理以及内存泄漏问题

    关于ThreadLocalMap<ThreadLocal, Object>弱引用问题: 当线程没有结束,但是ThreadLocal已经被回收,则可能导致线程中存在ThreadLocalMa ...

  10. DSO windowed optimization 代码 (4)

    5 "step"计算 参考<DSO windowed optimization 公式>,计算各个优化变量的增加量. 公式再写一下: \[\begin{align} \b ...