<!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. Linux记录-集群时间同步解决方案

    1.各个主机安装ntpdate 2.编写shell #!/bin/sh array=("root@master" "root@slave002" "r ...

  2. CM记录-选择合适的硬件

    hadoop的运行环境---hadoop/jvm/os/hw 原则1:主节点的可靠性要好于从节点:NameNode(Yarn-ResourceManager).DataNode(NodeManager ...

  3. css颜色模式hsla和rgba

    在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度. rgba指的是:红色.绿色.蓝色.Alpha透明度(Red-Green-Blue-Alpha)前三个值取值 ...

  4. MyBatis第一个案例的优化,通过映射文件与接口进行绑定

    1.创建表emp CREATE DATABASE mybatis; USE mybatis; CREATE TABLE emp( id INT(11) PRIMARY KEY AUTO_INCREME ...

  5. oracle数据库还原以及备份 包括快速备份（并发压缩）

    expdp jhpt/XXXX directory=databackup dumpfile=dpfile_201512091300_%U.dmp filesize=5G parallel=8 comp ...

  6. Python数据分析学习目录

    python数据分析学习目录 Anaconda的安装和更新 矩阵NumPy pandas数据表 matplotlib-2D绘图库学习目录                      

  7. POJ 1035 Spell checker （模拟）

    题目链接 Description You, as a member of a development team for a new spell checking program, are to wri ...

  8. 使用sqlmap中tamper脚本绕过waf

    使用sqlmap中tamper脚本绕过waf 刘海哥 · 2015/02/02 11:26 0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap- ...

  9. LOJ 3089: 洛谷 P5319: 「BJOI2019」奥术神杖

    题目传送门:LOJ #3089. 题意简述: 有一个长度为 \(n\) 的母串,其中某些位置已固定,另一些位置可以任意填. 同时给定 \(m\) 个小串,第 \(i\) 个为 \(S_i\),所有位置 ...

  10. NSIS程序安装包制作

    nsis下载地址:http://www.pc6.com/softview/SoftView_14342.html nsis使用: 启动NSIS程序主界面,选择"可视化脚本编辑器(VNISEd ...