<!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. centos下查看端口占用情况，杀死进程

    第一种:我们知道端口号用下面这种方法 有时候我们知道某个服务端口正在后台运行,想关掉它.比如说我tomcat是8080端口,在后台运行.怎么关掉它呢? 根据端口查看这个进程的pid netstat - ...

  2. Spark记录-spark-env.sh配置

    环境变量 含义 SPARK_MASTER_IP master实例绑定的IP地址,例如,绑定到一个公网IP SPARK_MASTER_PORT mater实例绑定的端口(默认7077) SPARK_MA ...

  3. spring web.xml 难点配置总结【转】

    web.xml web.xml是所有web项目的根源,没有它,任何web项目都启动不了,所以有必要了解相关的配置. ContextLoderListener,ContextLoaderServlet, ...

  4. fastjson基本使用 (待继续完善)【原】

    参考: http://blog.csdn.net/wx_962464/article/details/37612861 maven库下载 fastjson基本样例1 Cat.java package ...

  5. HDU - 5419 Victor and Toys（组合计数）

    http://acm.hdu.edu.cn/showproblem.php?pid=5419 题意 n个物品,标号1-n,物品i有权值wi.现在有m个区间[l,r],从中任意选三个区间i,j,k,求物 ...

  6. vscode插件和快捷键

    目前用的挺多的一些编辑器有webstorm,vscode,Atom,HBuilder等等 今天来说说vscode Visual Studio Code (简称 vscode) 是一款免费开源的现代化轻 ...

  7. luogu P1600 天天爱跑步

    传送门 1A此题暴祭 (下面记点\(x\)深度为\(de_x\),某个时间点记为\(w_x\)) 首先,每条路径是可以拆成往上和往下两条路径的 对于往上的路径,假设有个人往上跑,\(w_y\)在点\( ...

  8. 快速创建SpringBoot2.x应用之工具类自动创建web应用、SpringBoot2.x的依赖默认Maven版本

    快速创建SpringBoot2.x应用之工具类自动创建web应用简介:使用构建工具自动生成项目基本架构 1.工具自动创建:http://start.spring.io/ 2.访问地址:http://l ...

  9. C++11 多线程编程

    http://blog.csdn.net/column/details/ccia.html?&page=1

  10. ROS 错误之 [rospack] Error: package 'beginner_tutorials' not found

    ubuntu 下面情况处理 $ cd $gedit .bashrc 再后面加入两行 source /opt/ros/indigo/setup.bash source /home/lv/catkin_w ...