<!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. javascript 函数的4种调用模式

    1. 函数模式 // this 指向 window 全局对象 2. 方法模式 // this 指向调用这个方法的对象 3. 构造函数模式 // this 指向 new 新创建出来的实例 4. 上下文模 ...

  2. Kanboard简单的可视化任务板，项目管理

    采用docker安装 简单快捷 下载 docker pull kanboard/kanboard:latest 运行 docker run -d --name kanboard -p 10080:80 ...

  3. elementUI 表格设置表头样式

    eader-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className. Function({row, rowIndex}) ...

  4. android 不同Activity之间数据传递

    1. 传值Activity package mydemo.mycom.demo2; import android.content.Intent; import android.support.v7.a ...

  5. $_SERVER 当前信息

    连接:https://www.cnblogs.com/mafeng/p/5868117.html $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['R ...

  6. Linux之常识小结[版本]

    1 linux内核版本 major.minor.patchlevel 主版本号.次版本号.修补次数 次版本号的意义:偶数稳定版,奇数不稳定版 注意:查看系统版本信息 方法1.uname -a 方法2. ...

  7. Pandas提取数据存入excel

    import pandas as pd import pymysql def connect_db(): MYSQL_HOSTS = '127.0.0.1' MYSQL_USER = 'root' M ...

  8. 前端mock数据的几种方式

    方式 备注 本地php服务架设 直接输出json 使用在线mock服务 如easyMock.apizza.Rap1\2 , 可以远程协作  本地node服务:koa+mongodb    本地node ...

  9. mysql 5.7 ~ 新特性

    mysql 5.7特性 简介:mysql 5.7内存和线程性能方面的优化一 细节优化 参数:  1 innodb_buffer_pool    改进 innodb_buffer_pool可以动态扩大, ...

  10. WPS 表格筛选两列相同数据-完美-2017年11月1日更新

    应用: 1.选出A列中的数据是否在B列中出现过: 2.筛选出某一批序号在一个表格里面的位置(整批找出) 3.其实还有其他很多应用,难描述出来... ... A列中有几百的名字,本人想帅选出B列中的名字 ...