<!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. Request库学习

    0x00前言 这库让我爱上了python  碉堡! 开心去学了一些python,然后就来学这个时候神库~~ 资料来源:http://cn.python-requests.org/en/latest/u ...

  2. 从匿名函数（闭包特性）到 PHP 设计模式之容器模式

    匿名函数(匿名函数) 匿名函数,也叫闭包函数,它允许临时创建一个没有指定名称的函数,常用作回调函数参数的值,也可以作为变量的值来使用.具体的使用见以下示例代码: /* 示例一:声明一个简单匿名函数,并 ...

  3. android 插件合集

    1.增加编译速度:fastdex-plugin 2.gradle 版本网站http://services.gradle.org/distributions/

  4. .Net进阶系列(14)-异步多线程(async和await)（被替换）

    1.  方法名前只有async,但是方法中Task实例前没有await关键字,该方法和普通方法没有什么区别,但是会报一个警告. #region 情况一 /// <summary> /// ...

  5. 通过COM组件方式实现java调用C#写的DLL文件 转

    最近一段时间单位在做一个Web项目,工程师用JAVA语言,需要公用人员信息,统一用户名和密码,原有的平台中是用C#语言开发的,在网上查找解决方法,通过JAVA调用C#的DLL文件实现.网上资料很多,自 ...

  6. 使用PLC作为payload/shellcode分发系统

    这个周末,我一直在鼓捣Modbus,并利用汇编语言开发了一个stager,它可以从PLC的保持寄存器中下载payload.由于有大量的PLC都暴露在互联网上,我情不自禁地想到,是否可以利用它们提供的处 ...

  7. luogu P3193 [HNOI2008]GT考试

    传送门 单串匹配显然用\(kmp\) 一个暴力的dp是设\(f_{i,j}\),表示前\(i\)位,正在匹配给定串第\(j\)位的方案,转移就枚举下一位放什么,然后使用\(kmp\)看会匹配到给定串的 ...

  8. 第5月第7天 php slim

    1. <?php require 'Slim/Slim.php'; require 'DBManagement.php'; \Slim\Slim::registerAutoloader(); $ ...

  9. [CERC2016]机棚障碍 Hangar Hurdles（kruskal重构树+树上倍增）

    题面 \(solution:\) 某蒟蒻的心路历程: 这一题第一眼感觉很奇怪 带障碍物的图,最大的集装箱? 首先想到的就是限制我集装箱大小条件的是什么: 如果我要在某一个点上放一个集装箱且使它最大, ...

  10. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...